国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript：this的指向

sPeng / 1056人閱讀

摘要：內(nèi)聯(lián)函數(shù)中的指向事件發(fā)生的元素在彈出框中顯示事件處理函數(shù)中的當(dāng)一個(gè)函數(shù)被用作事件處理函數(shù)時(shí)，它的指向觸發(fā)事件的元素

理解JS中this的指向

每個(gè)函數(shù)都有它自己的this值，在絕大多數(shù)情況下，this指向調(diào)用了函數(shù)的那個(gè)對(duì)象。
為了自己更加清楚地認(rèn)識(shí)this的指向，我總結(jié)出了以下幾種情況：

全局環(huán)境中的this

無論是否處于嚴(yán)格模式，在全局環(huán)境中（或者理解為在任何函數(shù)體的外部）this 都指代全局對(duì)象:

console.log(this); //全局對(duì)象

var num = 100;
console.log(this.num); // 100
函數(shù)內(nèi)部中的this

在全局環(huán)境中調(diào)用函數(shù)，函數(shù)內(nèi)部的this指向有以下兩種情況：

在非嚴(yán)格模式下，this的值等于全局對(duì)象：

function temp(){
    return this;
};
console.log(temp()); //全局對(duì)象

在嚴(yán)格模式下，由于this并沒有被提前定義，所以，this的值等于undefined：

function temp(){
    "use strict";
    return this;
};
console.log(temp()); //undefined

用apply和call方法可以指定this的值：

var obj = {
    name: "Tom"
};

function temp(){
    "use strict";
    return this;
};

console.log(temp.call(obj)); //{name: "Tom"}

補(bǔ)充知識(shí)點(diǎn)：在嚴(yán)格模式下，通過this傳遞給一個(gè)函數(shù)的值不會(huì)被強(qiáng)制轉(zhuǎn)換為一個(gè)對(duì)象:

function temp(){
    "use strict"; 
    return this
}
console.log(temp.call(true)); // true
console.log(temp.call(56)); // 56
console.log(temp.apply(null)); //
ES6箭頭函數(shù)中的this

箭頭函數(shù)不會(huì)創(chuàng)建自己的this,它只會(huì)從自己所處的作用域鏈的上一層繼承this。

例1：箭頭函數(shù)沒有自己的this指針，通過call或apply方法調(diào)用一個(gè)箭頭函數(shù)時(shí)，為this綁定特定的值是無效的：

var name = "window";

var obj = {
    name: "Tom"
};

var temp = () => {
    return this.name;
};

console.log(temp.call(obj)); //window

箭頭函數(shù)是在全局環(huán)境中調(diào)用的，它上一層的this指向全局對(duì)象，所以，它的this也指向全局對(duì)象。

例2：在函數(shù)內(nèi)部創(chuàng)建的箭頭函數(shù)，其this指向等同于包含函數(shù)的this指向：

name = "window";

let obj = {
    name: "Tom",
    test: function(){
        let temp = (()=>{
          return this.name;
        });
        return temp;
    }
};

console.log(obj.test()()); //Tom

包含函數(shù)作為對(duì)象里面的方法被調(diào)用時(shí)，它的this指向調(diào)用它的對(duì)象obj，所以，箭頭函數(shù)的this也指向obj。

name = "window";

let obj = {
    name: "Tom",
    test: function(){
        let temp = (()=>{
          return this.name;
        });
        return temp;
    }
};

let a = obj.test;
console.log(a()()); //window

包含函數(shù)被賦值給一個(gè)全局變量，之后再在全局環(huán)境中調(diào)用，顯然，此時(shí)它的this指向調(diào)用它的全局對(duì)象，所以，箭頭函數(shù)的this也指向全局對(duì)象。

例3：明白了箭頭函數(shù)的this指向原理，在回調(diào)函數(shù)中就不用寫這樣的代碼了：var that = this，這里以setTimeout的回調(diào)函數(shù)為例：

不用箭頭函數(shù):

var name = "outer";

var obj = {
    name: "Tom"
};

function temp(){
    let that = this;
    setTimeout(function(){
        console.log(that.name);
    },1000);
}

temp.call(obj); //Tom

使用箭頭函數(shù):

var name = "outer";

var obj = {
    name: "Tom"
};

function temp(){
    setTimeout(() => {
        console.log(this.name);
    },1000);
}

temp.call(obj); // Tom
作為對(duì)象的方法中的this

對(duì)象中函數(shù)的this指向調(diào)用函數(shù)的那個(gè)對(duì)象， 并且是離得最近的那個(gè)對(duì)象：

name = "window";

let obj1 = {
    name: "1",
    test: function(){
        return this.name;
    },
    other: {
        name: "2"
    }
};

obj1.other.test = obj1.test;

console.log(obj1.test()); // 1
console.log(obj1.other.test()); //2

let aa = obj1.test;
console.log(aa()); //全局對(duì)象
構(gòu)造函數(shù)中的this

構(gòu)造函數(shù)中的this指向創(chuàng)建的新對(duì)象:

function Person(name){
    this.name = name;
};
let child = new Person("Tom");

補(bǔ)充知識(shí)點(diǎn)：new的過程到底發(fā)生了什么：

創(chuàng)建一個(gè)新的對(duì)象child;

將構(gòu)造函數(shù)的作用域賦給對(duì)象，即構(gòu)造函數(shù)中的this指向child;

執(zhí)行構(gòu)造函數(shù)中的操作；

返回對(duì)象child({name: "Tom"})。

內(nèi)聯(lián)函數(shù)中的this

指向事件發(fā)生的DOM元素:

    
     // 在彈出框中顯示：btn
Dom事件處理函數(shù)中的this

當(dāng)一個(gè)函數(shù)被用作事件處理函數(shù)時(shí)，它的this指向觸發(fā)事件的元素:

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99563.html

相關(guān)文章

  • javascript技術(shù)難點(diǎn)（三）之this、new、apply和call詳解

    摘要：第四點(diǎn)也要著重講下，記住構(gòu)造函數(shù)被操作，要讓正常作用最好不能在構(gòu)造函數(shù)里 4) this、new、call和apply的相關(guān)問題 講解this指針的原理是個(gè)很復(fù)雜的問題，如果我們從javascript里this的實(shí)現(xiàn)機(jī)制來說明this，很多朋友可能會(huì)越來越糊涂，因此本篇打算換一個(gè)思路從應(yīng)用的角度來講解this指針，從這個(gè)角度理解this指針更加有現(xiàn)實(shí)意義。 下面我們看看在ja...

    ghnor 評(píng)論0 收藏0

  • 我對(duì)JavaScript中this的一些理解

    摘要：匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此它的對(duì)象通常指向。如果對(duì)此有疑惑，可以看知乎上的答案知乎匿名函數(shù)的指向?yàn)槭裁词亲鳛閷?duì)象方法的調(diào)用，指向該對(duì)象當(dāng)函數(shù)作為某個(gè)對(duì)象的方法調(diào)用時(shí)，就指這個(gè)函數(shù)所在的對(duì)象。 因?yàn)槿粘９ぷ髦薪?jīng)常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識(shí)。 這段時(shí)間翻閱了一些書籍也查閱了網(wǎng)上一些資料然后結(jié)合自己的經(jīng)驗(yàn)，為了能讓自...

    focusj 評(píng)論0 收藏0

  • 學(xué)習(xí)JavaScript之this,call,apply

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

    wenhai.he 評(píng)論0 收藏0

  • JavaScript 中 this 的指向問題

    摘要：首發(fā)個(gè)人博客中的，大家都用過。箭頭函數(shù)，詞法作用域中的簡單的說，箭頭函數(shù)中的，會(huì)綁定到函數(shù)外也就是上一層作用域中的，函數(shù)外的指向哪，箭頭函數(shù)中的就指向哪。 首發(fā)個(gè)人博客 JavaScript 中的 this ，大家都用過。但是它到底指向哪里呢？今天在閱讀 《你不知道的JavaScript (上卷)》再結(jié)合自己平時(shí)看的博客，對(duì)它又有了新的認(rèn)識(shí)，在此來做個(gè)小結(jié)，再碰到 this ,就再也不...

    DTeam 評(píng)論0 收藏0

  • 輕松搞定javascript中this的指向

    摘要：調(diào)用在中，通過的形式調(diào)用一個(gè)構(gòu)造函數(shù)，會(huì)創(chuàng)建這個(gè)構(gòu)造函數(shù)實(shí)例，而這個(gè)實(shí)例的指向創(chuàng)建的這個(gè)實(shí)例。如下例所示，在構(gòu)造函數(shù)內(nèi)部使用并沒有改變?nèi)肿兞康闹?。顯然，箭頭函數(shù)是不能用來做構(gòu)造函數(shù)。 　　關(guān)于javascript中this指向的問題，現(xiàn)總結(jié)如下，如有不正確，歡迎指正。 　　javascript中，this的指向并不是在函數(shù)定義的時(shí)候確定的，而是在其被調(diào)用的時(shí)候確定的。也就是說，函數(shù)的...

    shinezejian 評(píng)論0 收藏0

  • 理解 JavaScript this

    摘要：回調(diào)函數(shù)在回調(diào)函數(shù)中的指向也會(huì)發(fā)生變化。在閉包回調(diào)函數(shù)賦值等場景下我們都可以利用來改變的指向，以達(dá)到我們的預(yù)期。文章參考系列文章理解閉包理解執(zhí)行棧理解作用域理解數(shù)據(jù)類型與變量原文發(fā)布在我的公眾號(hào)，點(diǎn)擊查看。 這是本系列的第 5 篇文章。 還記得上一篇文章中的閉包嗎？點(diǎn)擊查看文章 理解 JavaScript 閉包 。 在聊 this 之前，先來復(fù)習(xí)一下閉包： var name = Nei...

    zombieda 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<