文章目錄

一、this

1.什么是this

2.this 代表什么

3.綁定 this 的方法

4.this的指向

5.改變指向

二、Function.prototype.bind()

三、call/apply

1.定義

2.語(yǔ)法

3.異同

一、this

1.什么是this

this 關(guān)鍵字在大部分語(yǔ)言中都是一個(gè)重要的存在，JS中自然不例外，其表達(dá)的意義豐富多樣甚至有些復(fù)雜，深刻理解this是學(xué)習(xí)JS、面向?qū)ο缶幊谭浅Ｖ匾囊画h(huán)。



2.this 代表什么

this代表函數(shù)（方法）執(zhí)行的上下文環(huán)境（上下文，類(lèi)似與你要了解一篇文章，了解文章的上下文你才能清晰的了解各種關(guān)系）。



但在 JavaScript 中 this 不是固定不變的，它會(huì)隨著執(zhí)行環(huán)境的改變而改變。



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



2.如果單獨(dú)使用，this 表示全局對(duì)象。



3.在函數(shù)中，this 表示全局對(duì)象。



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



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



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



3.綁定 this 的方法

this的動(dòng)態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時(shí)，需要把this固定下來(lái)，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來(lái)切換/固定this的指向。



4.this的指向

1.在一般函數(shù)方法中使用 this 指代全局對(duì)象



function test(){

this.x = 1;  //這里this就是window

console.log(this.x);

}

test(); // 1



JS規(guī)定，函數(shù)中的this，在函數(shù)被調(diào)用時(shí)確定，它指函數(shù)當(dāng)前運(yùn)行的環(huán)境。



2.作為對(duì)象方法調(diào)用，this 指代上級(jí)對(duì)象



var x =3;

function test(){

alert(this.x);

}

var o = {

  x:1,

  m:test 

};

o.m(); // 1



如果函數(shù)作為對(duì)象的方法時(shí)，方法中的 this 指向該對(duì)象。



3.作為構(gòu)造函數(shù)調(diào)用，this 指代new 出的對(duì)象



function test(){

console.log(this);

}

var o = new test();

       test();

//可以看出o代表的不是全局對(duì)象



new關(guān)鍵詞的作用是調(diào)用某個(gè)函數(shù)并拿到其中的返回值，只是調(diào)用過(guò)程稍特殊。在上面的代碼實(shí)例中。test函數(shù)被new關(guān)鍵詞調(diào)用時(shí)，內(nèi)部依次執(zhí)行了以下步驟:



（1）創(chuàng)建一個(gè)空對(duì)象。



（2）將這個(gè)空對(duì)象的原型，指向這個(gè)構(gòu)造函數(shù)的prototype。



（3）將空對(duì)象的值賦給函數(shù)內(nèi)部的this（this就是個(gè)空對(duì)象了）。



（4）執(zhí)行函數(shù)體代碼，為this這個(gè)對(duì)象綁定鍵值對(duì)。



（5）返回this，將其作為new關(guān)鍵詞調(diào)用oop函數(shù)的返回值。



所以構(gòu)造函數(shù)中的this，依舊是在構(gòu)造函數(shù)被new關(guān)鍵詞調(diào)用時(shí)確定其指向，指向的是當(dāng)前被實(shí)例化的那個(gè)對(duì)象。



4.箭頭函數(shù)中的this

箭頭函數(shù)是ES6的新特性，最重要的特點(diǎn)是它會(huì)捕獲其所在上下文的this作為自己的this，或者說(shuō)，箭頭函數(shù)本身并沒(méi)有this，它會(huì)沿用外部環(huán)境的this。也就是說(shuō)，箭頭函數(shù)內(nèi)部與其外部的this是保持一致的。



this.a=20

var 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的動(dòng)態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時(shí)，需要把this固定下來(lái)，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來(lái)切換/固定this的指向。



bind方法和apply、call稍有不同，bind方法返回一個(gè)新函數(shù)，以后調(diào)用了才會(huì)執(zhí)行，但apply、call會(huì)立即執(zhí)行。



二、Function.prototype.bind()

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



示例：



function f(y, z){

    return this.x + y + z;

}

var m = f.bind({x : 1}, 2);

console.log(m(3));

//6

1

2

3

4

5

6

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



三、call/apply

1.定義

每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法：call()方法和apply()方法。



call和apply可以用來(lái)重新定義函數(shù)的執(zhí)行環(huán)境，也就是this的指向；call和apply都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的context，即上下文而存在的，換句話(huà)說(shuō)，就是為了改變函數(shù)體內(nèi)部this的指向。



2.語(yǔ)法

call()



調(diào)用一個(gè)對(duì)象的方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象，可以繼承另外一個(gè)對(duì)象的屬性，它的語(yǔ)法是：



Function.call(obj[, param1[, param2[, [,...paramN]]]]);

1

obj：這個(gè)對(duì)象將代替Function類(lèi)里this對(duì)象

params：一串參數(shù)列表



說(shuō)明：call方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，call方法可以將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)閛bj指定的新對(duì)象，如果沒(méi)有提供obj參數(shù)，那么Global對(duì)象被用于obj。



apply()



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



Function.apply(obj[, argArray]);



obj：這個(gè)對(duì)象將代替Function類(lèi)里this對(duì)象

argArray：這個(gè)是數(shù)組，它將作為參數(shù)傳給Function



說(shuō)明：如果argArray不是一個(gè)有效數(shù)組或不是arguments對(duì)象，那么將導(dǎo)致一個(gè)TypeError，如果沒(méi)有提供argArray和obj任何一個(gè)參數(shù)，那么Global對(duì)象將用作obj。



3.異同

相同點(diǎn)



call()和apply()方法的相同點(diǎn)就是這兩個(gè)方法的作用是一樣的。都是在特定的作用域中調(diào)用函數(shù)，等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值，以擴(kuò)充函數(shù)賴(lài)以運(yùn)行的作用域。



一般來(lái)說(shuō)，this總是指向調(diào)用某個(gè)方法的對(duì)象，但是使用call()和apply()方法時(shí)，就會(huì)改變this的指向，看個(gè)例子：



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)的執(zhí)行結(jié)果是3呢，因?yàn)閏all()方法改變了this的指向，使得sub可以調(diào)用add的方法，也就是用sub去執(zhí)行add中的內(nèi)容，再來(lái)看一個(gè)例子：



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大三



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

在這個(gè)例子里，People.call(this, name, age);中的this代表的是Student，這也就是之前說(shuō)的，使得Student可以調(diào)用People中的方法，因?yàn)镻eople中有this.name = name;等語(yǔ)句，這樣就將name和age屬性創(chuàng)建到了Student中。



總結(jié)一句話(huà)就是call()可以讓括號(hào)里的對(duì)象來(lái)繼承括號(hào)外函數(shù)的屬性。



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



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

1

或者這么寫(xiě)：



People.apply(this, arguments);

1

在這里arguments和[name, age]是等價(jià)的。



不同點(diǎn)



從定義中也可以看出來(lái)，call()和apply()的不同點(diǎn)就是接收參數(shù)的方式不同。



1.apply()方法接收兩個(gè)參數(shù)，一個(gè)是函數(shù)運(yùn)行的作用域（this），另一個(gè)是參數(shù)數(shù)組。

2.call()方法不一定接受兩個(gè)參數(shù)，第一個(gè)參數(shù)也是函數(shù)運(yùn)行的作用域（this），但是傳遞給函數(shù)的參數(shù)必須列舉出來(lái)。



在給對(duì)象參數(shù)的情況下,如果參數(shù)的形式是數(shù)組的時(shí)候,比如之前apply()方法示例里面?zhèn)鬟f了參數(shù)arguments,這個(gè)參數(shù)是數(shù)組類(lèi)型,并且在調(diào)用Person的時(shí)候參數(shù)的列表是對(duì)應(yīng)一致的(也就是Person和Student的參數(shù)列表前兩位是一致的)就可以采用apply()方法。



但是如果Person的參數(shù)列表是這樣的(age,name)，而Student的參數(shù)列表是(name,age,grade)，這樣就可以用call()方法來(lái)實(shí)現(xiàn)了,也就是直接指定參數(shù)列表對(duì)應(yīng)值的位置Person.call(this,age,name)。