JavaScript中this綁定規(guī)則的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹JavaScript中this綁定規(guī)則的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

我們提供的服務(wù)有：做網(wǎng)站、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、貴南ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的貴南網(wǎng)站制作公司

一、this 的綁定規(guī)則

this 一共有 4 中綁定規(guī)則，接下來一一介紹每種規(guī)則的解釋和規(guī)則直接的優(yōu)先級(jí)

• 默認(rèn)綁定（嚴(yán)格/非嚴(yán)格模式）

• 隱式綁定

• 顯式綁定

• new 綁定

1.1 默認(rèn)綁定（嚴(yán)格/非嚴(yán)格模式）

• 獨(dú)立函數(shù)調(diào)用： 獨(dú)立函數(shù)調(diào)用時(shí) this 使用默認(rèn)綁定規(guī)則，默認(rèn)綁定規(guī)則下 this 指向 window（全局對(duì)象）。

• 嚴(yán)格模式下： this 無法使用默認(rèn)綁定，this 會(huì)綁定到 undefined。

獨(dú)立函數(shù)調(diào)用

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

嚴(yán)格模式下：

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

注意下邊兩種情況

var age = "18";
var obj = {
 name: "heyushuo",
 age: 25,
 fn: function() {
 function sayName() {
  console.log(this); //window
  console.log(this.age); //undefined
 }
 sayName();
 }
};
obj.fn();

函數(shù) sayName 雖然是在 obj.fn 內(nèi)部定義的，但是它仍然是一個(gè)獨(dú)立函數(shù)調(diào)用，this 仍然指向 window。

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函數(shù)別名！
bar();

雖然 bar 是 obj.foo 的一個(gè)引用，但是實(shí)際上，它引用的是函數(shù)本身，因此此時(shí)的
bar() 其實(shí)是一個(gè)不帶任何修飾的獨(dú)立函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定。

1.2 隱式綁定

當(dāng)函數(shù)引用有上下文對(duì)象時(shí)(例如:obj.foo 這個(gè)時(shí)候使用 obj 上下文來引用函數(shù) foo)，隱式綁定規(guī)則會(huì)把函數(shù)中的 this 綁定到這個(gè)上下文對(duì)象。

var obj = {
 name: "heyushuo,
 foo: function() {
 console.log(this.name); //heyushuo
 }
};

obj.foo();

對(duì)象屬性引用鏈中只有上一層或者說最后一層在調(diào)用中起作用。

var obj = {
 name: "heyushuo",
 obj1: {
 name: "kebi",
 foo: function() {
  console.log(this.name); // kebi
 }
 }
};

obj.obj1.foo();

隱式丟失

被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象，而應(yīng)用默認(rèn)綁定，把 this 綁定到全局對(duì)象或者 undefined(嚴(yán)格模式) 上。

第一種

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函數(shù)別名！
bar();

雖然 bar 是 obj.foo 的一個(gè)引用，但是實(shí)際上，它引用的是函數(shù)本身，因此此時(shí)的bar() 其實(shí)是一個(gè)不帶任何修飾的獨(dú)立函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定。

第二種傳入回調(diào)函數(shù)時(shí)：

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函數(shù)別名！
function doFoo(fn) {
 fn(); // <-- 調(diào)用位置！
}
doFoo(bar); //global

//和下邊這種一樣
setTimeout(obj.foo, 300);

1.3 顯示綁定

通過 call() 或者 apply()方法。第一個(gè)參數(shù)是一個(gè)對(duì)象，在調(diào)用函數(shù)時(shí)將這個(gè)對(duì)象綁定到 this 上，稱之為顯示綁定。

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

顯示綁定引申出來一個(gè)硬綁定,代碼如下

function foo(something) { 
 console.log( this.a, something ); 
 return this.a + something;
}
// 簡(jiǎn)單的輔助綁定函數(shù)
function bind(fn, obj) { 
 return function() {
 return fn.apply( obj, arguments ); //內(nèi)部已經(jīng)強(qiáng)制綁定了傳入函數(shù)this的指向
 };
}
var obj = { 
 a:2
};
var bar = bind( foo, obj ); 
var b = bar( 3 ); // 2 3
console.log( b ); // 5

bar函數(shù)無論如何調(diào)用,它總會(huì)手動(dòng)在 obj 上調(diào)用 fn,強(qiáng)制把 fn 的 this 綁定到了 obj。這樣也解決前面提到的丟失綁定問題
由于硬綁定是一種非常常用的模式，所以在 ES5 中提供了內(nèi)置的方法 Function.prototype.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

1.4 new綁定

使用new來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。

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

• 這個(gè)新對(duì)象會(huì)被執(zhí)行 [[ 原型 ]] 連接。

• 這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的 this。

• 如果函數(shù)沒有返回其他對(duì)象，那么 new 表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。

例如:

function foo() { 
 this.name = "heyushuo";
 this.age = 25
} 
foo.prototype.sayName = function(){
 console.log(this.name+this.age);
}
var bar = new foo();

console.log(bar); //{name: "heyushuo", age: 25}
//這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的 this。所以此時(shí)的this就是bar對(duì)象
console.log( bar.age ); // 25

如下圖是 new foo() 這個(gè)對(duì)象

二、四種綁定關(guān)系的優(yōu)先級(jí)

判斷this,可以按照下面的順序來進(jìn)行判斷：

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

var bar = new foo()

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

var bar = foo.call(obj2)

3、函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用（隱式綁定）？如果是的話，this 綁定的是那個(gè)上下文對(duì)象。

var bar = obj1.foo()

4、如果都不是的話，使用默認(rèn)綁定。如果在嚴(yán)格模式下，就綁定到 undefined，否則綁定到全局對(duì)象。

var bar = foo()

以上是“JavaScript中this綁定規(guī)則的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：JavaScript中this綁定規(guī)則的示例分析-創(chuàng)新互聯(lián)
文章起源：http://bm7419.com/article18/didegp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站收錄、網(wǎng)站導(dǎo)航、商城網(wǎng)站、軟件開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)