首頁 > web前端 > js教程 > JavaScript 中的 this 全面解析

JavaScript 中的 this 全面解析

韦小宝
發布: 2017-11-30 10:41:30
原創
1275 人瀏覽過

JavaScript中有物件當然就少不了,this關鍵字啦!有了this關鍵字JavaScript的程式碼了也會減少點,今天我們就一起來分析一下JavaScript中的this吧!

隱式綁定

關於this,一般來說,誰呼叫了方法,該方法的this就指向誰,如:

function foo(){
    console.log(this.a)
}
var a = 3;
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 输出2,因为是obj调用的foo,所以foo的this指向了obj,而obj.a = 2
登入後複製

如果存在多次調用,物件屬性引用鏈只有上一層或說最後一層在調用位置中起作用,如:

function foo() {
    console.log( this.a )
}
var obj2 = { 
    a: 42,
    foo: foo
}
var obj1 = {
    a: 2,
    obj2: obj2
}
obj1.obj2.foo(); // 42
登入後複製

#隱含遺失


一個最常見的this綁定問題就是被隱式綁定的函數會遺失綁定對象,也就是說他回應用預設綁定,從而把this綁定到全域物件或undefined上,取決於是否是嚴格模式。

function foo() {
    console.log( this.a )
}
var obj1 = {
    a: 2,
    foo: foo
}
var bar = obj1.foo; // 函数别名!
var a = "oops, global"; // a是全局对象的属性
bar(); // "oops, global"
登入後複製

雖然bar是obj.foo的一個引用,但是實際上,它引用的是foo函數本身,因此此時的bar()其實是一個不帶任何修飾的函數調用,因此應用了預設綁定

一個更微妙、更常見且更出乎意料的情況發生在傳入回呼函數時:

function foo() {
    console.log( this.a )
}
function doFoo( fn ){
    // fn 其实引用的是 foo
    fn(); // <-- 调用位置!
}
var obj = {
    a: 2,
    foo: foo
}
var a = "oops, global"; // a是全局对象的属性
doFoo( obj.foo ); // "oops, global"
登入後複製

參數傳遞其實就是一種隱式賦值,因此我們傳入函數時也會被隱式賦值,所以結果和上一個例子一樣,如果把函數傳入語言內建的函數而不是傳入自己宣告的函數(如setTimeout等),結果也是一樣的

明確綁定

簡單的說,就是指定this,如:call、apply、bind、new綁定等

硬綁定

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}
var obj = {
    a: 2
}
var bar = function() {
    return foo.apply( obj, arguments)
}
var b = bar(3); // 2 3
console.log(b); // 5
登入後複製

這裡簡單做一下解釋: 在bar函數中,foo使用apply函數綁定了obj,也就是說foo中的this將指向obj,同時,使用arguments(不限制傳入參數的數量)作為參數傳入foo函數中;所以在運行bar(3)的時候,首先輸出obj.a也就是2和傳入的3,然後foo回傳了兩者的相加值,所以b的值為5


也同樣,本範例也可以使用bind:

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}
var obj = {
    a: 2
}
var bar = foo.bind(obj)
var b = bar(3); // 2 3
console.log(b); // 5
登入後複製

new綁定

在傳統物件導向的語言中,使用new初始化類別的時候會呼叫類別中的建構子,但JS中new的機制其實和麵向類別和語言完全不同。

使用new來呼叫函數,或者說發生建構函數呼叫時,會自動執行下面的操作:

    創建(或者說構造)一個全新的物件

    這個新物件會被執行[[Prototype]]連接

##    這個新物件會綁定到函數呼叫的this

    如果函數沒有回傳其他對象,那麼new

表達式中的函數會自動傳回這個新物件如:

function foo(a){
    this.a = a
}
var bar = new foo(2);
console.log(bar.a); // 2
登入後複製

使用new來呼叫foo(…)時,我們會建構一個新物件並把它綁定到foo(…)呼叫中的this上。 new是最後一種可以影響函數呼叫時this綁定行為的方法,我們稱之為new綁定。

this的優先權

#毫無疑問,預設綁定的優先權是四條規則中最低的,所以我們可以先不考慮它。


隱式綁定和明確綁定哪個優先權更高?讓我們來測試一下:

function foo(a){
    console.log(this.a)
}
var obj1 = {
    a: 2,
    foo: foo
}
var obj2 = {
    a: 3,
    foo: foo
}
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call(obj2); // 3
obj2.foo.call(obj1); // 2
登入後複製

可以看到,顯式綁定優先權較高,也就是說在判斷時應當先考慮是否可以存在顯式綁定。

現在我們要搞清楚new綁定和隱式綁定的優先權誰高誰低 :

function foo(something){
    this.a = something
}
var obj1 = {
    foo: foo
}
var obj2 = {}
obj1.foo(2); 
console.log(obj1.a); // 2
obj1.foo.call(obj2,3);
console.log(obj2.a); // 3
var bar = new obj1.foo(4)
console.log(obj1.a); // 2
console.log(bar.a); // 4
登入後複製

可以看到new綁定比隱式綁定優先權高。但是new綁定和顯式綁定誰的優先權更高呢?

function foo(something){
    this.a = something
}
var obj1 = {}
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2
var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3
登入後複製

可以看到,new綁定修改了硬綁定中的this,所以new綁定的優先權比顯式綁定更高。


之所以要在new中使用硬綁定函數,主要目的是預先設定函數的一些參數,這樣在使用new進行初始化時就可以只傳入其餘的參數。 bind(…)的功能之一就是可以把除了第一個參數(第一個參數用於綁定this)之外的其他參數都傳給下層的函數(這種技術稱為“部分應用”,是「柯里化」的一種)。舉例來說:

function foo(p1,p2){
    this.val = p1 + p2;
}
// 之所以使用null是因为在本例中我们并不关心硬绑定的this是什么
// 反正使用new时this会被修改
var bar = foo.bind(null,&#39;p1&#39;);
var baz = new bar(&#39;p2&#39;);
baz.val; // p1p2
}
登入後複製

柯里化:在直覺上,柯里化聲稱「如果你固定某些參數,你將得到接受餘下參數的一個函數」。所以對於有兩個變數的函數yx,如果固定了y = 2,則得到有一個變數的函數2x

This在箭頭函數中的應用

箭頭函數不使用this的四種標準規則,而是根據外層(函數或全域)作用域來決定this。

我们来看一下箭头函数的词法作用域:

function foo() {
    // 返回一个箭头函数
    return (a) => {
        // this继承自foo()
        console.log(this.a)
    };
}
var obj1 = {
    a: 2
};
var obj2 = {
    a: 3
};
var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是3!
登入後複製

foo()内部创建的箭头函数会捕获调用时foo()的this。由于foo()的this绑定到obj1,bar(引用箭头函数)的this也会绑定到obj1,箭头函数的绑定无法被修改。(new也不行!)

总结

如果要判断一个运行中的函数的this绑定,就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

由new调用?绑定到新创建的对象。

由call或者apply(或者bind)调用?绑定到指定的对象。

由上下文对象调用?绑定到那个上下文对象。

默认:在严格模式下绑定到undefined,否则绑定到全局对象。

相关推荐:

JavaScript学习笔记之基础语法

JavaScript 是真正的 OOP 语言吗?

如何用JavaScript修改伪类样式

以上是JavaScript 中的 this 全面解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板