【W(wǎng)eb前端基礎(chǔ)知識】this詳解

今天，我們學(xué)習(xí)一下JavaScript中的this。我們從什么是this,ES5及ES6中this的幾種情況進行學(xué)習(xí)。讓this變的so easy，我們這里說的都是非嚴(yán)格模式下。

什么是this

this表示當(dāng)前行為執(zhí)行的主體，在javaScript中this不是函數(shù)獨有的，但是我們主要研究的是函數(shù)中的this,為了方便大家理解我們舉個例子。

小明今天項目成功上線了，提前下班，不用加班了，獎勵自己去肯德基吃一個漢堡，對于這句話我們簡單的分析下：

在哪里吃：肯德基

誰吃：小明

在這里肯德基是吃的環(huán)境，小明是當(dāng)前吃這個行為的主體。

ES5中this的幾種情況

1.全局作用域下的this是window

前邊的我們說過this代表當(dāng)前行為執(zhí)行的主體,在全局作用域下所有的屬性和方法都是window的屬性和方法，并且window是可以省略的。那么也就是說我們?nèi)フ{(diào)用一個方法在全局作用域下，誰調(diào)用的也就是window調(diào)用，那么window就是當(dāng)前行為執(zhí)行的主體,和去肯德基吃漢堡是一樣的誰吃小明，那么小明就是當(dāng)前行為執(zhí)行的主體。

1. //全局作用域下 
2. Var myBody = document.body; 
3. //window是可以省略的  當(dāng)前body元素的寬度都會被輸出 
4. console.log(window.getComputedStyle(myBody).width;);//726px 
5. console.log(getComputedStyle(myBody).width;);//726px 
6. //我們在這里輸出this  ->window 
7. console.log(this);//window   

2.自執(zhí)行函數(shù)中的this是window

在javaScript中我們主要研究的是函數(shù)中的this,自執(zhí)行函數(shù)中的this永遠是window，因為函數(shù)就是一個方法，一種行為，這個行為是直接執(zhí)行的，那么執(zhí)行的主體就是window。

1. //這里我們寫兩個自執(zhí)行函數(shù) 
2. ~function(){ 
3. console.log(this);  //->window 
4. }(); 
5.  
6. (function (){ 
7. console.log(this);//->window 
8. })(); 

3.當(dāng)前函數(shù)執(zhí)行就看前面有沒有點(.),點前面是誰this就是誰，和當(dāng)前函數(shù)在哪里定義的及在哪里執(zhí)行的沒有關(guān)系,沒有點就是window.

還是一樣的道理，.前面就表示當(dāng)前行為執(zhí)行的主體。如果沒有依然當(dāng)前行為執(zhí)行的主體是window.

1. //定義一個函數(shù) 
2. function hello(){ 
3. console.log(this); 
4. } 
5. hello();//this->window 
6. //定義一個對象設(shè)置屬性為hello值是對應(yīng)的那個函數(shù) 
7. Var obj = {hello:hello}; 
8. //我們再去調(diào)用的時候  發(fā)現(xiàn)是obj這個對象調(diào)用的這個函數(shù)  那么obj就是當(dāng)前行為執(zhí)行的主體  和這個函數(shù)在哪里定義是沒有關(guān)系的。 
9. Obj.hello(); //this->obj 

4.call,apply,bind改變this指向問題就看方法中的第一個參數(shù)是誰this就是誰。

首先call,apply,bind這三個方法都是用來改變this的指向，其實本質(zhì)就是改變當(dāng)前行為執(zhí)行的主體。由于這個三個方法第一個參數(shù)傳遞都是當(dāng)前行為執(zhí)行的主體。所以就看第一個參數(shù)即可。

1. //定義一個函數(shù) 
2. function world(){ 
3.    console.log(this); 
4. } 
5. //定義一個對象 
6. Var obj = {name:”哈哈”}; 
7. //將obj變?yōu)檫@個方法行為執(zhí)行的主體 
8. World.call(obj);//this->obj 
9. //apply和bind同理只是傳遞參數(shù)和使用方式略有不同 

ES6中this的幾種情況

1.箭頭函數(shù)是沒有自己this的，this是繼承它的宿主環(huán)境(上級作用域) 宿主環(huán)境不是執(zhí)行的環(huán)境，而是定義的環(huán)境。

1. let fn = () => { 
2.     console.log(this); 
3. } 
4.  
5. fn();//this->window 
6.  let obj = { 
7.   name: "obj", 
8.   sum: function () { 
9.    fn(); //在widnow下定義的，所以它的宿主環(huán)境是widnow而不是sum 
10.    } 
11.  }; 

2. ES6類構(gòu)造器中的this是當(dāng)前這個實例，而原型上的函數(shù)中的this指向調(diào)用者。

1. //類中的this 
2.         class Btn { 
3.             constructor(tagName) { 
4.                 this.btn = document.querySelector(id); 
5.                 thisthis.btn.onclick = this.click; 
6.                 console.log(this); //this->這個類的實例 
7.             } 
8.             click() { 
9.                 // 方法里的this指向調(diào)用者 
10.                 console.log(this); //this->btn這個元素 
11.             } 
12.         } 
13.         var btn = new Btn('input'); 
14.