this 的定義

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供臺山網(wǎng)站建設(shè)、臺山做網(wǎng)站、臺山網(wǎng)站設(shè)計、臺山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、臺山企業(yè)網(wǎng)站模板建站服務(wù)，十余年臺山做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

表示當(dāng)前執(zhí)行代碼的環(huán)境對象

 因此可將 this 的剖析分為“全局環(huán)境” 和 “函數(shù)環(huán)境” 兩種類型的環(huán)境對象

全局環(huán)境

console.log(this === window); // true
 
var a = 10;
console.log(this.a); // 10

函數(shù)環(huán)境

在函數(shù)內(nèi)部，this 的取值取決于函數(shù)被調(diào)用時的運(yùn)行環(huán)境。

這里涉及到內(nèi)存里的數(shù)據(jù)結(jié)構(gòu)相關(guān)的知識點(diǎn)，當(dāng)我們定義以下字面量對象時會發(fā)生一系列的關(guān)聯(lián)關(guān)系

var obj = { name: 'Tom' };

javascript 引擎會先在內(nèi)存中生成 { name: 'Tom' } 對象，接著再把這個對象的內(nèi)存地址賦值給 obj 變量，所以 obj 變量保存的只是一個內(nèi)存地址而已，如果要獲取 obj.name，javascript 引擎會先從 obj 變量中拿到內(nèi)存地址，然后從該地址中獲取原始對象，再返回 name 屬性。

而屬性值為函數(shù)時，該函數(shù)會被保存在內(nèi)存中，然后將該內(nèi)存地址賦值給該屬性，因此該地址賦值給不同環(huán)境執(zhí)行時它的作用域是不一樣的，而 this 對象就是指向函數(shù)當(dāng)前的執(zhí)行環(huán)境對象，執(zhí)行環(huán)境是會在 Event Loop（事件循環(huán)）過程中變化的，因此 this 在函數(shù)環(huán)境下是屬于運(yùn)行時的。

var name = 'Tom';
 
var obj = {
  name: 'Iceberg',
  say: function() {
    console.log('my name is ' + this.name);
  },
  sub: {
    say: function() {
      console.log('my name is ' + this.name);
    }
  }
};
 
obj.say(); // my name is Iceberg
obj.sub.say() // my name is undefined;
 
var say = obj.say;
say(); // my name is Tom;

上面的例子說明 obj.say() 執(zhí)行環(huán)境為 obj 對象，而 obj.sub.say() 的執(zhí)行環(huán)境卻是 obj.sub 對象，而對于 obj.sub 來說并沒有 name 屬性，因此為 undefined；而 var say = obj.say; 則表示將 say 方法的內(nèi)存地址賦值給全局變量，因此從全局變量 name 中取值。

運(yùn)用場景

接下來從 this 在函數(shù)環(huán)境下的不同運(yùn)用場景來剖析

事件回調(diào)函數(shù)

var handler = {
	nickname: 'anonymous',
	register: function() {
	  console.log(this.nickname);
	}	
}
 
$('#registerBtn').on('click', handler.register); // undefined

以上邏輯點(diǎn)擊觸發(fā)后輸出的是 undefined，因為函數(shù)被當(dāng)做事件觸發(fā)的回調(diào)函數(shù)執(zhí)行時，this 是指向該觸發(fā)事件對應(yīng)的元素，如要 this 仍然以 handler 對象為執(zhí)行環(huán)境，則可使用函數(shù)的 bind 方法進(jìn)行執(zhí)行環(huán)境對象的綁定操作。

$('#registerBtn').on('click', handler.register.bind(handler)); // anonymous

在 react 中經(jīng)常需要在回調(diào)函數(shù)中調(diào)用 this.state、this.props，按照上面的分析，將當(dāng)前環(huán)境對象 bind 到回調(diào)函數(shù)中即可。

如果是使用的箭頭函數(shù)定義回調(diào)函數(shù)即可無需 bind，因為箭頭函數(shù)中 this 就是對應(yīng)定義時所在的對象。
 構(gòu)造函數(shù)

要理解 this 在構(gòu)造函數(shù)中的邏輯就要理清楚構(gòu)造函數(shù)在實例化過程中都發(fā)生了什么。

function A() {
  this.name = 'Tom';
  this.age = 20;
}
var a = new A();

使用 new 命令實例化構(gòu)造函數(shù) A 的過程中會發(fā)生以下流程

1. 創(chuàng)建一個空對象，作為將要返回的對象實例
2. 將該空對象的原型指向構(gòu)造函數(shù)的 prototype 屬性
3. 將該空對象賦值給構(gòu)造函數(shù)內(nèi)部的 this 關(guān)鍵字
4. 執(zhí)行構(gòu)造函數(shù)內(nèi)部代碼
5. 默認(rèn)返回 this 對象（如 return 的為非對象類型，如數(shù)字 123，會被忽略進(jìn)而默認(rèn) return this 對象）
6. 由以上邏輯可知道 this 關(guān)鍵字在構(gòu)造函數(shù)中表示的是其實例對象。

bind

bind 方法將函數(shù)體中的 this 指向新對象并返回一個新函數(shù)

function A() {
  this.nickname = 'Tom';
  this.say = function() {
    console.log(this.nickname);
  }
}
var b = { nickname: 'John' };
var a = new A();
var say = a.say;
var say1 = a.say.bind(a);
var say2 = a.say.bind(b);
say(); // undefined
say1(); // Tom
say2(); // John

call & apply

call 方法是指 Function.prototype.call，因此每個函數(shù)都會具備 call 方法，fun.call(thisArg, arg1, arg2, ...)，call 方法接收的第一個參數(shù)會替換原有的 this 指向的執(zhí)行環(huán)境對象。

function A() {
  this.name = 'Tom';
  this.sayName = function(){
    console.log(this.name);
  };
}
 
function B() {
  this.name = 'John';
}
 
var a = new A();
a.sayName.call(new B()); // John

而 apply 方法與 call 的區(qū)別僅在于 call 接收參數(shù)列表而 apply 接收數(shù)組參數(shù)或者類數(shù)組對象（如函數(shù)的 arguments 對象）。

總結(jié)

由于 javascript 的 Event Loop 原理，決定了執(zhí)行上下文會不斷變化，因此 this 對象誕生于表達(dá)當(dāng)前的執(zhí)行環(huán)境對象。

以上所述是小編給大家介紹的javascript的this關(guān)鍵字的用法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！