该笔记参考自《你不知道的JavaScript上卷》
一.this全面解析
1.调用位置
function baz(){
//当前调用栈是：baz
//当前调用位置是全局作用域
bar();// --> bar()函数的调用位置
}
function bar(){
//当前调用栈是：baz -> bar
//当前调用位置是在baz()函数中
foo();// --> foo()函数的调用位置
}
function foo(){
//当前调用栈是：baz -> bar -> foo
//当前调用位置是在bar()函数中
}
baz();// --> baz()函数的调用位置
①调用栈是什么？
- 为了到达当前执行位置所调用的所有函数。调用栈中"最上面"的一个函数即为当前执行函数。
②调用位置：在当前执行的函数的前一个调用函数中。
2.绑定规则
2.1默认绑定
function foo(){
console.log(this.a);
}
var a = 2;
foo();
>>>2
①这是最常见的函数调用类型：独立函数调用。可以把这条规则看做无法应用其他规则时的默认规则。
②那怎么判断它就是默认绑定呢？
-
foo()函数调用是"干干净净"的，不带有任何修饰的函数引用。如：foo();
③默认绑定，那么this绑定谁呢？
- 全局对象
④上述描述并不严谨，需要考虑严格模式的影响：
- 若函数的调用位置处于严格模式下，
this仍绑定全局对象：
function foo(){
console.log(this.a);
}
var a = 2;
(function(){
'use strict'
foo();
})();
>>>2
- 若该函数的函数体处于严格模式，
this会绑定到undefined：
function foo(){
'use strict'
console.log(this.a);
}
var a = 2;
foo();
>>>Uncaught TypeError: Cannot read property 'a' of undefined
2.2隐式绑定
function foo(){
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
};
obj.foo();
>>>2
①当foo()函数被调用时，它前面加上了对obj的引用。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。上述代码中，因为调用foo()时this被绑定到obj对象，因此this.a和obj.a是一样的。
②对象属性引用链只有最后一层在调用位置中才起作用：
function foo(){
console.log(this.a);
}
var obj1 = {
a: 1,
foo: foo
};
var obj2 = {
a: 2,
obj1: obj1
};
obj2.obj1.foo();
>>>1
③一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说他会转换为默认绑定。
function foo(){
console.log(this.a);
}
var obj1 = {
a: 'obj1',
foo: foo
};
var bar = obj1.foo;
var a = 'global';
bar();
>>>global
虽然bar是obj.foo的一个引用，但实际上，它引用的是foo()函数本身，因为此时bar()其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
④
function foo(){
console.log(this.a);
}
function doFoo(fn){
fn();
}
var obj1 = {
a: 'obj1',
foo: foo
};
var a = 'global';
doFoo(obj1.foo);
>>>global
参数传递其实就是一种隐式赋值，因此，当我们传入函数时，也会被隐式赋值。在上述代码中，fn虽然是obj1.foo的引用，实际上它引用的是foo()函数本身，所以转换为默认绑定。
⑤如果把函数传入JavaScript内置的函数而不是自己声明的函数，会发生什么？
function foo(){
console.log(this.a);
}
var obj1 = {
a: 'obj1',
foo: foo
};
var a = 'global';
setTimeout(obj1.foo,100);
>>>global
-
事实证明：一样样的
-
其实
JavaScript环境中内置的setTimeout()函数实现和下面的代码类似：
function setTimeout(fn,delay){
//等待delay毫秒
fn();
}
⑥小结
- 当我们在分析隐式绑定时，我们必须在一个对象内部包含一个指向函数的属性，并通过这个属性间接引用函数，从而把
this间接（隐式）绑定到这个对象上。
2.3显式绑定
function foo(){
console.log(this.a);
}
var obj = {
a: 'obj'
};
foo.call(obj);
>>>obj
①隐式绑定的机制是：在对象内部包含函数引用。
- 那我想在某个对象上强制调用函数怎么办？
②这个时候apply()和call()方法就登场了，它们的第一个参数是一个对象，就是专门为this准备的，在调用函数时将其绑定到this。
③因为可以直接指定this的绑定对象，因此称为显式绑定。
④什么是硬绑定？
-
硬绑定是为了解决显式绑定的丢失绑定问题。
-
显式绑定的丢失绑定是啥？
function foo(){
console.log(this.a);
}
var obj = {
a: 'obj'
};
var a = 'global';
foo.call(window);
>>>global
3.硬绑定机制？
function foo(){
console.log(this.a);
}
function bar(){
return foo.call(obj);
}
var obj = {
a: 'obj'
};
bar();
>>>obj
setTimeout(bar,1000);
36
>>>obj
bar.call(window);
>>>obj
首先创建一个foo.call(obj)，然后将其"硬塞进"一个函数中，这样以来，无论以后如何调用该函数，它总会手动地在obj对象上调用foo()函数。
2.4 new绑定
①在JavaScript中，构造函数只是一些使用new操作符时被调用的普通函数。
function foo(content){
this.a = content;
}
var bar = new foo(2);
bar.a;
>>>2
- 使用
new操作符来调用foo()函数，会创建一个全新的对象，这个新的对象会绑定到foo()函数中的this。
3.优先级
①显式绑定>隐式绑定
function foo(){
return this.a;
}
var obj1 = {
a: 1,
foo: foo
};
var obj2 = {
a: 2,
foo: foo
};
var a = 'global';
obj1.foo();
>>>1
obj1.foo.call(obj2);
>>>2
②new绑定>隐式绑定
function foo(content){
this.a = content;
}
var obj1 = {
foo: foo
};
obj1.foo('隐式绑定');
obj1.a;
>>>"隐式绑定"
var bar = new obj1.foo('new绑定');
bar.a;
>>>"new绑定"
③new绑定> 显式绑定
function foo(content){
this.a = content;
}
var obj1 = {};
foo.call(obj1,'显式绑定');
obj1.a;
>>>"显式绑定"
var bar = foo.bind(obj1);
var baz = new bar('new绑定');
obj1.a;
>>>"显式绑定"
baz.a;
>>>"new绑定"
④小结
- 四种绑定规则的优先级：
new绑定>显式绑定>隐式绑定>默认绑定
总结：
- 如需判断一个运行中的函数的
this绑定，则首先需要找到这个函数的直接调用位置。找到之后就可以依次按照以下四条规则来判断this的绑定对象：
①由new调用？绑定到新创建的对象。
②由call或apply（或bind）调用？绑定到指定的对象。
③由上下文对象调用？绑定到那个上下文对象。
④默认：在严格模式下绑定到undefined，否则绑定到全局对象。
网友评论