this / bind / call /apply
最后更新于：2022-04-02 03:24:14
[TOC]
## this
- 在 ES6 中可能会极大避免 this 产生的错误
- **this 永远指向最后调用它的那个对象**
示例1:
```
var name = "windowsName";
function a() {
var name = "Cherry";
console.log(this.name); // windowsName
console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this) // outer: Window
```
我们看最后调用`a`的地方`a();`，前面没有调用的对象那么就是全局对象 window，这就相当于是`window.a()`
示例2:
```
var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
window.a.fn();
// or
//a.fn();
```
示例2
```
var name = "windowsName";
var a = {
name : null,
// name: "Cherry",
fn : function () {
console.log(this.name); // windowsName
}
}
var f = a.fn;
f(); //
```
this 的指向并不是在创建的时候就可以确定的，在 es5 中，永远是**this 永远指向最后调用它的那个对象**
### 怎么改变 this 的指向
* 使用 ES6 的箭头函数
* 在函数内部使用`_this = this`
* 使用`apply`、`call`、`bind`
* new 实例化一个对象
#### 箭头函数
```
var name = "windowsName";
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( () => {
this.func1()
},100);
}
};
a.func2() // Cherry
```
**箭头函数的 this 始终指向函数定义时的 this，而非执行时**
如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”
#### 在函数内部使用 _this = this
```
var name = "windowsName";
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
var _this = this;
setTimeout( function() {
_this.func1()
},100);
}
};
a.func2() // Cherry
```
## apply
apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入
格式:`fun.apply(thisArg, [argsArray])`
示例1
```
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.apply(a),100);
}
};
a.func2() // Cherry
```
示例2
```
var a ={
name : "Cherry",
fn : function (a,b) {
console.log(this.name);
console.log( a + b)
}
}
a.fn.apply(a,[1,2])
// Cherry
// 3
```
## call
`fun.call(thisArg[, arg1[, arg2[, ...]]])`
示例1
```
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.call(a),100);
}
};
a.func2() // Cherry
```
示例2
```
var a ={
name : "Cherry",
fn : function (a,b) {
console.log(this.name);
console.log( a + b)
}
}
a.fn.call(a,1,2) // 3
```
## bind
```
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.bind(a)(),100);
}
};
a.func2() // Cherry
```
bind()方法创建一个新的函数
```
var a ={
name : "Cherry",
fn : function (a,b) {
console.log(this.name);
console.log( a + b)
}
}
a.fn.bind(a,1,2)()
// Cherry
// 3
```
';