成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

用最簡單的方法判斷JavaScript中this的指向

gggggggbong / 571人閱讀

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

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

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

// 構(gòu)造函數(shù)
function Student(name) {
  this.name = name
}
// 創(chuàng)建小明和小紅兩個實例
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上的值會在創(chuàng)建實例的時候被綁定到新創(chuàng)建的實例上。不適用于下面的判斷方法，所以特此說明。

開始判斷

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

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: ?,?…}
法則一：對象方法中的this指向?qū)ο蟊旧恚^函數(shù)形式的除外） 
var x = {
  name: "bw2",
  getName1: function() {
    console.log(this)
  }
}
x.getName1()  // {name: "bw2", getName1: ?}
法則二：多層嵌套函數(shù)中的this指向等同于包含該this的最近一個function的this

箭頭函數(shù)沒有獨立的this作用域，所以繼續(xù)往外層走，走到了getName: function(){}。那么就是他了，this指向等同于這個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: ?}

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

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

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

是不是感覺有點奇怪？不過實踐證明確實如此。

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: ?,?…}
習題集

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

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

下面是做題時間。

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

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

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

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

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

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

相關(guān)文章

  • 用最簡單的方式聊一下JavaScript中的觀察者模式

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

    megatron 評論0 收藏0

  • javascript的繼承你了解多少？

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

    baishancloud 評論0 收藏0

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

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

    Jaden 評論0 收藏0

  • JavaScript EventEmitter

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

    lovXin 評論0 收藏0

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

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

    gplane 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<