1、js的this總是指向對象,具體指向哪個對象是在運行時給予函數的執行環境動態綁定的。
this指向大體分爲4種:
- 作爲對象的方法調用
- 作爲普通函數調用
- 構造器調用
- call、appy調用
首先看一下下面的例子:
window.name="nikon";
var myObject={
name:'stven',
getName:function(){
return this.name;
}
}
var getName=myObject.getName;
var getThisName=myObject.getName();
alert(getName()); //nikon
alert(getThisName); //stven
兩者的返回結果不同,而這樣的不同也是平時容易混淆的地方。‘var getName=myObject.getName;’是作爲普通函數調用,返回的this指向的全局的window.name;‘var getThisName=myObject.getName();’是作爲對象的方法調用,this指向該對象。
有時我們會困擾,比如div節點的事件函數內部,有一個局部的callback方法,callback被作爲普通函數調用,this指向全局,這樣我們無法獲取到該div節點,如果想要get到該節點,可以用一個變量保存這個div節點的引用:
document.getElementById("div1").onclick = function(){
var that = this;
var callback = function(){
alert(that.id);
}
callback();
}
2、apply和call的區別
二者作用是一模一樣的,區別在於傳入參數形式不用
apply接受兩個參數,第一個參數是函數體內this對象的指向,第二個參數爲一個帶下標的集合,這個集合可以是數組也可以是類數組,apply把這個集合中的元素作爲參數傳遞給被調用的函數:
var func=function(a,b,c){
alert([a,b,c]);
}
func.apply(null,[1,2,3]);
call傳入的參數不固定,和apply一樣的是第一個參數是函數體內this對象的指向,第二個參數開始,每個參數依次傳入函數體內
var func=function(a,b,c){
alert([a,b,c]);
}
func.apply(null,1,2,3);
當調用一個函數時,js的解釋器並不會計較形參和實參在數量、類型以及順序上的區別,js的參數在內部就是用一個數組來表示的,從這個意義上講,apply比call使用率更高。我們不用關心多少參數傳入,只要用apply一股腦的傳進去就行了。
3、call和apply的用途
3.1、改變this指向
var obj1={
name:'sevn'
}
var obj2={
name:'frank'
}
window.name='window';
var genName=function(){
alert(this.name);
}
getName.call(obj1); //sevn
getName.call(obj2); //frank
3.2 Function.prototype.bind,用於指定函數內部的this指向
var obj={
name:'sven'
}
var func=function(){
alert(this.name);
}.bind(obj);
func(); //sven