110 lines
2.9 KiB
JavaScript
110 lines
2.9 KiB
JavaScript
|
## 执行期上下文
|
|||
|
|
|
|||
|
|
当**函数执行**时（准确来说，是在函数发生预编译的前一刻），会创建一个执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境。
|
|||
|
|
|
|||
|
|
每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立且独一无二的。当函数执行完毕，它所产生的执行期上下文会被销毁。
|
|||
|
|
|
|||
|
|
参考链接：<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 条的举例**：
|
|||
|
|
|
|||
|
|
```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`）。
|
|||
|
|
|
|||
|
|
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
|||
|
|
|
|||
|
|
|