关键词：
this指向
//普通函数中的this
console.log(this);//指向window
function fn()
console.log(this);
fn();//window
对象中的this
var obj=
a:1,
b:function()
console.log(this);
// this指向当前对象本身obj
,
c:this
// this指向对象外this的指向 一般指window
obj.c;
obj.b()
// 回调函数中的this
/*
1.如果直接指向的回调函数，this指向最外层window；
2.如果通过arguments直接使用参数指向函数，this则指向执行当前的函数arguments；
3.如果回调函数通过call，apply，bind重新指向了新的对象，this就是指向的这个新对象
*/
var obj =
b: 2,
a: function ()
setTimeout(function ()
console.log(this);
, 2000)//直接指向回调函数中的this，this就指向window
setTimeout(function (obj)
console.log(obj.b);
, 2000, this)//传入了参数obj，代替了this指向，所以这里this指向obj
obj.a()//2
// 类中的this
/*
(1) 普通方法中的this-------------被实例化对象
(2）静态方法static中的this-----当前类名
*/
class Box
constructor()
console.log(this);//普通方法中的this指向被实例化对象
play()
console.log(this);//普通方法中的this指向被实例化对象
static run()
console.log(this);
return this;
// 静态方法中的this就是当前类名，也是构造函数constrcutor;
//任何的静态方法中this就是当前的类
var b=new Box();
console.log(Box.run);
// 面向对象中的this
function Box(name)
this.name=name
console.log(this);
Box.prototype.play=function()
console.log(this);//this是指向执行该方法的实例化对象sxx
Box.run=function()
console.log(this);//box
var b=new Box('sxx');
b.play();//sxx
Box.run();//Box
var obj =
a: function ()
document.addEventListener("click", this.clicHandler);
,
clicHandler: function (e)
setTimeout(() =>
console.log(this);
, 2000);
obj.clicHandler();//document
var obj=
a:function()
console.log(this);//obj
,
b:()=>
console.log(this)//window
obj.a();
obj.b();
// call apply bind 中的this
function fn()
console.log(this);
var obj = a: 1 ;
fn.call(obj);//a:1//fn中this指向obj
fn. apply(obj);//a:1//fn中this指向obj
fn.bind(obj)();//a:1//fn中this指向obj
var obj =
a: function ()
function fn()
console.log(this);//window
fn();
console.log(this);//window
obj.a.call(null);//如果是call apply bind 带入的是null，将会把这里的this重新指向window
原型
<script>
function Person(name,age)
this.name=name;
this.age=age;
this.sex=function()
console.log('男')
Person.prototype.speak=function()//存储到一个构造方法中
console.log('666')
var p1=new Person('zgy',20);
var p2=new Person('zgy',19);
console.log(p1.speak===p2.speak);//true
console.log(p1.sex===p2.sex);//false p1 和 p2不是用的一个方法
</script>
静态成员和实例成员
实例成员
function Star(name)
this.name=name;
this.sing=function()
console.log('跳舞');
var st=new Star('xx');
console.log(st.name);//实例成员只能通过实例化的对象来访问
静态成员
function Car(brand)
this.brand = brand;
if (!Car.total)
Car.total = 0;
Car.total ;
var c1 = new Car('五菱')
console.log(Car.total)
var c2 = new Car('长安')
// 获取静态属性total
console.log(Car.total);
constructor构造函数
function Car(brand)
this.brand = brand // 实例属性
Car.prototype =
constructor:Car,//constrctor指回引用的构造方法 可以让原型对象指向原来的构造函数
drive: function ()
console.log('drive');
,
start: function ()
console.log('start');
,
stop: function ()
console.log('stop');
,
run: function ()
console.log('run');
console.log(Car.prototype)
var c1 = new Car()
c1.drive()
call方法
/*
*call可以修改this的指向，使用call()的时候参数一是修改后的this指向，参数2，参数3使用逗号隔开
*/
function Car(name,big)
this.name=name;
this.big=big;
function Dz(name,big)
Car.call(this,name,big);//调用父构造函数Car
var xx=new Dz('劳斯莱斯',20);
console.log(xx);
正则表达式学习笔记
正则表达式的概念及特点：
正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。规定一些特殊语法表示字符类、数量限定符和位置关系,然后用这些特殊语法和普通字符一起表示一个模式,这就是正则表达式(Regular Expression)。
给定一个正则表达式和另一个字符串，我们可以达到如下的目的：
-
给定的字符串是否符合正则表达式的过滤逻辑（称作“匹配”）；
-
可以通过正则表达式，从字符串中获取我们想要的特定部分。
正则表达式的特点：
-
灵活性、逻辑性和功能性非常的强；
-
可以迅速地用极简单的方式达到字符串的复杂控制。
一、js中正则表达式创建（两种）
方式一：通过调用RegExp对象的结构函数创建(不常用)
var rex=new RegExp(550);
方式儿：利用字面量创建正则表达式（常用）
var red=var /255/；
二、测试正则表达式
test()正则对象方法，用于测验字符串时候符合该规则，该对象返回true或者false
例：
var xx=/156/;
console.log(xx.test(15699))//匹配字符中出现123 返回结果为true
console.log(xx.test(9999))//匹配字符中没有123 返回结果为false
console.log(xx.text(165))//匹配字符中没有123 返回结果为false
三、正则表达式有三部分组成：
位置限定符
| 位置限定符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
^和$在一起，表示必须的精确匹配。
1.^情况
var xx=/^qdas/
console.log(xx.test('qdassssss'));
console.log(xx.test('qqdddddddd'));//第二个字母不能以第一个字母重复
2.^和$情况
var xx=/^qdas$/
console.log(xx.test('qdas')); //true
console.log(xx.test('qqdddddddd'));//false
字符类
| 字符 | 说明 |
|---|---|
| . | 匹配任意一个字符 |
| - | 在[]括号中使用，表示字符范围 |
| [] | 匹配括号中的任意一个字符 |
| ^ | 位于[]括号内，匹配除括号中的字符外的任意一个字符 |
1. .情况
var sb=/./;
console.log(sb.test('bfbsxca'))//true
2. []方括号情况
1. var jz=/[jiuzhea99]/
console.log(jz.test('jiuzhe'));//true
console.log(jz.test('9'));//true
2. var jz=/^[jiuzhea99]$/ //只用包含中括号中的任意一个字符返回true
console.log(jz.test('666666'));//false
console.log(jz.test(9));//true
console.log(jz.test('jiuzhea99'));//false
3.-情况
var jz=/^[A-Z]$/ //A-Z之间任意字母
console.log(jz.test('A'));//true
console.log(jz.test('a'));//false
console.log(jz.test('Ax9'));//false
4.^情况
var jz=/^[^A-Z0-9]$/ //取反不包含A-Z和0-9的 返回true
console.log(jz.test('A'));//false
console.log(jz.test('a'));//true
console.log(jz.test('Ax9a'));//false
数量限定符
| 数量符 | 说明 |
|---|---|
| ？ | 重复出现0次或1次 |
| * | 重复出现0次或更多次 |
| 重复出现一次或更多次 | |
| n | 重复出现n次 |
| n, | 重复出现n次或更多次 |
| n,m | 重复n次到m次 |
| ,m | 匹配最多m次 |
案例
<body>
<input type="text" name="" id="" placeholder="请输入你的英文名字">
<button>快快点击</button>
<span></span>
</body>
</html>
<script>
var named= /^[a-zA-Z]6,12$/;
var user=document.querySelector('input');
var btn=document.querySelector('button');
var span=document.querySelector('span');
btn.onclick=function()
if(named.test(user.value))
span.innerHTML='你的英文名是:' user.value;
else
span.innerHTML='naotan';
</script>
动图效果
正则替换replace
replace()方法可以实现替换字符串操作，用来替换的参数可以是字符串或正则表达式
var cc='axvr';
var ss= cc.replace('ax','sgxx');
console.log(ss);//axxx
var namer='xiaoming';
var names=namer.replace(/m/ig,'明');
console.log(names);
replace案例：
<body>
<input type="text" name="" id="" placeholder="禁止输入集美,giao">
<button>
快快点击昂
</button>
<span></span>
</body>
</html>
<script>
var input=document.querySelector('input');
var btn=document.querySelector('button');
var span=document.querySelector('span');
btn.addEventListener('click',function()
span.innerHTML=input.value.replace(/集美|giao/gi,'快快看看提示文字阿')
)
</script>
效果图
js高级(代码片段)
this指向//普通函数中的thisconsole.log(this);//指向windowfunctionfn()console.log(this);fn();//window对象中的thisvarobj=a:1,b:function()console.log(this);//this指向当前对象本身obj,c:this//this指向对象外this的指向一般指windowobj.c;o 查看详情
js事件高级(代码片段)
1.注册事件（绑定事件）1.1注册事件概述给元素添加事件，称为注册事件或者绑定事件注册事件有两种方式：传统方式和方法监听注册方式传统注册事件利用on开头的事件onclick<buttononclick="alert('hi~')... 查看详情
js事件高级(代码片段)
1.注册事件（绑定事件）1.1注册事件概述给元素添加事件，称为注册事件或者绑定事件注册事件有两种方式：传统方式和方法监听注册方式传统注册事件利用on开头的事件onclick<buttononclick="alert('hi~')... 查看详情
javascript笔试题（js高级代码片段）(代码片段)
目录1、哈希表+计数类型1.1、判断是否存在重复元素1.2、字符串中的第一个唯一字符1.3、有效的字母异位词1.4、多数元素1.5、只出现一次的数字1.6、位1的个数2、哈希表+映射功能2.1、两数之和2.2、两数组交集13、找规律题3.1... 查看详情
js高级_原型链(代码片段)
1.原型链(图解)*访问一个对象的属性时，*先在自身属性中查找，找到返回*如果没有,再沿着_proto__这条链向上查找,找到则返回*如果最终没找到,返回undefined*别名:隐式原型链*作用:查找对象的属性(方法)2.构造函数/原型/实体对象的... 查看详情
js高级——proxyreflect(代码片段)
一、监听对象的操作我们先来看一个需求：有一个对象，我们希望监听这个对象中的属性被设置或获取的过程通过我们前面所学的知识，能不能做到这一点呢？其实是可以的，我们可以通过之前的属性描述符... 查看详情
高级js学习数据类型(代码片段)
数据类型的一些细节1numberJs的number包括整数，浮点数，正数，负数，0.NaN(notanumber)他表示不是一个有效的数字，但是它隶属于number类型。如：NaN和任何值都不相等，包括自身。isNaN（val）用来检... 查看详情
js高级——错误处理(代码片段)
一、错误处理方案开发中我们会封装一些工具函数，封装之后给别人使用：在其他人使用的过程中，可能会传递一些参数；对于函数来说，需要对这些参数进行验证，否则可能得到的是我们不想要的结果&#x... 查看详情
js高级——await-async(代码片段)
一、异步函数asyncfunctionasync关键字用于声明一个异步函数：async是asynchronous单词的缩写，异步、非同步；sync是synchronous单词的缩写，同步、同时；async异步函数可以有很多中写法：二、异步函数的执行流程... 查看详情
js数组reduce()方法详解及高级技巧(代码片段)
转 https://www.jianshu.com/p/e375ba1cfc471、语法arr.reduce(callback,[initialValue])reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元... 查看详情
js高级——json数据存储学习笔记(代码片段)
在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。JSON的全称是JavaScriptObjectNotation（JavaScript对象符号）：JSON是由DouglasCrockford构想... 查看详情
js高级——内存管理和闭包(代码片段)
0、预备知识0.1认识内存管理不管什么样的编程语言，在代码的执行过程中都是需要给它分配内存的，不同的是某些编程语言需要我们自己手动的管理内存，某些编程语言会可以自动帮助我们管理内存：不管以什么... 查看详情
js高级_显示原型与隐式原型(代码片段)
1每个函数function都有一个prototype，即显示原型(属性)2每个实例对象都有一个proto_，可称为隐式原型(属性)3对象(实例)的隐式原型的值为其对应构造函数的显示原型的值，即他们都指向同一个对象4内存结构(如图)//定义构造函数funct... 查看详情
js高级——函数执行作用域链内存结构图(代码片段)
一、JavaScript的执行过程假如我们有下面一段代码，它在JavaScript中是如何被执行的呢？1.1第一步：初始化全局对象js引擎会在执行代码之前，会在堆内存中创建一个全局对象：GlobalObject（GO）该对象所有... 查看详情
vuerouter10条高级技巧(代码片段)
前言VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue.js过渡系统的视图过渡效果... 查看详情
js高级——模块化学习笔记(代码片段)
一、什么是模块化？到底什么是模块化、模块化开发呢？事实上模块化开发最终的目的是将程序划分成一个个小的结构；这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；这... 查看详情
js高级——iterator迭代器generator生成器(代码片段)
一、什么是迭代器？在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iteratorprotocol）：迭代器协议定义了产生一系列值（无论是有限还是无限个）的标准方式；那么在j... 查看详情
高级js学习typeof检测机制+栈堆内存(代码片段)
1数据类型ECMAScipt是基于对象的：在ECMAScript中，对象是0个或者多个属性的集合，每个属性具有决定每个属性的“属性”，当属性的可写属性被设置为false的时候，执行ECMAScirpt代码为其分配不同的值都将失败。... 查看详情