前端關於this

1>對於有經驗得JavaScript開發者來講this也是一個很是難以理解的複雜機制，在此簡單分析一下

      this的指向在函數的定義的時候是肯定不了的，只有在函數執行的時候才能肯定指向誰，實際上this最終指向的是調用他的那個對象(運行時)

2>搞清楚js裏面，函數的集中調用方法

1. 普通函數調用
2. 做爲方法調用
3. 做爲構造函數調用
4. 使用apply/call方法調用
5. function.prototype.bind調用
6. 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);