第二章:this、call和apply
- this
JS的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。 - this指向的四种情况
- 作为对象的方法调用
var obj={
a:1,
getA:function(){
alert(this===obj);
alert(this.a)
}
};
obj.getA();
- 作为普通函数调用
window.name='globalName';
var getName=function(){
return this.name;
}
console.log(getName());
window.name='globalName';
var myObject={
name:'sven',
getName:funtion(){
return this.name;
}
};
var getName=myObject.getName;
console.log(getName());
<html>
<body>
<div id="div1">我是一个div</div>
</body>
<script>
window.id='window';
document.getElementById('div1').onclick=function(){
alert(this.id);
var callback=function(){
alert(this.id);
}
callback();
};
</script>
</html>
document.getElementById('div1').onclick=function(){
var that=this;
var callback=function(){
alert(that.id);
}
callback();
};
- 构造器调用
var MyClass=function(){
this.name='sven';
};
var obj=new MyClass();
alert(obj.name);
var MyClass=function(){
this.name='sven';
return {
name:'anne';
};
var obj=new MyClass();
alert(obj.name);
}
- Function.prototype.call或Function.prototype.apply调用
var obj1={
name:'sven',
getName:function(){
return this.name;
};
};
var obj2={
name:'anne'
};
console.log(obj1.getName());
console.log(obj1.getName.call(obj2));
- 当使用call或apply的时候,如果我们传入的第一个参数为null,函数体内的this会指向默认的宿主对向,在浏览器中则是window
var func=function(a,b,c){
alert([a,b,c]);
};
func.apply(null,[1,2,3]);
var func=function(a,b,c){
alert([a,b,c]);
};
func.call(null,1,2,3)
- 有时候我们使用call或apply的目的不在于指定this指向,而是另有用途,比如借用其他对象的方法
- 改变this指向
var obj1={
name:'sven'
};
var obj2={
name:'anne'
};
window.name='window';
var getName=function(){
alert(this.name);
};
getName();
getName.call(obj1);
getName.call(obj2);
- 借用其他对象的方法
var A=function(name){
this.name=name;
};
var B=function(){
A.apply(this,arguments);
};
B.prototype.getName=function(){
return this.name;
};
var b=new B('sven');
console.log(b.getName());
(function(){
Array.prototype.push.call(arguments,3);
console.log(arguments);
})(1,2);
- Function.prototype.bind
Function.prototype.bind=function(context){
var self=this;
return function(){
return self.apply(context,arguments);
}
};
var obj={
name:'sven'
};
var func=function(){
alert(this.name);
}.bind(obj);
func();