一、this 指向梳理图
this 的指向梳理图
二、逐个学习
先说明上下文(context)和作用域(scope)的区别：
- 作用域(scope): 指变量、函数、对象的可访问性
- 上下文(context)：this 在同一作用域中的值
为什么设计出 this ?
函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境(context)。this 的设计目的就是在函数体内部，指代函数当前的运行环境。
2.1 全局上下文
说明：全局上下文、全局环境其实都是全局上下文环境 的简称，好多文章两种简称都在用。
函数在浏览器全局上下文环境中被调用时：
- 非严格模式：this 指向全局对象
window - 严格模式：this 指向
undefined
demo 2-1
2.2 构造函数
2.2.1 通过 new 调用构造函数
需要提前了解 new 关键字的底层原理。可稍后看文章底部。
构造函数中的 this 根据构造函数返回值的不同，指向也不同
- 构造函数显式 return 一个对象类型(包括：数组、函数等)：this 指向返回的对象
demo 2-2.1-1
- 构造函数显式 return 一个非对象类型(基础类型)：this 指向实例对象
demo 2-2.1-2
-
未显示指定 return, 构造函数会默认返回实例对象，而且 this 指向这个实例对象
demo 2-2.1-2
2.2.2 直接调用构造函数，当做普通函数
this 指向全局对象 window。
demo 2-2.2
2.3 对象方法中的 this
当以对象方法调用函数时，this 指向调用当前函数的对象。
function say() {
console.log(this.name);
}
const person = {
name: 'lee',
say
}
person.say();
demo 2-3.1
先在外部定义函数，并未影响 this 的绑定，关键还是看谁调用了这个函数。
demo 2-3.2
2.4 getter 与 setter 中的 this
this 指向调用 getter、setter 的对象。
从下面例子中的 temp 对象能够看出，通过 temp.prop = person.prop; ,将 getter 与 setter 赋予 temp 对象，之后调用 temp.prop 时，this 指向的是 temp 对象，所以不会对 person 产生影响。
class Person {
constructor() {
this.name = 'lee';
}
get prop() {
return this.name;
}
set prop(value) {
this.name = value;
}
}
const person = new Person();
console.log("===============person 实例对象===============");
console.log('修改前 person.name：',person.prop);
person.prop = 'nacy';
console.log('修改后 person.name：',person.prop);
console.log("=============== temp 对象===============");
const temp = {
name: 'temp'
}
temp.prop = person.prop;
console.log('修改前 temp.name：',temp.prop);
temp.prop = 'andy';
console.log('修改后 temp.name：',temp.prop);
console.log('对person没影响：',person.prop);
运行结果：
demo 2-4
2.5 原型链中的 this
this 指向调函数的对象。
从下面的例子可以看出，child 实例对象的 say 方法是通过原型链在 Parent 的原型上找到的，但是因为调用 say 的是 child 实例对象，所以此时 this 指向 child，输出就是 child。
function Parent() {
this.name = 'father';
}
Parent.prototype.say = function () {
console.log(this.name);
}
function Child() {
this.name = 'child';
}
Child.prototype = new Parent();
const child = new Child();
child.say();
运行结果：
demo 2-5
2.6 箭头函数中的 this
箭头函数中没有 this 绑定，this 的值由外层最近的非箭头函数的作用域决定。
2.7 回调函数中的 this
setTimeout()、forEach()、dom 中的事件等，表现是类似的，这里采用《深入浅出 es6 》 中的例子：
var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // 错误
}, false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
此时 this 指向的是 document ，容易被忽略掉。改用箭头函数之后，this 的值通过查找作用域链来确定，外层最近的函数就是 init, 此时 this 就指向了 PageHandler, 将能够正确调用 doSomething 。
2.8 bind、call、apply 改变 this 的指向
bind 和 call 、apply 的区别：
bind 返回的是一个新的函数，并未立即执行原函数。
call、apply 会立即执行原函数。
call 和 apply 的区别：
call 的参数需要一个个写上
apply 的参数是一个数组。
2.9 this 优先级
显式绑定：call、apply、bind、new。
隐式绑定：根据调用关系确定 this 指向。
-
new 绑定的优先级比 bind 绑定高。
调用 bind 返回的新绑定函数，如果被当做构造函数，使用new关键字调用，bind 对 this 的绑定将被忽略。 -
箭头函数的优先级比 call、apply 高
var a = 10;
const say = () => {
// this 原始指向 window
console.log(this.a);
}
const obj = {
a: 3
}
// 试图用 call 改变 this 的指向
say.call(obj);
// 试图用 bind 改变 this 的指向
const bindSay = say.bind(obj);
bindSay();
使用 let 和 const 声明的变量不会挂载到 window 全局对象上，所以为了能正常打印出 10，这里使用了 var a = 10;
一句话总结
候策的陈述是：this 的指向，是在调用函数时根据执行上下文所动态确定的。
- 直观的看，这句话对于
对象方法和箭头函数是容易理解的。 - call、apply、bind 这里要绕个弯子想，call、apply、bind 的内部实现原理还是通过指定的对象来调用原函数，所以也符合。
- 通过 new 关键字调用构造函数，这里是一样的思考方式，new 关键字的底层原理：
- 创建一个空对象，作为将要返回的对象实例
- 将这个空对象的原型，指向构造函数的 prototype 属性
- 将这个空对象赋值给 this
- 开始执行构造函数内部的代码，返回这个新的对象。
所以这里 this 指向的是实例对象。
参考
阮一峰 this 关键字
JavaScript中call,apply,bind以及this的理解
候策： 一网打尽 this，对执行上下文说 Yes
网友评论