23-this指向

23-this指向

执行期上下文

当函数执行时（准确来说，是在函数发生预编译的前一刻），会创建一个执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境。

每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立且独一无二的。当函数执行完毕，它所产生的执行期上下文会被销毁。

参考链接：https://www.cnblogs.com/chenyingjie1207/p/9966036.html

this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是 this，this 指向的是一个对象，这个对象我们称为函数执行的 上下文对象。

函数内 this 的指向【非常重要】

我们在《JavaScript 基础/函数.md》这篇文章讲过，函数的调用有六种形式。

根据函数的调用方式的不同，this 会指向不同的对象：

• 1.以函数的形式（包括普通函数、定时器函数、立即执行函数）调用时，this 的指向永远都是 window。比如fun();相当于window.fun();

• 2.以方法的形式调用时，this 指向调用方法的那个对象

• 3.以构造函数的形式调用时，this 指向实例对象

• 4.以事件绑定函数的形式调用时，this 指向绑定事件的对象

• 5.使用 call 和 apply 调用时，this 指向指定的那个对象

针对第 1 条的举例：

function fun() {
    console.log(this);
    console.log(this.name);
}
var obj1 = {
    name: 'smyh',
    sayName: fun,
};
var obj2 = {
    name: 'vae',
    sayName: fun,
};
var name = '全局的name属性';
//以函数形式调用，this是window
fun(); //可以理解成 window.fun()

打印结果：

    Window
    全局的name属性

上面的举例可以看出，this 指向的是 window 对象，所以 this.name 指的是全局的 name。

第 2 条的举例：

function fun() {
    console.log(this);
    console.log(this.name);
}
var obj1 = {
    name: 'smyh',
    sayName: fun,
};
var obj2 = {
    name: 'vae',
    sayName: fun,
};
var name = '全局的name属性';
//以方法的形式调用，this是调用方法的对象
obj2.sayName();

打印结果：

    Object
    vae

上面的举例可以看出，this 指向的是 对象 obj2 ，所以 this.name 指的是 obj2.name。

箭头函数中 this 的指向

ES6 中的箭头函数并不会使用上面的准则，而是会继承外层函数调用的 this 绑定（无论 this 绑定到什么）。

改变函数内部的 this 指向

JS 专门为我们提供了一些方法来改变函数内部的 this 指向。详见下一篇文章中的 call()、apply()、bind() 方法。

我的公众号

想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：