一、this

1.什么是this

this 關鍵字在大部分語言中都是一個重要的存在，JS中自然不例外，其表達的意義豐富多樣甚至有些復雜，深刻理解this是學習JS、面向對象編程非常重要的一環。

2.this 代表什么

this代表函數（方法）執行的上下文環境（上下文，類似與你要了解一篇文章，了解文章的上下文你才能清晰的了解各種關系）。

但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。

1.在方法中，this 表示該方法所屬的對象。

2.如果單獨使用，this 表示全局對象。

3.在函數中，this 表示全局對象。

4.在函數中，在嚴格模式下，this 是未定義的(undefined)。

5.在事件中，this 表示接收事件的元素。

6.類似 call() 和 apply() 方法可以將 this 引用到任何對象。

3.綁定 this 的方法

this的動態切換，固然為 JavaScript 創造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把this固定下來，避免出現意想不到的情況。JavaScript 提供了call、apply、bind這三個方法，來切換/固定this的指向。

4.this的指向

1.在一般函數方法中使用 this 指代全局對象

function test(){this.x = 1; //這里this就是windowconsole.log(this.x);}test(); // 1

JS規定，函數中的this，在函數被調用時確定，它指函數當前運行的環境。

2.作為對象方法調用，this 指代上級對象

var x =3;function test(){alert(this.x);}var o = { x:1, m:test };o.m(); // 1

如果函數作為對象的方法時，方法中的 this 指向該對象。

3.作為構造函數調用，this 指代new 出的對象

function test(){console.log(this);}var o = new test(); test();//可以看出o代表的不是全局對象

new關鍵詞的作用是調用某個函數并拿到其中的返回值，只是調用過程稍特殊。在上面的代碼實例中。test函數被new關鍵詞調用時，內部依次執行了以下步驟:

（1）創建一個空對象。

（2）將這個空對象的原型，指向這個構造函數的prototype。

（3）將空對象的值賦給函數內部的this（this就是個空對象了）。

（4）執行函數體代碼，為this這個對象綁定鍵值對。

（5）返回this，將其作為new關鍵詞調用oop函數的返回值。

所以構造函數中的this，依舊是在構造函數被new關鍵詞調用時確定其指向，指向的是當前被實例化的那個對象。

4.箭頭函數中的this

箭頭函數是ES6的新特性，最重要的特點是它會捕獲其所在上下文的this作為自己的this，或者說，箭頭函數本身并沒有this，它會沿用外部環境的this。也就是說，箭頭函數內部與其外部的this是保持一致的。

this.a=20var test={ a:40， init:()=>{ console.log(this.a) function go(){ this.a=60 console.log(this.a) } go.prototype.a=50 return go } }var p=test.init()p()new (test.init())()//輸出 20 60 60 60

5.改變指向

this的動態切換，固然為 JavaScript 創造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把this固定下來，避免出現意想不到的情況。JavaScript 提供了call、apply、bind這三個方法，來切換/固定this的指向。

bind方法和apply、call稍有不同，bind方法返回一個新函數，以后調用了才會執行，但apply、call會立即執行。

二、Function.prototype.bind()

bind()方法主要就是將函數綁定到某個對象，bind()會創建一個函數，函數體內的this對象的值會被綁定到傳入bind()中的第一個參數的值，例如：f.bind(obj)，實際上可以理解為obj.f()，這時f函數體內的this自然指向的是obj；

示例：

function f(y, z){ return this.x + y + z;}var m = f.bind({x : 1}, 2);console.log(m(3));//6

這里bind方法會把它的第一個實參綁定給f函數體內的this，所以這里的this即指向{x : 1}對象，從第二個參數起，會依次傳遞給原始函數，這里的第二個參數2，即是f函數的y參數，最后調用m(3)的時候，這里的3便是最后一個參數z了，所以執行結果為1 + 2 + 3 = 6分步處理參數的過程其實是一個典型的函數柯里化的過程（Curry）。

三、call/apply

1.定義

每個函數都包含兩個非繼承而來的方法：call()方法和apply()方法。

call和apply可以用來重新定義函數的執行環境，也就是this的指向；call和apply都是為了改變某個函數運行時的context，即上下文而存在的，換句話說，就是為了改變函數體內部this的指向。

2.語法

call()

調用一個對象的方法，用另一個對象替換當前對象，可以繼承另外一個對象的屬性，它的語法是：

Function.call(obj[, param1[, param2[, [,...paramN]]]]); obj：這個對象將代替Function類里this對象 params：一串參數列表

說明：call方法可以用來代替另一個對象調用一個方法，call方法可以將一個函數的對象上下文從初始的上下文改變為obj指定的新對象，如果沒有提供obj參數，那么Global對象被用于obj。

apply()

和call()方法一樣，只是參數列表不同，語法：

Function.apply(obj[, argArray]);

說明：如果argArray不是一個有效數組或不是arguments對象，那么將導致一個TypeError，如果沒有提供argArray和obj任何一個參數，那么Global對象將用作obj。

3.異同

相同點

call()和apply()方法的相同點就是這兩個方法的作用是一樣的。都是在特定的作用域中調用函數，等于設置函數體內this對象的值，以擴充函數賴以運行的作用域。

一般來說，this總是指向調用某個方法的對象，但是使用call()和apply()方法時，就會改變this的指向，看個例子：

function add(a, b) { return a + b;}function sub(a, b) { return a - b;}console.log(add.call(sub, 2, 1));//3

為什么add.call(sub, 2, 1)的執行結果是3呢，因為call()方法改變了this的指向，使得sub可以調用add的方法，也就是用sub去執行add中的內容，再來看一個例子：

function People(name, age) { this.name = name; this.age = age;}function Student(name, age, grade) { People.call(this, name, age); this.grade = grade;}var student = new Student(’小明’, 21, ’大三’);console.log(student.name + student.age + student.grade);//小明21大三

在這個例子中，我們并沒有給Student的name和age賦值，但是存在這兩個屬性的值，這還是要歸功于call()方法，它可以改變this的指向。

在這個例子里，People.call(this, name, age);中的this代表的是Student，這也就是之前說的，使得Student可以調用People中的方法，因為People中有this.name = name;等語句，這樣就將name和age屬性創建到了Student中。

總結一句話就是call()可以讓括號里的對象來繼承括號外函數的屬性。

至于apply()方法作用也和call()方法一樣，可以這么寫：

People.apply(this, [name, age]);

或者這么寫：

People.apply(this, arguments);

在這里arguments和[name, age]是等價的。

不同點

從定義中也可以看出來，call()和apply()的不同點就是接收參數的方式不同。

1.apply()方法接收兩個參數，一個是函數運行的作用域（this），另一個是參數數組。2.call()方法不一定接受兩個參數，第一個參數也是函數運行的作用域（this），但是傳遞給函數的參數必須列舉出來。

在給對象參數的情況下,如果參數的形式是數組的時候,比如之前apply()方法示例里面傳遞了參數arguments,這個參數是數組類型,并且在調用Person的時候參數的列表是對應一致的(也就是Person和Student的參數列表前兩位是一致的)就可以采用apply()方法。

但是如果Person的參數列表是這樣的(age,name)，而Student的參數列表是(name,age,grade)，這樣就可以用call()方法來實現了,也就是直接指定參數列表對應值的位置Person.call(this,age,name)。

到此這篇關于JavaScript中的this/call/apply/bind的使用及區別的文章就介紹到這了,更多相關JavaScript this/call/apply/bind內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！