JavaScript中this的綁定規(guī)則是什么

JavaScript中this的綁定規(guī)則是什么？可能很多人對此沒有深入了解過，故而小編總結(jié)了這篇文章，通過這文章的講解，希望你能夠收獲更多知識。

this的四條綁定規(guī)則

1.默認綁定

這是最常用的函數(shù)調(diào)用類型：獨立函數(shù)調(diào)用（即函數(shù)是直接使用不帶任何修飾的函數(shù)引用進行調(diào)用的）。可以把這條規(guī)則看作是無法應(yīng)用其他規(guī)則時的默認規(guī)則。

默認綁定的this在非嚴格模式下指向window，嚴格模式下指向undefined，比如下面的函數(shù)foo在非嚴格模式下：

var a = 2;
function foo(){
    var a = 3;
    console.log(this.a);
}
foo(); //2

這里的foo()方法內(nèi)的this指向了window，因此 window.a = 2;

嚴格模式下，this.指向undefined，因此訪問this.a會報錯：

var a = 2;
function foo(){
    "use strict";
    var a = 3;
    console.log(this.a);
}
foo(); //Uncaught TypeError: Cannot read property 'a' of undefined

2.隱式綁定

如果調(diào)用位置上有上下文對象，或者說被某個對象“擁有”或者“包含”，則使用隱式綁定。

function foo() {
    console.log( this.a );
}
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 2

上例中的foo是通過obj.foo()的方式調(diào)用的，調(diào)用位置會使用obj上下文來引用函數(shù)，因此foo中的this指向了obj。

另外foo是當做引用被加入到obj中的，但是無論是直接在obj 中定義還是先定義再添加為引用屬性，foo嚴格上來說都不屬于obj,因此上述定義里面的“擁有”與“包含”加上了引號，這樣說是為了方便理解。

常見的隱式調(diào)用場景：

obj.fn();
arguments[i]();//其實就是將點的調(diào)用方式變?yōu)榱薣]調(diào)用
el.onClick(function(){console.log(this);//this指向el})

隱式丟失

先來看一段代碼：

function foo() {
    console.log( this.a );
}
var obj = {
    a: 2,
    foo: foo
};
var bar = obj.foo; // 函數(shù)別名！
var a = "global"; // a 是全局對象的屬性
bar(); // "global"

上述代碼其實只用看調(diào)用的方式：bar()，這其實是一個不帶任何修飾的函數(shù)調(diào)用，因此應(yīng)用了默認綁定。

還有一種參數(shù)傳遞的方式也會發(fā)生隱式丟失，原理其實跟上述例子一樣：

function foo() {
    console.log( this.a );
}
function doFoo(fn) {
    // fn 其實引用的是foo
    fn(); // <-- 調(diào)用位置！
}
var obj = {
    a: 2,
    foo: foo
};
var a = "global"; // a 是全局對象的屬性
doFoo( obj.foo ); // "global"

顯示綁定

使用call,apply和bind方法可以指定綁定函數(shù)的this的值，這種綁定方法叫顯示綁定。

function foo() {
    console.log( this.a );
}
var obj = {
    a:2
};
foo.call( obj ); // 2

通過foo.call(obj)，我們可以在調(diào)用foo 時強制把它的this 綁定到obj 上

new綁定

new操作符可以基于一個“構(gòu)造函數(shù)”新創(chuàng)建一個對象實例，new的實例化過程如下：

● 創(chuàng)建（或者說構(gòu)造）一個全新的對象。

● 這個新對象會被執(zhí)行[[ 原型]] 連接。

● 這個新對象會綁定到函數(shù)調(diào)用的this。

● 如果函數(shù)沒有返回其他對象，那么new 表達式中的函數(shù)調(diào)用會自動返回這個新對象。

明確了new的實例化過程后，思考如下代碼：

function foo(a) {
    this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

new foo(2)后新創(chuàng)建了個實例對象bar,然后把這個新對象bar綁定到了foo函數(shù)中的this，因此執(zhí)行this.a = a后其實是把a賦給了bar.a

優(yōu)先級

一般情況下this的綁定會根據(jù)上述四條綁定規(guī)則來，那么他們同時出現(xiàn)時，該以怎樣的順序來判斷this的指向？下面是具體的規(guī)則：

函數(shù)是否在new 中調(diào)用（new 綁定）？如果是的話this 綁定的是新創(chuàng)建的對象（ var bar = new foo() ）。

函數(shù)是否通過call、apply（顯式綁定）或者硬綁定調(diào)用？如果是的話，this 綁定的是指定的對象（ var bar = foo.call(obj2) ）。

函數(shù)是否在某個上下文對象中調(diào)用（隱式綁定）？如果是的話，this 綁定的是那個上下文對象。（ var bar = obj1.foo() ）

如果都不是的話，使用默認綁定。如果在嚴格模式下，就綁定到undefined，否則綁定到全局對象。（ var bar = foo() ）

綁定例外

1.使用call,appy,bind這種顯式綁定的方法，參數(shù)傳入null或者undefined作為上下文時，函數(shù)調(diào)用還是會使用默認綁定

function foo() {
    console.log( this.a );
}
var a = 2;
foo.call( null ); // 2

什么情況下需要將上下文傳為null呢？

1.使用bind函數(shù)來實現(xiàn)柯里化

function foo(a,b) {
    console.log(a,b);
}
// 使用 bind(..) 進行柯里化
var bar = foo.bind( null, 2 );
bar( 3 ); // 2,3

2.使用apply(..) 來展開一個數(shù)組，并當作參數(shù)傳入一個函數(shù)

function foo(a,b) {
    console.log(a,b);
}
// 把數(shù)組展開成參數(shù)
foo.apply( null, [2, 3] ); // 2,3

其實上面兩種使用場景其實都不關(guān)心call/app/bind第一個參數(shù)的值是什么，只是想傳個占位值而已。

但是總是傳入null可能會出現(xiàn)一些難以追蹤的bug，比如說當你在使用的第三方庫中的某個函數(shù)中有this時，this會被錯誤的綁定到全局對象上，造成一些難以預(yù)料的后果（修改全局變量）

var a = 1;//全局變量
const Utils = {
    a: 2,
    changeA: function(a){
        this.a = a;
    }
}
Utils.changeA(3);
Utils.a //3
a //1
Utils.changeA.call(null,4);
Utils.a //3
a //4,修改了全局變量a！

更安全的做法：

var o = Object.create(null);
Utils.changeA.call(o,6);
a //1, 全局變量沒有修改
o.a // 6 改的是變量o

2.間接引用

function foo() {
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2

賦值表達式p.foo = o.foo 的返回值是目標函數(shù)的引用，因此調(diào)用位置是foo() 而不是p.foo() 或者o.foo()。根據(jù)我們之前說過的，這里會應(yīng)用默認綁定。

this詞法（箭頭函數(shù)）

上述的幾種規(guī)則適用于所有的正常函數(shù)，但不包括ES6的箭頭函數(shù)。箭頭函數(shù)不使用this的四種標準規(guī)則，而是根據(jù)外層（函數(shù)或者全局）作用域（詞法作用域）來決定this

function foo() {
// 返回一個箭頭函數(shù)
    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() 內(nèi)部創(chuàng)建的箭頭函數(shù)會捕獲調(diào)用時foo() 的this。由于foo() 的this 綁定到obj1，bar（引用箭頭函數(shù)）的this 也會綁定到obj1，箭頭函數(shù)的綁定無法被修改。（new 也不行?。?/p>

幾個例子加深理解

this的理論知識講解得差不多了，來幾個例子看看自己有沒有理解全面：

1.經(jīng)典面試題：以下輸出結(jié)果是什么

var length = 10;
function fn() {
    console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};
obj.method(fn, 1);

obj中method方法里面調(diào)用了兩次fn。第一次是直接調(diào)用的“裸露”的fn,因此fn()中this使用默認綁定，this.length為10.第二次調(diào)用時通過arguments0的方式調(diào)用的，arguments[0]其實指向的就是fn，但是是通過obj[fn]這種對象上下文的隱式綁定的，因此this指向arguments，而arguments只有一個一項(method中只有fn一個參數(shù))，因此arguments.length為1。因此打印的結(jié)果為：

10
1

2.以下輸出什么

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};
obj.getAge();

答案是嚴格模式下會報錯，非嚴格模式下輸出NaN

原因也是因為在調(diào)用obj.getAge()后，getAge方法內(nèi)的this使用隱式綁定。但是return fn()的時候用的是“裸露的fn”使用默認綁定，fn里面的this指向window或者undefined。

使用箭頭函數(shù)來修正this的指向：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象
        return fn();
    }
};
obj.getAge(); // 25

使用箭頭函數(shù)后，fn中的this在他的詞法分析階段就已經(jīng)確定好了（即fn定義的時候），跟調(diào)用位置無關(guān)。fn的this指向外層的作用域（即getAge中的this）

3.以下輸出為什么是'luo'

var A = function( name ){ 
    this.name = name;
};
var B = function(){ 
    A.apply(this,arguments);
};
B.prototype.getName = function(){ 
    return this.name;
};
var b=new B('sven');  // B {name: "luo"}
console.log( b.getName() ); // 輸出:  'luo'

執(zhí)行new B('seven')后會返回一個新對象b,并且B函數(shù)中的this會綁定到新對象b上，B的函數(shù)體內(nèi)執(zhí)行A.apply(this.arguments)也就是執(zhí)行b.name = name;這個時候b的值就是{name:'luo'},所以b.getName()就能輸出'luo'啦~

實際在業(yè)務(wù)使用中，邏輯會更復(fù)雜一些，但是萬變不離其宗，都按照上面寫的規(guī)則來代入就好了

看完上述內(nèi)容，你們對JavaScript中this的綁定規(guī)則是什么有進一步的了解嗎？如果還想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱