javascript中this那些事

定義

this是函數執行的上下文。

調用方式

1. 做爲函數調用，指向window（嚴格模式報undefined的錯）。

var name='hello';
function a() {    
    console.log(this.name)   
}
a();     //hello

var c={    
    name:'haha',    
    d: function(){ 
       a(); 
    } 
}
c.d();    //hello
複製代碼

2. 做爲屬性調用，指向該對象。

var name='hello';
function a(){   
    console.log(this.name)
}
var b={    
    name:'world',    
    a:a    
}
b.a();    //world
複製代碼

有個陷阱，做爲函數別名調用時，會丟失this。

var name='hello';
function a(){   
    console.log(this.name)
}
var b={    
    name:'world',    
    a:a    
}

var test=b.a;
test();     //hello
複製代碼

3. 做爲構造函數調用，會把屬性掛到new出來的實例上。

function A(){    
    this.name='xiaoming'
}
var a=new A();
console.log(a.name);    //xiaoming
複製代碼

若是構造函數有return，且return對象（包括{}、[]），那麼new的實例就是return的值.

function A(){    
    this.name='xiaoming';
    return {}  
}
var a=new A();
console.log(a.name)    //undefined
複製代碼

若是return的是字符串、「」、null、undefined，new的實例和無return時new的實例同樣。

function A(){    
    this.name='xiaoming';
    return null
}
var a=new A();
console.log(a.name);    //xiaoming
複製代碼

其實new作了三件事：

1. 建立一個新對象：var obj={}；

2. 將obj的__proto__指向A.prototype：obj.__proto__=A.prototype;該步驟是爲了繼承構造函數A原型鏈。

3. 將this指向該新對象執行A：A.call(obj)。

function Animal(){    
    this.animal="animal";
}
Animal.prototype.name="9"; //Animal構造函數原型的屬性name
function Dog(){    
    this.dog="dog";    
}
Dog.prototype.__proto__=Animal.prototype;

var d=new Dog();
var obj={};
obj.__proto__=Dog.prototype;
Dog.call(obj);
複製代碼

上面的例子中，對象d和對象obj徹底同樣，結果都是下圖的實例，都能訪問Animal構造函數原型的屬性name和方法。

改變this指向的三種方式

1.call

使用：Function.call(obj,arg0,arg1...)

將Function的this指向obj，第一個參數是this指向，後面的參數是傳入Function的參數，通常用於參數個數固定的的函數。對於改變this指向，我我的理解是把函數裏全部用到this的地方替換爲obj。

2.apply

使用：Function.apply(obj,[arg0,arg1...])

將Function的this指向obj，第一個參數是this指向，第二個參數是傳入Function的參數組成的數組，通常用於參數個數不固定的的函數。

3.bind

使用：Funtion(arg0,arg1...).bind(obj)

誤區

誤區1：this指向函數自己？

var name='hello'
function a(){    
    console.log(this.name);    
}
a.name='world';
a() ;    //打印hello
console.log(a.name)     //world
複製代碼

題外話：

Object和Function既是對象，又是函數，二者內部同時含有proto和prototype屬性。 Function.prototype指向」內置函數「。而Object.prototype指向」根源對象「

Object.__proto__ === Function.prototype //true
Object.__proto__ === Function.__proto__//true
Object.prototype === Function.prototype.__proto__ // true
//所以
Function instanceof Object //true
Object instanceof Function //true
複製代碼

函數a的原型：

全部的函數都繼承自 Object，函數的原型是Object的實例， 由於 Function.__proto__.__proto__===Object.prototype爲true，也能夠用 Function.prototype.isPrototypeOf(Object)爲true判斷。
是對象就能夠增長屬性，因此a.name掛在了函數上，那他有沒有丟呢？由例子打印的第二個值能夠看出來沒丟。

是對象均可以增長屬性，Array.__proto__.__proto__===Object.prototype爲ture，Object.prototype.isPrototypeOf(Array.prototype)爲true，因此Array和Function同樣，也能夠增長屬性。感興趣可自行測試。

誤區2：this是函數局部做用域？

var name='hello'
function a(){  
    var name='world';  
    console.log(this.name)  
}
a();    //hello
複製代碼

上例打印hello，不是world，說明this並非函數的局部做用域。

誤區3：this指向父級函數做用域？

var name='hello'
function a(){  
    console.log(this.name) 
}
function b(){ 
    var name='world';    
    a();   
}
b();    //hello
複製代碼

該例子打印的是hello，而不是world，說明this並非父級函數做用域，而是調用上下文。

誤區4：函數的this指向與調用該函數的地方this相同？

var name='hello';
function a(){   
    console.log(this.name)
}
var c={    
    name:'haha',    
    d: function(){ 
        console.log(this.name); // haha 
        a(); 
    } 
}
c.d();    // haha  hello
複製代碼

照理說，若是函數的this指向與調用該函數的地方this相同，那麼兩個都打印haha，然而事實倒是，先打印haha，再打印hello，說明跟調用函數外部的this無關,可能有人有困惑，爲何會這樣呢？我也不知道哈哈