javascript 下的 this

Lycheeee 發布于2019-08-20 10:42 / 2958人閱讀

摘要：對還有開玩笑不多說，這章來討論一下下的。此前先仔細體會這句話永遠指向的是最后調用它的對象。其中調用的對象是誰，所以返回的就是。當遇到和例子當執行的就指向，所以拿到的也是下的和和能改變的指針

javascript 下的 this，讓你猜不透，摸不著，但語法終究有語法的規范，沒有莫名的奇妙，只有欠合理的解釋。對還有 bug ... 開玩笑 ^-^///

不多說，這章來討論一下 javascript 下的 this 。
此前先仔細體會這句話：this永遠指向的是最后調用它的對象。

由于其運行期綁定的特性，this的指向在函數定義的時候是確定不了的，只有函數執行的時候才能確定this到底指向誰。

window 下的 this：

看幾個例子來解釋我上面強調的那句話：

function a(){
    var num= 233;
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

運行結果是 this指向的是 window ，所以 this.user 是 undefined，
a() 是一個函數也可以說是方法，那方法肯定是由對象來調用的。
所以當執行 a(); 時就有一個隱式對象調用了a() ，這個隱式對象就是 window

再來個例子：

var obj = {
    num: 233,
    getThis:function () {
        return this;
    }
}

console.log(obj.getThis() ); //{ num: 233, getThis: [Function] }

var fun = obj.getThis;
console.log(fun() ); // window

上面是一個對象里面有方法屬性；
可以看出 obj.getThis() ;調用方法會打印出當前對象(打印日志里面有屬性和方法)；
可能大家回想，這不是常理之中嗎，但下面這代碼我只是做了一些賦值結果怎么就不一樣了呢？

var fun = obj.getThis;
console.log(fun() ); // window

因為執行fun() 是一個方法，需要對象才能調用方法，而上面執行 fun()的對象是誰，就是隱式的 window (這句話好像上面第一段代碼說過 -_-///)，

好了，如果還感覺有點繞就來說明一下：

this永遠指向的是最后調用它的對象。

obj.getThis() 其中調用 getThis() 的對象是誰？ obj，所以返回的this就是 obj。
那 console.log( fun() ); 其中調用 fun() 的對象是誰，沒誰調用啊？沒誰那就是隱式的 window 啦，所以返回的是 window ,看哪個最后調用它，那么this就指向那個。

上面清楚了來分析下面這段代碼應該就容易了：

num_1 = 233;
var obj = {
    num_2: 1111,
    getNum:function () {
        this.num_1 = 666;
        this.fun = function () {
            return this.num_1;
        }
    }
}
obj.getNum();
console.log(obj.fun() ); // 666
var fun = obj.fun;
console.log( fun() ); // 233

先執行了 obj.getNum(); 對 getNum() 里面的屬性和方法進行賦值；
接著執行 obj.fun()，因為里面的 this 指向調用它的 obj，所以得到num_1 = 666;
再接著執行 fun() ，因為調用這方法的是隱式 window ，所以 this.num_1; 就會找到在window聲明的遍歷 num_1 = 233;

當遇到包含對象的問題：

var obj = {
    a:233,
    obj_2:{
        a:666,
        fn:function(){
            console.log(this.a); // 666 
        }
    } 
}
obj.obj_2.fn();

也很好解釋，找到調用 fn() 函數的對象是 obj_2, 所以 this 指向 obj_2。

當 this 碰到 return 時：
例子1：

function fun()
{
    this.num= 233;
    return {};
}
var a = new fun();
console.log(a.num); //undefined

例子2：

function fun()
{
    this.num= 233;
    return 11;
}
var a = new fun();
console.log(a.num); //233

總結一句話： 如果返回值是一個對象，那么this指向的就是那個返回的對象，如果返回值不是一個對象那么this還是指向函數的實例。

當 this 遇到 apply() 和 call()
例子1 ：

function AddNum(a,b){
    this.a = a;
    this.b = b;
    this.fun = function ( ) {
        return this.a + this.b;
    }
}

var obj = new  AddNum(1,2);
console.log(  obj.fun() );  // 3
var obj_2 = {a:2,b:4};
console.log(  obj.fun.call(obj_2) ); // 6

當執行 obj.fun.call(obj_2); fun() 的this 就指向 obj_2，所以this.a + this.b;拿到的也是 obj_2 下的 a 和 b ；

apply() 和 call() 能改變 this 的指針

云服務器 GPU云服務器 javascript的this javaScript中的this javascript中this詳解 this[]

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

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

關于JavaScript中this的理解

摘要：想想也是難以置信，這應該全歸功于對框架的依賴，促使助長了自己對學習的懈怠。真正的成了離職就失業的尷尬境地。我們接下來來了解下中的的使用和作用。以前對中的理解很簡單粗暴誰調用就指向誰。如果例題中有不對的地方希望予以指教留言評論前言使用JavaScript有很長一段時間了，但是以前過多都是使用，從不去及理解其中原理，單單只是去生拼硬湊。這樣的開發居然做了2年。匪夷所思居然項目中Java...

lindroid 2019-08-26 10:48 評論0 收藏0
JavaScript深入之變量對象

摘要：深入系列第四篇，具體講解執行上下文中的變量對象與活動對象。下一篇文章深入之作用域鏈本文相關鏈接深入之執行上下文棧深入系列深入系列目錄地址。 JavaScript深入系列第四篇，具體講解執行上下文中的變量對象與活動對象。全局上下文下的變量對象是什么？函數上下文下的活動對象是如何分析和執行的？還有兩個思考題幫你加深印象，快來看看吧！前言在上篇《JavaScript深入之執行上下文棧》中...

Zachary 2019-08-21 15:34 評論0 收藏0
JavaScript 實現 iOS 下的計算器

摘要：最后一次更新于效果演示圖計算器該項目可在瀏覽器頁面上實現計算器。需要實現的功能是每當用戶點擊按鈕，文本框要實時顯示被更新的表達式。如果當前表達式無法被計算，被異常處理捕獲并在文本框顯示。最后一次更新于2019/07/08 效果演示圖 showImg(https://segmentfault.com/img/bVbuLX9?w=691&h=1073); iOS 計算器該項目可在瀏覽器...

shengguo 2019-08-02 15:28 評論0 收藏0
JavaScript 實現 iOS 下的計算器

摘要：最后一次更新于效果演示圖計算器該項目可在瀏覽器頁面上實現計算器。需要實現的功能是每當用戶點擊按鈕，文本框要實時顯示被更新的表達式。如果當前表達式無法被計算，被異常處理捕獲并在文本框顯示。最后一次更新于2019/07/08 效果演示圖 showImg(https://segmentfault.com/img/bVbuLX9?w=691&h=1073); iOS 計算器該項目可在瀏覽器...

elisa.yang 2019-08-23 18:32 評論0 收藏0
JavaScript 實現 iOS 下的計算器

摘要：最后一次更新于效果演示圖計算器該項目可在瀏覽器頁面上實現計算器。需要實現的功能是每當用戶點擊按鈕，文本框要實時顯示被更新的表達式。如果當前表達式無法被計算，被異常處理捕獲并在文本框顯示。最后一次更新于2019/07/08 效果演示圖 showImg(https://segmentfault.com/img/bVbuLX9?w=691&h=1073); iOS 計算器該項目可在瀏覽器...

Forest10 2019-08-30 11:19 評論0 收藏0