JS 中 this 關鍵字詳解

zoomdong 發布于2019-08-21 10:36 / 2584人閱讀

摘要：首先，必須搞清楚在里面，函數的幾種調用方式普通函數調用作為方法來調用作為構造函數來調用使用方法來調用方法箭頭函數但是不管函數是按哪種方法來調用的，請記住一點誰調用這個函數或方法關鍵字就指向誰。

本文主要解釋在JS里面this關鍵字的指向問題(在瀏覽器環境下)。

首先，必須搞清楚在JS里面，函數的幾種調用方式:

普通函數調用

作為方法來調用

作為構造函數來調用

使用apply/call方法來調用

Function.prototype.bind方法

es6箭頭函數

但是不管函數是按哪種方法來調用的，請記住一點：誰調用這個函數或方法,this關鍵字就指向誰。

接下來就分情況來討論下這些不同的情況：

普通函數調用

    function person(){
        this.name="xl";
        console.log(this);
        console.log(this.name);
    }
    
    person();  //輸出  window  xl

在這段代碼中person函數作為普通函數調用，實際上person是作為全局對象window的一個方法來進行調用的,即window.person();
所以這個地方是window對象調用了person方法,那么person函數當中的this即指window,同時window還擁有了另外一個屬性name,值為xl.

    var name="xl";
    function person(){
        console.log(this.name);
    }
    person(); //輸出 xl

同樣這個地方person作為window的方法來調用，在代碼的一開始定義了一個全局變量name，值為xl,它相當于window的一個屬性,即window.name="xl",又因為在調用person的時候this是指向window的，因此這里會輸出xl.

作為方法來調用

在上面的代碼中，普通函數的調用即是作為window對象的方法進行調用。顯然this關鍵字指向了window對象.

再來看下其他的形式

    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    person.showName();  //輸出  xl
    //這里是person對象調用showName方法，很顯然this關鍵字是指向person對象的，所以會輸出name
    
    var showNameA=person.showName;
    showNameA();    //輸出  XL
    //這里將person.showName方法賦給showNameA變量，此時showNameA變量相當于window對象的一個屬性，因此showNameA()執行的時候相當于window.showNameA(),即window對象調用showNameA這個方法，所以this關鍵字指向window

再換種形式：

    var personA={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    var personB={
        name:"XL",
        sayName:personA.showName
    }
    
    personB.sayName();  //輸出 XL
    //雖然showName方法是在personA這個對象中定義，但是調用的時候卻是在personB這個對象中調用，因此this對象指向

作為構造函數來調用

    function  Person(name){
        this.name=name;
    }
    var personA=Person("xl");
    console.log(personA.name); // 輸出  undefined
    console.log(window.name);//輸出  xl
    //上面代碼沒有進行new操作，相當于window對象調用Person("xl")方法，那么this指向window對象，并進行賦值操作window.name="xl".
    
    var personB=new Person("xl");
    console.log(personB.name);// 輸出 xl
    //這部分代碼的解釋見下

new操作符

    //下面這段代碼模擬了new操作符(實例化對象)的內部過程
    function person(name){
        var o={};
        o.__proto__=Person.prototype;  //原型繼承
        Person.call(o,name);
        return o;
    }
    var personB=person("xl");
    
    console.log(personB.name);  // 輸出  xl

在person里面首先創建一個空對象o，將o的proto指向Person.prototype完成對原型的屬性和方法的繼承

Person.call(o,name)這里即函數Person作為apply/call調用(具體內容下方)，將Person對象里的this改為o，即完成了o.name=name操作

返回對象o。

因此`person("xl")`返回了一個繼承了`Person.prototype`對象上的屬性和方法，以及擁有`name`屬性為"xl"的對象，并將它賦給變量`personB`.
所以`console.log(personB.name)`會輸出"xl"

call/apply方法的調用

在JS里函數也是對象，因此函數也有方法。從Function.prototype上繼承到Function.prototype.call/Function.prototype.apply方法
call/apply方法最大的作用就是能改變this關鍵字的指向.

Obj.method.apply(AnotherObj,arguments);

    var name="XL";
    var Person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    Person.showName.call(); //輸出 "XL"
    //這里call方法里面的第一個參數為空，默認指向window。
    //雖然showName方法定義在Person對象里面，但是使用call方法后，將showName方法里面的this指向了window。因此最后會輸出"XL";

    funtion FruitA(n1,n2){
        this.n1=n1;
        this.n2=n2;
        this.change=function(x,y){
            this.n1=x;
            this.n2=y;
        }
    }
    
    var fruitA=new FruitA("cheery","banana");
    var FruitB={
        n1:"apple",
        n2:"orange"
    };
    fruitA.change.call(FruitB,"pear","peach");
    
    console.log(FruitB.n1); //輸出 pear
    console.log(FruitB.n2);// 輸出 peach

FruitB調用fruitA的change方法，將fruitA中的this綁定到對象FruitB上。

Function.prototype.bind()方法

    var name="XL";
    function Person(name){
        this.name=name;
        this.sayName=function(){
            setTimeout(function(){
                console.log("my name is "+this.name);
            },50)
        }
    }
    var person=new Person("xl");
    person.sayName()  //輸出  “my name is XL”;
                       //這里的setTimeout()定時函數,相當于window.setTimeout(),由window這個全局對象對調用,因此this的指向為window, 則this.name則為XL

那么如何才能輸出"my name is xl"呢？

    var name="XL";
    function Person(name){
        this.name=name;
        this.sayName=function(){
            setTimeout(function(){
                console.log("my name is "+this.name);
            }.bind(this),50)  //注意這個地方使用的bind()方法，綁定setTimeout里面的匿名函數的this一直指向Person對象
        }
    }
    var person=new Person("xl");
    person.sayName(); //輸出 “my name is xl”;

這里setTimeout(function(){console.log(this.name)}.bind(this),50);,匿名函數使用bind(this)方法后創建了新的函數，這個新的函數不管在什么地方執行，this都指向的Person,而非window,因此最后的輸出為"my name is xl"而不是"my name is XL"

另外幾個需要注意的地方：
setTimeout/setInterval/匿名函數執行的時候，this默認指向window對象，除非手動改變this的指向。在《javascript高級程序設計》當中，寫到：“超時調用的代碼(setTimeout)都是在全局作用域中執行的，因此函數中的this的值，在非嚴格模式下是指向window對象，在嚴格模式下是指向undefined”。本文都是在非嚴格模式下的情況。

    var name="XL";
    function Person(){
        this.name="xl";
        this.showName=function(){
            console.log(this.name);
        }
        setTimeout(this.showName,50);
    }
    var person=new Person(); //輸出 "XL"
    
    //在setTimeout(this.showName,50)語句中，會延時執行this.showName方法
    //this.showName方法即構造函數Person()里面定義的方法。50ms后，執行this.showName方法，this.showName里面的this此時便指向了window對象。則會輸出"XL";

修改上面的代碼：

    var name="XL";
    function Person(){
        this.name="xl";
        var that=this;
        this.showName=function(){
            console.log(that.name);
        }
        setTimeout(this.showName,50)
    }
    var person=new Person(); //輸出 "xl"
    //這里在Person函數當中將this賦值給that，即讓that保存Person對象，因此在setTimeout(this.showName,50)執行過程當中，console.log(that.name)即會輸出Person對象的屬性"xl"

匿名函數：

    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
        sayName:function(){
            (function(callback){
                callback();
            })(this.showName)
        }
    }
    person.sayName();  //輸出 XL

    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
        sayName:function(){
            var that=this;
            (function(callback){
                callback();
            })(that.showName)
        }
    }
    person.sayName() ;  //輸出  "xl"
    //匿名函數的執行同樣在默認情況下this是指向window的，除非手動改變this的綁定對象

Eval函數

該函數執行的時候，this綁定到當前作用域的對象上

    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            eval("console.log(this.name)");
        }
    }
    
    person.showName();  //輸出  "xl"
    
    var a=person.showName;
    a();  //輸出  "XL"

箭頭函數

es6里面this指向固定化，始終指向外部對象，因為箭頭函數沒有this,因此它自身不能進行new實例化,同時也不能使用call, apply, bind等方法來改變this的指向

   function Timer() {
        this.seconds = 0;
        setInterval( () => this.seconds ++, 1000);
    } 
    
    var timer = new Timer();
    
    setTimeout( () => console.log(timer.seconds), 3100);
    
    // 3
    
    在構造函數內部的setInterval()內的回調函數，this始終指向實例化的對象，并獲取實例化對象的seconds的屬性,每1s這個屬性的值都會增加1。否則最后在3s后執行setTimeOut()函數執行后輸出的是0

參考資料

javascript中this詳解

深入淺出javascript中的this

setTimeout中this的指向問題

云服務器 GPU云服務器 javascript中this詳解 js 中關鍵字 jsp關鍵字this js搜索系統中關鍵字

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85844.html

詳解js和jquery里的this關鍵字

摘要：出于這個原因，該函數返回的，所以在這里指的是，所以返回的是第一個說明關鍵字通常在對象的構造函數中使用，用來引用對象。重寫無法重寫，因為它是一個關鍵字。結論，表示當前的上下文對象是一個對象，可以調用對象所擁有的屬性，方法。在《javaScript語言精粹》這本書中，把 this 出現的場景分為四類，簡單的說就是：有對象就指向調用對象沒調用對象就指向全局對象用new構造就指向新對...

LoftySoul 2019-08-21 12:28 評論0 收藏0
javascript中new關鍵字詳解

摘要：本文給大家詳細介紹了下中關鍵字的使用方法，以及使用關鍵字的區別，有需要的小伙伴可以參考下。第行通過關鍵字創建了一個新對象行對象嘗試訪問和屬性，并調用方法。一般情況下，函數對象在產生時會內置屬性并將函數名作為賦值僅函數對象。本文給大家詳細介紹了下javascript中new關鍵字的使用方法，以及javascript 使用new關鍵字的區別，有需要的小伙伴可以參考下。 function ...

alaege 2019-08-21 16:45 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
JavaScript 中 this 的詳解

摘要：作為構造函數調用中沒有類，但是可以從構造器中創建對象，并提供了運算符來進行調用該構造器。構造器的外表跟普通函數一樣，大部分的函數都可以當做構造器使用。如果構造函數顯式的返回一個對象，那么則會指向該對象。 this 的指向 this 是 js 中定義的關鍵字，它自動定義于每一個函數域內，但是它的指向卻讓人很迷惑。在實際應用中，this 的指向大致可以分為以下四種情況。 1.作為普通函數調...

cyrils 2019-08-21 15:27 評論0 收藏0
JS的閉包與this詳解

摘要：刪除對匿名函數的引用，以便釋放內存在匿名函數從中被返回后，它的作用域鏈被初始化為包含函數的活動對象和全局變量對象。閉包與變量我們要注意到，閉包只能取到任意變量的最后值，也就是我們保存的是活動對象，而不是確定值。工作中會遇到很多 this對象指向不明的問題，你可能不止一次用過 _self = this 的寫法來傳遞this對象，它每每會讓我們覺得困惑和抓狂，我們很可能會好奇其中到底發...

fireflow 2019-08-21 16:58 評論0 收藏0