成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js深入（四）萬臉懵圈的this指向

pcChao / 2136人閱讀

摘要：作為一個(gè)菜雞的我而言，在之前講到過那么多的鏈?zhǔn)讲檎覚C(jī)制，比如說原型鏈，作用域鏈等等，想當(dāng)然的把這個(gè)機(jī)制帶入到了指向上邊，結(jié)果就是這個(gè)指向指的我萬臉懵逼標(biāo)題換字了，擔(dān)心被河蟹在經(jīng)過漫長的通俗易懂的規(guī)范閱讀之后，分享一下我所認(rèn)知的指向簡而言之，

作為一個(gè)js菜雞的我而言，在之前講到過那么多的js鏈?zhǔn)讲檎覚C(jī)制，比如說原型鏈，作用域鏈等等，想當(dāng)然的把這個(gè)機(jī)制帶入到了this指向上邊，結(jié)果就是這個(gè)this指向指的我萬臉懵逼（標(biāo)題換字了，擔(dān)心被河蟹）,在經(jīng)過漫長的通（gou）俗（pi）易（bu）懂（tong）的 ECMAScript規(guī)范閱讀之后，分享一下我所認(rèn)知的this指向
簡而言之，js中this的指向不是在函數(shù)定義的時(shí)候確定的，而是在調(diào)用的時(shí)候創(chuàng)建階段確定的，也就是說this指向誰，完全取決于函數(shù)的調(diào)用方式
常見的幾種調(diào)用方式

直接調(diào)用， 比如說

function a() {
console.log(this);
}

a();

這個(gè)例子里邊this指向的是全局對象，在客戶端的全局對象是window對象，在node 中的全局對象是global對象

    (function a() {
        function b() {
            console.log(this);  
        }
        b()
    })()

直接調(diào)用指的是直接用函數(shù)名稱后邊加（）執(zhí)行調(diào)用的函數(shù)，無論是否在全局作用域

間接調(diào)用

const obj ={

name:"obj對象",
a(){
    console.log(this)
}

}
obj.a()

如圖

在圖中我們可以看到我們在對象里邊調(diào)用對象里邊的方法的時(shí)候，this指向的是obj對象，

或者說外邊有一個(gè)函數(shù) 然后給一個(gè)obj對象的屬性賦值

    const obj ={
        name:"obj對象",
        a(){
            console.log(this)
        }
    }
    obj.a()
    obj.b=function(){
        console.log(this,"b")
    }
    obj.b()

打印的結(jié)果都是obj對象

new調(diào)用

當(dāng)我們他用過new 創(chuàng)建一個(gè)新的對象的時(shí)候，new會調(diào)用這個(gè)構(gòu)造函數(shù)來創(chuàng)建一個(gè)對象，那么這個(gè)對象里邊的this是這個(gè)被new的函數(shù)調(diào)用的，那么自然 new調(diào)用的時(shí)候，this就是指向這個(gè)新對象的

    function A(data) {
        this.data = data;
    }
    class B{
        constructor(data){
              this.data = data
        }
    }
    let a = new A("A");
    let b = new B("B");
    console.log(a.data);   
    console.log(b.data);

如圖

這個(gè)new，在創(chuàng)建對象的時(shí)候做了什么，我們會在下一篇博客里邊仔細(xì)說明

箭頭函數(shù)中的this

箭頭函數(shù)可以理解成是是一個(gè)語法糖，他沒有自己的this綁定，箭頭函數(shù)中使用的this是包含他的那個(gè)函數(shù)的this

比如說

    const obj = {
        a() {
            return () => {
                console.log(this);
            };
        }
    }

上邊這段代碼被轉(zhuǎn)譯成es5 的時(shí)候如下

const obj = {
    a: function a() {
        var _this = this;
        return function () {
            console.log(_this);
        };
    }
};

綜合以上所有的代碼，得出一個(gè)結(jié)論就是，在js中this的綁定正常來講是指向調(diào)用這個(gè)方法的對象來確定的，當(dāng)然還有一些不正常的方法，可以改變this的指向

注意 ，下邊介紹的幾種方法，不能改變箭頭函數(shù)的this指向，箭頭函數(shù)本身是沒有this綁定的，在介紹完不正常的情況后，再來說一說那些能夠改變this指向的方法
ECMAScript 5.1 規(guī)范的this指向 
      js中this的綁定正常來講是指向調(diào)用這個(gè)方法的對象來確定的

這句話在理論上是這么講，在工作中正常的調(diào)用的話，這個(gè)理論是沒有毛病的，在 ECMAScript 5.1 的規(guī)范里邊規(guī)定，在js里邊分為語言類型和規(guī)范類型

語言類型

ECMAScript 里邊的語言類型規(guī)定的是我們可以直接操作的一些類型，比如string number，object等等這些

規(guī)范類型

規(guī)范類型ECMAScript 里邊指的是一種抽象的規(guī)范，他們并不是讓我們用來進(jìn)行操作的，二是用來描述一些行為或者邏輯的，比如說typeof delete等等

ECMAScript 5.1 里邊的this規(guī)定大概講就是這樣的，每個(gè)對象里邊有一個(gè)Reference 規(guī)范類型，this會根據(jù)Reference這個(gè)規(guī)范類型進(jìn)行賦值

ECMAScript 5.1

規(guī)范奉上 Reference 這個(gè)東西大家簡單的理解成是（）前邊的那一塊就好了，上邊我們講的那些正常的就是說左邊是

函數(shù)定義表達(dá)式

屬性訪問表達(dá)式

對象創(chuàng)建表達(dá)式

屬性創(chuàng)建表達(dá)式

這幾種情況，在這幾種情況的時(shí)候上邊那句話是成立的

但是如果不是這上邊的那幾句話的時(shí)候，比如說括號里邊是一個(gè)和函數(shù)相關(guān)計(jì)算或者一個(gè)運(yùn)算符等等

這個(gè)時(shí)候this會指向undefined ，這個(gè)時(shí)候在非嚴(yán)格模式的情況下會被隱式轉(zhuǎn)換成window對象

    var value = 1;

    var obj = {
      value: 2,
      a() {
        return this.value;
      }
    }
    
    console.log(obj.a());
    console.log((obj.a)());
    console.log((obj.a = obj.a)());
    console.log((false || obj.a)());
    console.log((obj.a, obj.a)());

記得之前看到過這個(gè)一個(gè)例子，運(yùn)行結(jié)果如圖

時(shí)間關(guān)系就說這些，下一篇博客會說new在運(yùn)行時(shí)候過程和改變this指向的一些方法，
以上是我對this指向的一些認(rèn)識，有不足的地方希望之處

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105503.html

相關(guān)文章

  • js懵圈之強(qiáng)等(===)弱等(==)衍生出的類型轉(zhuǎn)化、NaN、getElement*和querySe

    摘要：無關(guān)緊要的開頭作為一個(gè)年輕的前端從業(yè)者，近期趾高氣昂的去各種面試，抱著找虐心態(tài)去單挑的結(jié)果就是被各種面試題晃斷腳踝并被射，然后開始質(zhì)問自己對的掌握為何如此淺薄，為何當(dāng)初不好好學(xué)世界上最好的語言。 /*===無關(guān)緊要的開頭start===*/作為一個(gè)年輕的前端從業(yè)者，近期趾高氣昂的去各種面試，抱著找虐心態(tài)去單挑的結(jié)果就是被各種面試題晃斷腳踝并被yan射，然后開始質(zhì)問自己對js的掌握為何如...

    afishhhhh 評論0 收藏0

  • Underscore.js 1.8.3 學(xué)習(xí)筆記

    摘要：值得注意的是，如果值在前面也就是值小于值，那么值域會被認(rèn)為是零長度，而不是負(fù)增長。 underscore.js源碼加注釋一共1500多行，它提供了一整套函數(shù)式編程實(shí)用的功能，一共一百多個(gè)函數(shù)，幾乎每一個(gè)函數(shù)都可以作為參考典范。初讀的時(shí)候，真是一臉懵圈，各種函數(shù)閉包、迭代和嵌套的使用，讓我一時(shí)很難消化。在這里，我來記錄一下我學(xué)習(xí)underscore.js的一些發(fā)現(xiàn)，以及幾個(gè)我認(rèn)為比較經(jīng)典...

    springDevBird 評論0 收藏0

  • 深入理解 js this 綁定 ( 無需死記硬背，尾部有總結(jié)和面試題解析 )

    摘要：那默認(rèn)綁定到哪呢，一般是上，嚴(yán)格模式下是。這種情況下，函數(shù)里的默認(rèn)綁定為上下文對象，等價(jià)于打印故輸出。只接受兩個(gè)參數(shù)，且第二個(gè)參數(shù)必須是數(shù)組，這個(gè)數(shù)組代表原函數(shù)的參數(shù)列表。即繼承原函數(shù)的原型將這個(gè)新對象綁定到此函數(shù)的上。 js 的 this 綁定問題，讓多數(shù)新手懵逼，部分老手覺得惡心,這是因?yàn)閠his的綁定 ‘難以捉摸’，出錯的時(shí)候還往往不知道為什么，相當(dāng)反邏輯。讓我們考慮下面代碼: ...

    wall2flower 評論0 收藏0

  • 深入理解 js this 綁定 ( 無需死記硬背，尾部有總結(jié)和面試題解析 )

    摘要：那默認(rèn)綁定到哪呢，一般是上，嚴(yán)格模式下是。這種情況下，函數(shù)里的默認(rèn)綁定為上下文對象，等價(jià)于打印故輸出。只接受兩個(gè)參數(shù)，且第二個(gè)參數(shù)必須是數(shù)組，這個(gè)數(shù)組代表原函數(shù)的參數(shù)列表。即繼承原函數(shù)的原型將這個(gè)新對象綁定到此函數(shù)的上。 js 的 this 綁定問題，讓多數(shù)新手懵逼，部分老手覺得惡心,這是因?yàn)閠his的綁定 ‘難以捉摸’，出錯的時(shí)候還往往不知道為什么，相當(dāng)反邏輯。讓我們考慮下面代碼: ...

    qpwoeiru96 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<