理解學習this指向問題

dendoink 發布于2019-08-26 11:56 / 3474人閱讀

摘要：否則報錯在嚴格模式下，對象的函數中的指向調用函數的對象實例同樣道理，可以推斷出，在嚴格模式下，構造函數中的指向構造函數創建的對象實例。

要點

this的指向在函數定義的時候是確定不了的，只有函數執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調用它的對象。

this指向的三種情況

情況1：如果一個函數中有this，但是它沒有被上一級的對象所調用，那么this指向的就是window，這里需要說明的是在js的嚴格版中this指向的不是window，而是指向調用函數的對象實例，這種函數中的this等于undefined。

function a(){
        var user = "維他奶";
        console.log(this);//window
        console.log(this.user);//undefined
    }
    //windonw是全局對象,所有的全局變量都是對象的屬性.
    //a()<=>window.a()
    a();
    console.log(window);
    console.log(window.user);//根本沒有user這個屬性。只有一個name="";

運行結果

嚴格模式,請參照https://segmentfault.com/a/11...
嚴格模式下定義變量必須使用var。否則報錯.
在嚴格模式下，對象的函數中的this指向調用函數的對象實例
同樣道理，可以推斷出，在嚴格模式下，構造函數中的this指向構造函數創建的對象實例。

"use strict";//開啟嚴格模式
    function a(){
        var user = "維他奶";
        //在嚴格模式下，對象的函數中的this指向調用函數的對象實例
        console.log(this);//a{}
        console.log(this.user);//undefined
    }
    var A = new a();

運行結果

情況2：如果一個函數中有this，這個函數有被上一級的對象所調用，那么this指向的就是上一級的對象。

var sum = {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a);//12
            }
        }
    }
    sum.b.fn();

運行結果

情況3：如果一個函數中有this，盡管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象.

var sum = {
        a:10,
        b:{
            // a:12,
            fn:function(){
                console.log(this.a);//undefined
            }
        }
    }
    sum.b.fn();

運行結果

注意事項
盡管對象b中沒有屬性a，這個this指向的也是對象b，因為this只會指向它的上一級對象，不管這個對象中有沒有this要的東西。

情況4：this永遠指向的是最后調用它的對象，也就是看它執行的時候是誰調用的，情況4中雖然函數fn是被對象b所引用，但是在將fn賦值給變量num的時候并沒有執行所以最終指向的是window，這和情況3是不一樣的，情況3是直接執行了fn。

var sum = {
        a1:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a1);//undefined
                console.log(this);//window
            }
        }
    }
    var num = sum.b.fn;
    num();

運行結果

構造函數的this指向：

function A(){
        this.name = "維他奶";
    }
    var a = new A();
    console.log(a.name);//維他奶

運行結果

new關鍵字到底做了什么？
(1) 創建一個新對象;
(2) 將構造函數的作用域賦給新對象(因此 this 就指向了這個新對象);原理：自動調用apply方法，將this指向這個空對象，這樣的話函數內部的this就會被這個空的對象替代。
(3) 執行構造函數中的代碼(為這個新對象添加屬性);
(4) 返回新對象。

return 會把new創建的this覆蓋.
如果返回值是復雜數據類型，那么this指向的就是那個返回的對象，如果返回值不是復雜數據類型那么this還是指向函數的實例。

    function A(){
        this.name = "維他奶";
        return 1;
    }
    var a = new A();
    console.log(a.name);//維他奶

    function A(){
        this.name = "維他奶";
        return ;
    }
    var a = new A();
    console.log(a.name);//維他奶

    function A(){
        this.name = "維他奶";
        return function(){};
    }
    var a = new A();
    //傳入空函數，所以輸出一個空，而不是undefined
    console.log(a.name);//""

    function A(){
        this.name = "維他奶";
        return null;
    }
    var a = new A();
    console.log(a.name);//維他奶

簡單數據類型：string,boolean,number,undefined,null,NaN
復雜數據類型: Object,Function,Array,String,Boolean,Number
其中String,Boolean,Number，是自帶的封裝好的方法。
簡單數據類型存放在內存的棧中，而復雜數據類型存放在內存的堆中，把地址存放在內存的棧中，先獲取地址，再讀取堆中數據。

GPU云服務器云服務器改變this指向 this的指向深度學習理解如何理解深度學習

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

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

javascript this的學習總結

摘要：例如通過，調用時強制把它的綁定到上。箭頭函數問題箭頭函數體內的對象就是定義時所在的對象，而不是使用時所在的對象，固定不變。剛入門javascript，關于this的學習，花了自己挺多的時間，做了比較多的功課，看了一篇又一篇的文章，也看了一些書籍，今天就結合看的那些東西總結下自己所學到的東西，方便留著以后回看，進一步的學習，這篇文章會不斷的更新，不斷的更新自己的想法，現在還是一個入門不...

A Loity 2019-08-21 17:32 評論0 收藏0
學習JavaScript之this,call,apply

摘要：在全局對象中調用，自然讀取的是全局對象的值構造器調用說明作為構造器調用時，指向返回的這個對象。最直觀的表現就是，去看一些優秀框架的源代碼時，不再是被繞的暈乎乎的。學習起因：在之前的JavaScript學習中，this,call,apply總是讓我感到迷惑，但是他們的運用又非常的廣泛。遂專門花了一天，來弄懂JavaScript的this,call,apply。中途參考的書籍也很多，以...

wenhai.he 2019-08-19 17:30 評論0 收藏0
我對JavaScript中this的一些理解

摘要：匿名函數的執行環境具有全局性，因此它的對象通常指向。如果對此有疑惑，可以看知乎上的答案知乎匿名函數的指向為什么是作為對象方法的調用，指向該對象當函數作為某個對象的方法調用時，就指這個函數所在的對象。因為日常工作中經常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。這段時間翻閱了一些書籍也查閱了網上一些資料然后結合自己的經驗，為了能讓自...

focusj 2019-08-23 15:23 評論0 收藏0
JS 中的this指向

摘要：當碰到時呵呵再看一個呵呵再來呵呵呵呵呵呵呵呵什么意思呢如果返回值是一個對象，那么指向的是構造函數的實例但是并沒有被返回，如果返回值不是一個對象那么還是指向構造函數創建的實例。為什么要學習this？如果你學過面向對象編程，那你肯定知道干什么用的，如果你沒有學過，那么暫時可以不用看這篇文章，當然如果你有興趣也可以看看，畢竟這是js中必須要掌握的東西。 1. this指向調用他的對象首先...

KavenFan 2019-08-22 11:14 評論0 收藏0
再談JavaScript面向對象思想及繼承

摘要：面向對象中有三大特征，封裝，繼承，多態。這不僅無法做到數據共享，也是極大的資源浪費，那么引入對象實例對象的屬性指向其構造函數，這樣看起來實例對象好像繼承了對象一樣。實例對象的原型指向其構造函數的對象構造器的指向。前言為什么說是再談呢，網上講解這個的博客的很多，我開始學習也是看過，敲過就沒了，自以為理解了就結束了，書到用時方恨少啊。實際開發中一用就打磕巴，于是在重新學習了之后分享出來...

svtter 2019-08-21 17:19 評論0 收藏0