All Articles

About JS of THIS - 關於JS的this指向何方?

About THIS keyword in JavaScript

  • this 不是 function 本身,也不是指 function 的 scope
  • this 與 function 在何處被宣告完全無關,而是取決於 function 被呼叫的 scope 的 Owner
  • 當 function 是某個物件的 method,this 指的就是上層物件
  • 在Browser全域變數的上層物件就是 window

Exsample

'use struc'
//Define a gobal value
this.title = "Closer";
var family = {
    title : "family",
    age : 22,
    infomation:function(){
        return console.log("I am a %s,%d years old.", this.title, this.age);
    },
    whatinthis:function(){
        console.log('where am i '+ this.title);
        return function(){
            console.log(''+ this);
            return console.log(this.title);
        }
    }
}
var mother = { title : "Mother", age : 38 }
var father = { title: "Father", age: 41 }
var son =    { title: "Son", age:20 }
//一般調用則THIS Scope就是family
family.infomation()  //I am a family,22 years old.
//透過call指定THIS Scope範圍
family.infomation.call(father) //I am a Father,41 years old.
family.whatinthis.call(son) //where am i Son
//令人詬病之一的地方,所以要用call、apply、bind等方式解決
family.whatinthis()() 
//where am i familys
// [object global]
//undefined
//第一個打印沒問題
//第二個打印出來可以得知是global
//第三個就是THIS令人疑惑的地方,因為這是一個BUG,還記得前面有定義title,也沒有取得,答案是不存在"這個"global裡面,有興趣的可以拿掉''打印來看
//ps.在NodeJS 6.10.2無法取得全局的this.title,但在chrome developer tools console 可以取得.
family.whatinthis().call(son)
// where am i family
// [object Object]
// Son
  • 還有一種方式"self"可以解決,這也是大量使用的方法詳見
Published 8 Sep 2017