1>對於有經驗得JavaScript開發者來說this也是一個非常難以理解的複雜機制,在此簡單分析一下 this的指向在函數的定義的時候是確定不了的,只有在函數執行的時候才能確定指向誰,實際上this最終指向的是調用他的那個對象(運行時) 2>搞清楚js裡面,函數的集中調用方法 總結:誰調用了這個函 ...
1>對於有經驗得JavaScript開發者來說this也是一個非常難以理解的複雜機制,在此簡單分析一下
this的指向在函數的定義的時候是確定不了的,只有在函數執行的時候才能確定指向誰,實際上this最終指向的是調用他的那個對象(運行時)
2>搞清楚js裡面,函數的集中調用方法
- 普通函數調用
- 作為方法調用
- 作為構造函數調用
- 使用apply/call方法調用
- function.prototype.bind調用
- es6箭頭函數調用
總結:誰調用了這個函數或者方法this關鍵字就是指向誰的
分情況討論
1>普通函數調用
function sayName() { this.name='kobe'; console.log(this); console.log(this.name); } sayName(); //window kobe
這段代碼sayName函數作為普通函數調用,實際上作為全局對象Window的一個方法調用的,window.sayName();
2>方法調用
var name='kobe'; var person={ name:'james', sayName:function () { console.log(this.name); } } person.sayName(); var person1=person.sayName; person1();
3>構造函數調用
function Person(name){ this.name=name; } var personA=Person("xl"); console.log(personA.name); // 輸出 undefined console.log(window.name);//輸出 xl //上面代碼沒有進行new操作,相當於window對象調用Person("xl")方法,那麼this指向window對象,併進行賦值操作window.name="xl". var personB=new Person("xl"); console.log(personB.name);// 輸出 xl //這部分代碼的解釋見下
4>apply/ca調用
apply和call方法可用來代替另一個對象調用一個方法,call方法可將一個函數的對象上下文從初始的上下文改變為指定為新的對象,不同的是就是兩個方法的參數是不一樣的
var obj={ x:3, show:function () { console.log('method is called:'+this.x); } } var obj2={x:4}; obj.show(); obj.show.apply(obj2); obj.show.call(obj2);