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