2020-2-2 seo達(dá)人
文章目錄
一、this
1.什么是this
2.this 代表什么
3.綁定 this 的方法
4.this的指向
5.改變指向
二、Function.prototype.bind()
三、call/apply
1.定義
2.語法
3.異同
一、this
1.什么是this
this 關(guān)鍵字在大部分語言中都是一個(gè)重要的存在,JS中自然不例外,其表達(dá)的意義豐富多樣甚至有些復(fù)雜,深刻理解this是學(xué)習(xí)JS、面向?qū)ο缶幊谭浅V匾囊画h(huán)。
2.this 代表什么
this代表函數(shù)(方法)執(zhí)行的上下文環(huán)境(上下文,類似與你要了解一篇文章,了解文章的上下文你才能清晰的了解各種關(guān)系)。
但在 JavaScript 中 this 不是固定不變的,它會(huì)隨著執(zhí)行環(huán)境的改變而改變。
1.在方法中,this 表示該方法所屬的對象。
2.如果單獨(dú)使用,this 表示全局對象。
3.在函數(shù)中,this 表示全局對象。
4.在函數(shù)中,在嚴(yán)格模式下,this 是未定義的(undefined)。
5.在事件中,this 表示接收事件的元素。
6.類似 call() 和 apply() 方法可以將 this 引用到任何對象。
3.綁定 this 的方法
this的動(dòng)態(tài)切換,固然為 JavaScript 創(chuàng)造了巨大的靈活性,但也使得編程變得困難和模糊。有時(shí),需要把this固定下來,避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法,來切換/固定this的指向。
4.this的指向
1.在一般函數(shù)方法中使用 this 指代全局對象
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.作為對象方法調(diào)用,this 指代上級對象
var x =3;
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m(); // 1
如果函數(shù)作為對象的方法時(shí),方法中的 this 指向該對象。
3.作為構(gòu)造函數(shù)調(diào)用,this 指代new 出的對象
function test(){
console.log(this);
}
var o = new test();
test();
//可以看出o代表的不是全局對象
new關(guān)鍵詞的作用是調(diào)用某個(gè)函數(shù)并拿到其中的返回值,只是調(diào)用過程稍特殊。在上面的代碼實(shí)例中。test函數(shù)被new關(guān)鍵詞調(diào)用時(shí),內(nèi)部依次執(zhí)行了以下步驟:
(1)創(chuàng)建一個(gè)空對象。
(2)將這個(gè)空對象的原型,指向這個(gè)構(gòu)造函數(shù)的prototype。
(3)將空對象的值賦給函數(shù)內(nèi)部的this(this就是個(gè)空對象了)。
(4)執(zhí)行函數(shù)體代碼,為this這個(gè)對象綁定鍵值對。
(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è)對象。
4.箭頭函數(shù)中的this
箭頭函數(shù)是ES6的新特性,最重要的特點(diǎn)是它會(huì)捕獲其所在上下文的this作為自己的this,或者說,箭頭函數(shù)本身并沒有this,它會(huì)沿用外部環(huán)境的this。也就是說,箭頭函數(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固定下來,避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法,來切換/固定this的指向。
bind方法和apply、call稍有不同,bind方法返回一個(gè)新函數(shù),以后調(diào)用了才會(huì)執(zhí)行,但apply、call會(huì)立即執(zhí)行。
二、Function.prototype.bind()
bind()方法主要就是將函數(shù)綁定到某個(gè)對象,bind()會(huì)創(chuàng)建一個(gè)函數(shù),函數(shù)體內(nèi)的this對象的值會(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}對象,從第二個(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ù)的過程其實(shí)是一個(gè)典型的函數(shù)柯里化的過程(Curry)。
三、call/apply
1.定義
每個(gè)函數(shù)都包含兩個(gè)非繼承而來的方法:call()方法和apply()方法。
call和apply可以用來重新定義函數(shù)的執(zhí)行環(huán)境,也就是this的指向;call和apply都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的context,即上下文而存在的,換句話說,就是為了改變函數(shù)體內(nèi)部this的指向。
2.語法
call()
調(diào)用一個(gè)對象的方法,用另一個(gè)對象替換當(dāng)前對象,可以繼承另外一個(gè)對象的屬性,它的語法是:
Function.call(obj[, param1[, param2[, [,...paramN]]]]);
1
obj:這個(gè)對象將代替Function類里this對象
params:一串參數(shù)列表
說明:call方法可以用來代替另一個(gè)對象調(diào)用一個(gè)方法,call方法可以將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)閛bj指定的新對象,如果沒有提供obj參數(shù),那么Global對象被用于obj。
apply()
和call()方法一樣,只是參數(shù)列表不同,語法:
Function.apply(obj[, argArray]);
obj:這個(gè)對象將代替Function類里this對象
argArray:這個(gè)是數(shù)組,它將作為參數(shù)傳給Function
說明:如果argArray不是一個(gè)有效數(shù)組或不是arguments對象,那么將導(dǎo)致一個(gè)TypeError,如果沒有提供argArray和obj任何一個(gè)參數(shù),那么Global對象將用作obj。
3.異同
相同點(diǎn)
call()和apply()方法的相同點(diǎn)就是這兩個(gè)方法的作用是一樣的。都是在特定的作用域中調(diào)用函數(shù),等于設(shè)置函數(shù)體內(nèi)this對象的值,以擴(kuò)充函數(shù)賴以運(yùn)行的作用域。
一般來說,this總是指向調(diào)用某個(gè)方法的對象,但是使用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)容,再來看一個(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è)例子中,我們并沒有給Student的name和age賦值,但是存在這兩個(gè)屬性的值,這還是要?dú)w功于call()方法,它可以改變this的指向。
在這個(gè)例子里,People.call(this, name, age);中的this代表的是Student,這也就是之前說的,使得Student可以調(diào)用People中的方法,因?yàn)镻eople中有this.name = name;等語句,這樣就將name和age屬性創(chuàng)建到了Student中。
總結(jié)一句話就是call()可以讓括號里的對象來繼承括號外函數(shù)的屬性。
至于apply()方法作用也和call()方法一樣,可以這么寫:
People.apply(this, [name, age]);
1
或者這么寫:
People.apply(this, arguments);
1
在這里arguments和[name, age]是等價(jià)的。
不同點(diǎn)
從定義中也可以看出來,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ù)必須列舉出來。
在給對象參數(shù)的情況下,如果參數(shù)的形式是數(shù)組的時(shí)候,比如之前apply()方法示例里面?zhèn)鬟f了參數(shù)arguments,這個(gè)參數(shù)是數(shù)組類型,并且在調(diào)用Person的時(shí)候參數(shù)的列表是對應(yīng)一致的(也就是Person和Student的參數(shù)列表前兩位是一致的)就可以采用apply()方法。
但是如果Person的參數(shù)列表是這樣的(age,name),而Student的參數(shù)列表是(name,age,grade),這樣就可以用call()方法來實(shí)現(xiàn)了,也就是直接指定參數(shù)列表對應(yīng)值的位置Person.call(this,age,name)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com