【Web前端培訓基礎知識】ES5及ES6this詳解

　　今天，我們學習一下JavaScript中的this。我們從什麼是this,ES5及ES6中this的幾種情況進行學習。讓this變的so easy，我們這裡說的都是非嚴格模式下。

　　什麼是this

　　this表示當前行為執行的主體，在javaScript中this不是函式獨有的，但是我們主要研究的是函式中的this,為了方便大家理解我們舉個例子。

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

　　在哪裡吃：肯德基

　　誰吃：小明

　　在這裡肯德基是吃的環境，小明是當前吃這個行為的主體。

　　//全域性作用域下

　　Var myBody = document.body;

　　//window是可以省略的 當前body元素的寬度都會被輸出

　　console.log(window.getComputedStyle(myBody).width;);//726px

　　console.log(getComputedStyle(myBody).width;);//726px

　　//我們在這裡輸出this ->window

　　console.log(this);//window

　　ES5中this的幾種情況

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

　　前邊的我們說過this代表當前行為執行的主體,在全域性作用域下所有的屬性和方法都是window的屬性和方法，並且window是可以省略的。那麼也就是說我們去呼叫一個方法在全域性作用域下，誰呼叫的也就是window呼叫，那麼window就是當前行為執行的主體,和去肯德基吃漢堡是一樣的誰吃小明，那麼小明就是當前行為執行的主體。

　　2.自執行函式中的this是window

　　在javaScript中我們主要研究的是函式中的this,自執行函式中的this永遠是window，因為函式就是一個方法，一種行為，這個行為是直接執行的，那麼執行的主體就是window。

　　//這裡我們寫兩個自執行函式

　　~function(){

　　console.log(this); //->window

　　}();

　　(function (){

　　console.log(this);//->window

　　})();

　　3.當前函式執行就看前面有沒有點(.),點前面是誰this就是誰，和當前函式在哪裡定義的及在哪裡執行的沒有關係,沒有點就是window.

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

　　//定義一個函式

　　function hello(){

　　console.log(this);

　　}

　　hello();//this->window

　　//定義一個物件設定屬性為hello值是對應的那個函式

　　Var obj = {hello:hello};

　　//我們再去呼叫的時候 發現是obj這個物件呼叫的這個函式 那麼obj就是當前行為執行的主體 和這個函式在哪裡定義是沒有關係的。

　　Obj.hello(); //this->obj

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

　　首先call,apply,bind這三個方法都是用來改變this的指向，其實本質就是改變當前行為執行的主體。由於這個三個方法第一個引數傳遞都是當前行為執行的主體。所以就看第一個引數即可。

　　//定義一個函式

　　function world(){

　　console.log(this);

　　}

　　//定義一個物件

　　Var obj = {name:”哈哈”};

　　//將obj變為這個方法行為執行的主體

　　World.call(obj);//this->obj

　　//apply和bind同理只是傳遞引數和使用方式略有不同

　　ES6中this的幾種情況

　　1.箭頭函式是沒有自己this的，this是繼承它的宿主環境(上級作用域) 宿主環境不是執行的環境，而是定義的環境。

　　let fn = () => {

　　console.log(this);

　　}

　　fn();//this->window

　　let obj = {

　　name: "obj",

　　sum: function () {

　　fn(); //在widnow下定義的，所以它的宿主環境是widnow而不是sum

　　}

　　};

　　2. ES6類構造器中的this是當前這個例項，而原型上的函式中的this指向呼叫者。

　　//類中的this

　　class Btn {

　　constructor(tagName) {

　　this.btn = document.querySelector(id);

　　thisthis.btn.>

　　console.log(this); //this->這個類的例項

　　}

　　click() {

　　// 方法裡的this指向呼叫者

　　console.log(this); //this->btn這個元素

　　}

　　}

　　var btn = new Btn('input');