-
目录
一、是什么
二、为什么
三、调用位置与调用栈
四、绑定规则：默认绑定，隐性绑定，显现绑定，new绑定
五、判断this
- 注：是看《你不知道的JavaScript》的学习笔记，有问题欢迎指出，
一、是什么
this是在函数被调用时绑定的，this绑定完全取决于函数的调用方法
二、为什么
当需要在不同的上下文对象中重复使用不同的函数时，不用针对每个对象编写不同版本的函数。
三、调用位置与调用栈
function foo1() {
console.log("foo1");
// 当前调用栈是foo1
// 因此当前调用位置是全局作用域
foo2();//foo2的调用位置
}
function foo2() {
console.log('foo2');
// 当前调用栈是foo1->foo2
// 因此当前调用位置在foo1中
foo3();//foo3的调用位置
}
function foo3() {
// 当前调用栈是foo1->foo2->foo3
// 因此当前调用位置在foo2
console.log('foo3');
}
foo1();//foo1的调用位置
四、绑定规则
（一）默认绑定
- 不带任何修饰的函数引用调用的，因此只能使用默认绑定
function foo() {
console.log(this.a)//2
}
var a=2;
foo();
- 如果是严格模式，那么全局对象将无法使用默认绑定，这时 this会绑定到undefined
function foo() {
"use strict";
console.log(this.a) //TypeError this is undefined
}
var a=2;
foo();
- 严格模式下， this的绑定与foo()的调用位置无关
function foo() {
console.log(this.a)//2
}
var a=2;
(function () {
"use strict";
foo();
})();
（二）隐性绑定
在一个对象内部包含一个指向函数的属性，并通过这个属性间接引用函数，从而把this间接（隐式)绑定到对象上。
function foo() {
console.log(this.a);
// console.log(obj.a);和上句一样
}
var obj={
a:2,
foo:foo
};
obj.foo();//调用foo()时，this被绑定到obj
- 对象属性引用链中只有最顶层或者说最后一层会影响调用位置
function foo() {
console.log(this.a);
}
var obj2={
a:42,
foo:foo
};
var obj1={
a:2,
obj2:obj2
};
obj1.obj2.foo();//42
- 隐式丢失
function foo() {
console.log(this.a);
}
var obj={
a:2,
foo:foo
};
var bar=obj.foo;//函数别名 |没有这句的话 输出2
var a="oops,global";//a是全局对象的属性
bar();//"oops,global"
//这里的bar()其实一个不带任何修饰的函数调用，因此应用了默认绑定
- 传入回调函数：丢失this绑定
function foo() {
console.log(this.a);
}
function doFoo(fn) {
fn();//调用位置
}
var obj={
a:2,
foo:foo
};
var a="oops,global";//a是全局对象的属性
doFoo(obj.foo);//"oops,global"
//参数传递其实就是一种隐式赋值，因此传入函数时也会被隐式赋值
- 传入内置函数
function foo() {
console.log(this.a);
}
var obj={
a:2,
foo:foo
};
var a="oops,global";//a是全局对象的属性
setTimeout(obj.foo,100);//"oops,global"
//JavaScript环境中内置的setTimeout()函数实现和下面的伪代码类似
function setTimeout(fn,delay) {
//等待delay毫秒
fn();//调用位置
}
（三）显性绑定
可以直接指定this的绑定对象称为显示绑定。在某对象上用call()和apply()强制调用函数，它们第一个参数是一个对象，会把这个对象绑定到this，接着再调用函数时，指定这个this。
function foo() {
console.log(this.a);
}
var obj={
a:2
};
foo.call(obj);//把foo的this绑定到obj上
（1）硬绑定解决丢失绑定问题
function foo() {
console.log(this.a);
}
var obj={
a:2
};
var bar=function () {
foo.call(obj);//强制把foo的this绑定到obj，
// 所以不管再怎么调用bar的值，总会强制把foo的this绑定到obj
};
bar();//2
setTimeout(bar,100);//2
//硬绑定的bar不可能再修改它的this
bar.call(window);//2
- 典型应用场景：
方法1：创建一个包裹函数，传入所有的参数并返回接收到的所有值
function foo(something) {
console.log(this.a, something);
return this.a+something;
}
var obj={
a:2
};
var bar=function () {
return foo.apply(obj,arguments);
}
var b=bar(3);//2 3
console.log(b);//5
方法2：创建一个可以重复使用的辅助函数
function foo(something) {
console.log(this.a, something);
return this.a+something;
}
var obj={
a:2
};
function bind(fn,obj) {
return function () {
return fn.apply(obj,arguments);
}
}
var bar=bind(foo,obj);
var b=bar(3);//2 3
console.log(b);//5
- 因为硬绑定常用，所有es6提供了内置方法Function.prototype.bind
function foo(something) {
console.log(this.a, something);
return this.a+something;
}
var obj={
a:2
};
var bar=foo.bind(obj);
//bind返回一个硬编码的新函数，它会把参数设置为this的上下文并调用原始函数
console.log(bar);//function() { [native code]}
//native code 的意思是它bai是程序自带的，是二进制编译的无法显示出du代码,是区别于虚拟机上运行的bai代码而言的。
var b=bar(3);//2 3
console.log(b);//5
（2）API调用的“上下文”解决丢失绑定问题
许多函数都有一个可选的参数，通常被称为“上下文，作用和bind一样，确保回调函数使用指定的this
function foo(el) {
console.log(el, this.id);
}
var obj={
id:"awesome"
}
var a=[1,2,3];
a.forEach(foo,obj);
- 实际就是用call或apply实现了显示绑定，这样可以少点代码
（四）new绑定
function foo(a) {
this.a=a;
}
var bar=new foo(2);
console.log(bar.a);
五、判断this绑定
四条规则的优先级：new绑定>显示绑定>隐式绑定>默认绑定
1. 函数是否在new中调用，是的话this绑定新创建的对象。（new绑定）
var bar = new foo()
2. 函数是否通过call、apply或者硬绑定调用，是的话this绑定的是指定的对象。（显示绑定）
var bar = foo.call (obj)
3. 函数是否在某个上下文对象中调用，是的话this绑定的是哪个上下文对象。（隐式绑定）
var bar = obj.foo()
4. 如果以上都不是，那就是默认绑定；如果函数体处于严格模式下，this就被绑定到undefined，否则绑定到全局对象。（默认绑定）
var bar = foo()
- 注：对于默认绑定来说，决定this绑定对象的不是调用位置是否处于严格模式，而是函数体是否处于严格模式。
六、绑定例外
（1）被忽略的this
null、undefined作为this的绑定对象传入call、apply、bind时，这些值会被忽略，所以这里应用的是默认绑定规则。
function foo() {
console.log(this.a);
}
var a=2;
foo.call(null);//2
- 可以加一个DMZ对象，比如Object.create (null)，以保护全局对象
（2）间接引用
赋值表达式p.foo=o.foo的返回值是目标函数的引用，因此调用的位置是foo()而不是p.foo()或者o.foo()，所以这里应用的是默认绑定规则。
function foo() {
console.log(this.a);
}
var a=2;
var o={a:3,foo:foo};
var p={a:4};
o.foo();//3
(p.foo=o.foo)();//2
（3）软绑定
七、箭头函数
箭头函数不使用this的四种标准规则，而是根据当前的词法作用域来this。
网友评论