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

資訊專欄INFORMATION COLUMN

用最簡(jiǎn)單的方法判斷JavaScript中this的指向

gggggggbong / 549人閱讀

摘要：法則一對(duì)象方法中的指向?qū)ο蟊旧砑^函數(shù)形式的除外法則二多層嵌套函數(shù)中的指向等同于包含該的最近一個(gè)的箭頭函數(shù)沒有獨(dú)立的作用域，所以繼續(xù)往外層走，走到了。

目錄 
* 一個(gè)特例
* 開始判斷
    * 法則一：對(duì)象方法中的this指向?qū)ο蟊旧恚^函數(shù)形式的除外）
    * 法則二：多層嵌套函數(shù)中的this指向等同于包含該this的最近一個(gè)function的this
    * 法則三：箭頭函數(shù)以及非指向?qū)ο蠓椒ㄖ械膄unction的情況下this指向window
* 習(xí)題集
    * 普通函數(shù)中的this
    * 函數(shù)執(zhí)行后返回另外一個(gè)函數(shù)中的this（普通函數(shù)中）
    * 多層嵌套函數(shù)中的this（定時(shí)器&箭頭函數(shù)）1
    * 多層嵌套函數(shù)中的this（定時(shí)器&箭頭函數(shù)）2
一個(gè)特例

在正式開始之前，我們先來說一個(gè)特例。

// 構(gòu)造函數(shù)
function Student(name) {
  this.name = name
}
// 創(chuàng)建小明和小紅兩個(gè)實(shí)例
var XM = new Student("xiaoming")
var XH = new Student("xiaohong")
// 輸出信息
console.log(XM)  // Student {name: "xiaoming"}
console.log(XH)  // Student {name: "xiaohong"}

在構(gòu)造函數(shù)中，this上的值會(huì)在創(chuàng)建實(shí)例的時(shí)候被綁定到新創(chuàng)建的實(shí)例上。不適用于下面的判斷方法，所以特此說明。

開始判斷

下面是一個(gè)典型例子，我們的分析從這里開始。

var x = {
  name: "bw2",
  getName1: function() {
    console.log(this)
  },
  getName2: function() {
    setTimeout(() => {
      console.log(this)
    },0)
  },
  getName31: () => {
    console.log(this)
  },
  getName32: function() {
    return function() {
      console.log(this)
    }
  }
}
x.getName1()  // {name: "bw2", getName1: ?}
x.getName2()  // {name: "bw2", getName1: ?}
x.getName31()  // Window {stop: ?, open: ?, alert: ?, confirm: ?, prompt: ?,?…}
x.getName32()()  // Window {stop: ?, open: ?, alert: ?, confirm: ?, prompt: ?,?…}
法則一：對(duì)象方法中的this指向?qū)ο蟊旧恚^函數(shù)形式的除外） 
var x = {
  name: "bw2",
  getName1: function() {
    console.log(this)
  }
}
x.getName1()  // {name: "bw2", getName1: ?}
法則二：多層嵌套函數(shù)中的this指向等同于包含該this的最近一個(gè)function的this

箭頭函數(shù)沒有獨(dú)立的this作用域，所以繼續(xù)往外層走，走到了getName: function(){}。那么就是他了，this指向等同于這個(gè)function內(nèi)部的this指向。根據(jù)法則一，this指向?qū)ο蟊旧怼?/p> 

var x = {
  name: "bw2",
  getName2: function() {
    console.log(this)  // 等同于此處的this
    setTimeout(() => {
      console.log(this)  // 原始的this位置
    },0)
  }
}
x.getName2()  // {name: "bw2", getName1: ?}

我們可以試著在瀏覽器中運(yùn)行，看看結(jié)果。

法則三：箭頭函數(shù)以及非指向?qū)ο蠓椒ㄖ械膄unction的情況下this指向window

根據(jù)法則二，this是指向最近的function，因此，這里的this等同于返回的函數(shù)中的this，不是對(duì)象方法中的this，所以，指向全局。

是不是感覺有點(diǎn)奇怪？不過實(shí)踐證明確實(shí)如此。

var x = {
  name: "bw2",
  getName31: () => {
    console.log(this)
  },
  getName32: function() {
    return function() {
      console.log(this)
    }
  }
}
x.getName31()  // Window {stop: ?, open: ?, alert: ?, confirm: ?, prompt: ?,?…}
x.getName32()()  // Window {stop: ?, open: ?, alert: ?, confirm: ?, prompt: ?,?…}
習(xí)題集

歡迎大家按照法則一到三依次判斷，猜測(cè)結(jié)果，并在瀏覽器下測(cè)試。測(cè)試結(jié)果也可以回復(fù)，大家一起討論。

因本人能力有限，該系列法則可能在部分情況下失效。歡迎大家一起討論。

下面是做題時(shí)間。

普通函數(shù)中的this 
function x() {
  console.log(this)
}
x()
函數(shù)執(zhí)行后返回另外一個(gè)函數(shù)中的this（普通函數(shù)中） 
function xx(){
  return function() {
    console.log(this)
  }
}
xx()()
多層嵌套函數(shù)中的this（定時(shí)器&箭頭函數(shù)）1 
var x = {
  name: "bw2",
  getName: () => {
    setTimeout(() => {
      console.log(this)
    },0)
  }
}
x.getName()
多層嵌套函數(shù)中的this（定時(shí)器&箭頭函數(shù)）2 
var x = {
  name: "bw2",
  getName: () => {
    setTimeout(function() {
      console.log(this)
    },0)
  }
}
x.getName()

再次說明，該法則為實(shí)驗(yàn)性法則，未進(jìn)行大范圍的測(cè)試，不保證在所有情況下都有一致的結(jié)果。如果你發(fā)現(xiàn)了法則判斷失敗的情況，歡迎留言，一起探討。

歡迎關(guān)注前端進(jìn)階指南微信公眾號(hào)：

另外我也創(chuàng)了一個(gè)對(duì)應(yīng)的QQ群：660112451，歡迎一起交流。

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

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

相關(guān)文章

  • 用最簡(jiǎn)單的方式聊一下JavaScript中的觀察者模式

    摘要：觀察者模式，是設(shè)計(jì)模式之一。即便如此，筆者仍精心準(zhǔn)備了這篇博客，期望用最簡(jiǎn)單的方式來介紹下該模式。這里有個(gè)小知識(shí)點(diǎn)提一下函數(shù)對(duì)象的屬性就是該函數(shù)名最后是思路是通過找到指定數(shù)組，然后對(duì)數(shù)組中的回調(diào)函數(shù)進(jìn)行依次調(diào)用，達(dá)到發(fā)布的目的。 觀察者模式，是JavaScript設(shè)計(jì)模式之一。當(dāng)然也不僅僅限于JavaScript這門語言，網(wǎng)上對(duì)該模式的介紹已是多如牛毛，而且講得各有特色各有心得。即便如...

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

  • javascript的繼承你了解多少？

    摘要：和構(gòu)造函數(shù)前面提到，是個(gè)內(nèi)置隱藏屬性，雖然在可以通過訪問，但是其設(shè)計(jì)本意是不可被讀取和修改的，那么我們?nèi)绾卫迷玩渷斫⒗^承關(guān)系提供了關(guān)鍵字。到這兒，思路就清晰了，怎么讓對(duì)象和對(duì)象的相連實(shí)現(xiàn)繼承只需把的構(gòu)造函數(shù)的連接到就行了。 什么是繼承? 大多數(shù)人使用繼承不外乎是為了獲得這兩點(diǎn)好處，代碼的抽象和代碼的復(fù)用。代碼的抽象就不用說了，交通工具和汽車這類的例子數(shù)不勝數(shù)，在傳統(tǒng)的OO語言中(...

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

  • js溫故而知新7(面向?qū)ο缶幊?——學(xué)習(xí)廖雪峰的js教程

    摘要：不區(qū)分類和實(shí)例的概念，而是通過原型來實(shí)現(xiàn)面向?qū)ο缶幊?。新?chuàng)建的的原型鏈?zhǔn)且簿褪钦f，的原型指向函數(shù)的原型。最后，創(chuàng)建一個(gè)對(duì)象代碼和前面章節(jié)完全一樣小明繼承用定義對(duì)象的另一個(gè)巨大的好處是繼承更方便了。 JavaScript不區(qū)分類和實(shí)例的概念，而是通過原型（prototype）來實(shí)現(xiàn)面向?qū)ο缶幊獭?原型是指當(dāng)我們想要?jiǎng)?chuàng)建xiaoming這個(gè)具體的學(xué)生時(shí)，我們并沒有一個(gè)Student類型可用...

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

  • JavaScript EventEmitter

    摘要：事件刪除可有可無。創(chuàng)建了一個(gè)類，然后在構(gòu)造函數(shù)里初始化一個(gè)類的屬性，這個(gè)屬性不需要要繼承任何東西，所以用了。但這不是必要的，因?yàn)閷?shí)例化一個(gè)都會(huì)調(diào)用構(gòu)造函數(shù)，皆為初始狀態(tài)，應(yīng)該是不可能已經(jīng)定義了的，可去掉。成功執(zhí)行結(jié)束后返回。 GitHub地址：JavaScript EventEmitter博客地址：JavaScript EventEmitter 水平有限，歡迎批評(píng)指正 2個(gè)多月前把 ...

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

  • 這兩天老是有兄弟問到Vue的登陸和注冊(cè)，登陸成功留在首頁，沒有登錄回到登錄頁面，現(xiàn)在我用最簡(jiǎn)單實(shí)用的

    摘要：其實(shí)登錄注冊(cè)，并且登錄一次保持登錄的狀態(tài)，是每個(gè)項(xiàng)目都需要實(shí)現(xiàn)的功能。 其實(shí)登錄注冊(cè)，并且登錄一次保持登錄的狀態(tài)，是每個(gè)項(xiàng)目都需要實(shí)現(xiàn)的功能。 網(wǎng)上也有很多的方法，不過，不是通俗易懂，在這里說一下我自己的方法，非常簡(jiǎn)單實(shí)用核心就是用localStorage存、取數(shù)據(jù)，這樣當(dāng)刷新瀏覽器，或者關(guān)閉在打開的時(shí)候能達(dá)到預(yù)期想要的效果 在router/index.js中 import Vue ...

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

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

0條評(píng)論

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