网站建设建设公司资质要求,wordpress 支付,如何推广品牌,有几个网站一、this指向的四种规则
1.默认绑定规则 默认指向#xff1a;指向window 独立调用#xff1a;指向window 对象指向#xff0c;比较的是引用地址。
console.log(this window); //true
console.log({} {}); //false
//函数的独立调用
function test(){console.lo…一、this指向的四种规则
1.默认绑定规则 默认指向指向window 独立调用指向window 对象指向比较的是引用地址。
console.log(this window); //true
console.log({} {}); //false
//函数的独立调用
function test(){console.log(this window); //true
}
test();
2.隐式绑定规则 obj.foo() //对象调用 谁调用就指向谁。
let a 0;
let obj {a:2,foo:function(){console.log(this) //obj}}
obj.foo(); 这里foo.function是obj对象里面的foo属性是一个函数。当我们用对象的属性的方式调用这个方法的时候那么this指向obj。
但如果foo写的是箭头函数this就指向window了。
let a 0;
let obj {a:2,foo:() {console.log(this) //window or global object}}
obj.foo(); 那么下面两个this是否相同呢
这两个this自然不是同一个this因为不同函数执行产生不同的AO所以每个函数有自己的this指向但指向有可能相同由当前执行方式决定。
这里的相同说的是指向对象是同一个但是他们的函数内部是不相等的地址不同。
let a 0;
let obj {a:2,foo:function(){console.log(this) //objfunction test(){console.log(this); //window}test(); //独立调用就指向window}}
obj.foo(); //这里是obj调用 下面这里立即执行我们要看执行环境指向相应的全局对象。
这里立即执行函数全都指向window因为这里是浏览器环境。
let a 0;
let obj {a:2,foo:function(){console.log(this) //obj//立即执行函数全都指向window(function(){ console.log(this); //window})()}}
obj.foo(); 闭包闭包就是内层函数引用外层函数的变量。当函数调用的时候导致内部新函数被定义并抛出内部被定义的新函数。
作用延长变量的声明周期。
let a 0;
let obj {a:2,foo:function(){console.log(this) //objfunction test(){console.log(this); //window}return test;}}
obj.foo()(); //调用的时候依旧是独立调用相当于test() 隐式丢失
变量赋值
当方法被赋值的时候存在一种例外的现象它调用了却没有指向它管这种现象叫隐式丢失。其实本质还是看函数怎么执行的就可以了。也可以去看一下赋值的原理。
我们知道this指向是在函数执行时产生的。而下面这段代码中是先将obj对象的属性赋值给b然后再执行的。所以这里foo只是把只想空间的地址赋给b了但是空间里的this指向没有任何改变。
let a 0;
function foo(){console.log(this)
}
let obj {a:2,foo:foo
}
obj.foo(); //obj 对象调用
let b obj.foo;
b(); //window 独立调用
let c foo;
c(); //window 独立调用
foo(); //window 独立调用
参数赋值
函数传参过程就是变量赋值应为js只有按值传递那么这就也会考虑到隐式丢失的问题。
let a 0;
function foo(){console.log(this);
}
function b(x){x(); //window
}
let obj{a:2,foo:foo
}
//预编译的过程中实参被赋值为形参。值的拷贝的过程浅拷贝
b(obj.foo);
补充一下预编译的5步 1. 创建 AO {} 2. 找变量声明、形参、赋值为undefined挂载到AO上 3. 实参和形参统一 4. 找函数声明赋值函数体 5. 语句执行 父函数有能力决定子函数的 this指向。
new 把函数当做构造函数执行this指向实例。
let a 0;
function foo(){console.log(this);
}
function b(x){//父元素改变子元素的this指向的方式x(obj); //windownew x(); //强行指向实例之后的对象foox.bind(obj)(); //强行指向obj
}//api 接口中指明的//回调函数父函数子函数
var arr [1,2,3];
arr.forEach(function(item, idx, arr){console.log(this); //window
},this)
arr.sort(function(a, b){console.log(this); //windowreturn a-b;
})
setInterval(function(){console.log(this); //window
})let obj{a:2,foo:foo
}
//预编译的过程中实参被赋值为形参。值的拷贝的过程浅拷贝
b(obj.foo); 3.显示绑定
改变this指向三兄弟call, apply, bind
let a 0;
function foo(){console.log(this);
}let obj{a:2,foo:foo
}let bar obj.foo;obj.foo();
bar.call(obj);
bar.apply(obj);
bar.bind(obj)(); let a 0;
function foo(a,b,c,d,e){console.log(a b c d e);
}let obj{a:2,foo:foo
}let bar obj.foo;obj.foo(1,2,3,4,5);
bar.call(obj,1,2,3,4,5);
bar.apply(obj,[1,2,3,4,5]);
bar.bind(obj)(1,2,3,4,5); js中认为一切皆对象因为会存在相应的包装类类型。
包装类包括三种Boolean、String、Number
像下面这种情况第一个传参不是对象时会指向对应的包装类。 强绑定绑定的是对像但是像 null 和 undefined 没有包装类意味着绑定失败采用默认绑定方式指向window。 4. new 绑定
只有构造函数会用到new函数在执行以后实例化之后的对象。
function Person(){this.a 1;return this; //函数在执行以后实例化之后的对象
}
var person new Person();
console.log(person); return 的值为引用值改变当前的this指向函数内部的this指向就不会指向实例之后的对象。所以在ES6中规定了在执行时规定只能通过new的方式来执行在返回值的部分不会手动返回。 总结
通过当前函数的调用方式就能清楚知道this指向应该指向什么。
new Person(); //new执行
foo(); //函数独立调用
obj.foo(1,2,3,4,5); //对象调用
bar.call(obj,1,2,3,4,5);
bar.apply(obj,[1,2,3,4,5]);
bar.bind(obj)(1,2,3,4,5);
练习
var name 222;
var a {name:111,say: function(){console.log(this.name);}
}
var fun a.say;
fun();
a.say(); fun独立调用,this指向window所以打印的一定是name。所以结果是 二、this绑定的四种规则的优先级 优先级new绑定 显示绑定 隐式绑定规则 默认规则绑定 立即执行函数在使用call、aplay、bind的时候存在优先级问题。
下面这个例子中有 call 指向 obj没 cal l指向 window所以 call 的优先级更大。 下面这段代码也能体现 new 优先级更高。
function foo(b){this.a b;
}
var obj1 {}
var bar foo.bind(obj1);
bar(2);console.log(bar);
console.log(obj1.a); //2var baz new bar(3);
console.log(obj1.a); //2console.log(baz.a); //3 解释一下第二个输出这里我们定义了一个函数 foo它接受一个参数 b 并将其赋值给 this.a。然后我们创建了一个空对象 obj1 和一个新的函数 bar该函数是使用 bind 方法将 foo 函数绑定到 obj1 对象上的。接着我们调用了 bar(2)这样 foo 函数会被执行将 obj1.a 的值设置为 2。
下面这个例子可以清晰看出 显示绑定 隐式绑定
function foo(){console.log(this.a);
}
var obj1 {a: 1,foo: foo
}
var obj2 {a: 2,foo: foo
}obj1.foo()
obj2.foo()obj1.foo.call(obj2);
obj2.foo.call(obj1); 三、箭头函数中的this
箭头函数内部没有this指向箭头函数的this指向是由外层函数的作用域决定的。
let a 0;
function foo(){let that thisfunction test1(){console.log(this); //window}var test2 () {console.log(this); //obj}test1();test2();
}
var obj {a: 1,foo: foo
}
obj.foo();
1. 默认绑定规则独立调用对箭头函数无效
let a 0;
function foo(){console.log(this); //obj1var test () {console.log(this); //obj1}return test
}var obj1 {a: 1,foo: foo
}var obj2 {a: 2,foo: foo
}obj1.foo()(); //默认绑定规则独立调用对箭头函数无效
2. 显示绑定无效
let a 0;
function foo(){console.log(this); //window//function test(){// console.log(this); //obj2//}var test () {console.log(this); //window}return test
}var obj1 {a: 1,foo: foo
}var obj2 {a: 2,foo: foo
}var bar foo().call(obj2); // 显示绑定无效
3. 隐式绑定规则无效
let a 0;var obj1 {a: 1,foo: () {console.log(this); //window(向上找全局的this)}
}obj1.foo(); //隐式绑定规则无效
4. new不能实例箭头函数
箭头函数不允许作为构造函数使用 总结
箭头函数所有绑定规则不适用。
箭头函数的 this 取决于父环境中的 this指向 不存在 this指向 换句话说 箭头函数中没有自己的 this 与 construtor因为没有 construtor 所以无法实例化(new)操作它要的 this 没有自然会向父级作用域链查找所以它的 this 是父级的 this。
