談談JavaScript this那點事

找抽的小陀螺發表於2017-09-29
JavaScript

this在js中起初我覺得是最噁心的 好吧個人感覺 主要太飄忽不定了 後來也看了一些文章說了好多 總結一句話吧

在函式中 this 到底取何值，是在函式真正被呼叫執行的時候確定下來的，函式定義的時候確定不了 就是誰呼叫就指向誰

this這個關鍵字是有明確定義的 就是指代當前物件 當前這個詞感覺就不是一個確定的條件 好像在某種情況下才成立

接著往下看 大牛的可以略過小弟裝逼一波

由於js執行期繫結的特性所以 js的this 情況特別多 廢話不多說了

this三種情況 1. 全域性物件 2. 當前物件 3. 任意物件
要分析這些是那種情況 要根據函式呼叫方式 下面說下函式呼叫方式

  • 函式呼叫
  • 物件方法
  • 建構函式
  • 使用call apply

我擦 看到這些個 懵逼不 一個一個來幹下

  • 函式呼叫

    function a () {
  this.n = '123'
  console.log(this)  //window
  console.log(this.n)   //123
}
a()複製程式碼

    這裡的this 是全域性的物件 把他變化下

    var b = '123'
function a() {
   console.log(this)  //window
   console.log(this.b)  //123
}
a()複製程式碼

    我擦 這種普通函式呼叫的時候 this 指向了window

  • 作為物件方法呼叫

    var name = 'xiaobai'
var Person = {
   name: 'xiaoming',
   showName: function () {
     console.log(this.name)  // xiaoming
   }
 }
Person.showName()複製程式碼

    作為物件的方法 當呼叫的時候這裡的this 就是Person

    var name = 'xiaobai'
var Person = {
   name: 'xiaoming',
   showName: function () {
     console.log(this.name)  // xiaobai
   }
 }
var other = Person.showName
other()複製程式碼

    哎擦 不是說作為物件的方法呼叫this就指向當前這個物件嗎 咋變了 咋感覺是window啊

    原因: 這裡把 Person.showName 賦予給window上的一個變數 showName這個方法作用就是輸入this指向物件上的name屬性 這時候在賦予在window上變數 當other() 實際是在呼叫全域性(window)上的一個方法 相當於最後 window.name 肯定是xiaobai了

  • 作為建構函式
    啥叫建構函式這裡就不做詳細展開了 簡單說下 就是通過一個函式生成 (new)一個物件

    function Person() {
    this.name = 'xiaoming'
}
var other = new Person()
console.log(other.name)  //xiaoming複製程式碼

    看到的是 this 指向的就是new 出來的物件 如果不new 哪跟普通函式一樣

  • call apply
    這個call apply 之前說過
    apply()是函式物件的一個方法 它應用某一物件的一個方法 用另一個物件替換當前物件

      var n = 'hello world!'
  function example(){ 　　　
  console.log(this.n)
  } 　　
  var o={}; 　
  o.n = 'hey'　　
  o.m = example 　
  o.m.apply()  // hello world!
  o.m.apply(o) // hey複製程式碼

    這裡 當apply() 引數為空的時候 沒有物件來替換當前物件 預設是用全域性(window)來替換
    當apply() 有引數的時候 物件替換成功 this指向了o這個物件

總結下 以上就是this在各種情況下的含義 js很牛逼 這裡只是介紹冰山一角 更牛逼的東西 還要我們不斷去學習 (後續基礎文章繼續補充中 可以參考我其他文章看看對你有沒有幫助)

相關文章