--- title: 23-this指向 publish: true --- ## 执行期上下文 当**函数执行**时(准确来说,是在函数发生预编译的前一刻),会创建一个执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境。 每调用一次函数,就会创建一个新的上下文对象,他们之间是相互独立且独一无二的。当函数执行完毕,它所产生的执行期上下文会被销毁。 参考链接: ## this 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是 this,this 指向的是一个对象,这个对象我们称为函数执行的 上下文对象。 ### 函数内 this 的指向【非常重要】 我们在《JavaScript 基础/函数.md》这篇文章讲过,函数的调用有**六种**形式。 根据函数的调用方式的不同,this 会指向不同的对象: - 1.以函数的形式(包括普通函数、定时器函数、立即执行函数)调用时,this 的指向永远都是 window。比如`fun();`相当于`window.fun();` - 2.以方法的形式调用时,this 指向调用方法的那个对象 - 3.以构造函数的形式调用时,this 指向实例对象 - 4.以事件绑定函数的形式调用时,this 指向**绑定事件的对象** - 5.使用 call 和 apply 调用时,this 指向指定的那个对象 **针对第 1 条的举例**: ```javascript 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 条的举例**: ```javascript 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`)。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: ![](https://img.smyhvae.com/20200102.png)