[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 ```