在JavaScript中我们经常要使用到this关键字,但是有时候this的指向总是让我们搞不明白,理不清楚。总之刚开始接触的时候直接是一头雾水,当然this指向都没法搞清楚,那么就很难判断出很多代码输出的结果。比如以下代码中,大家可以猜一猜this指向的是谁?
[cc lang=”javascript”]function getUrl(){
console.log(this)
}
getUrl()[/cc]
以上代码中很简单的一个例子,其实我们打印出来后this指向的是window对象
然而这并没有什么卵用,最多就是我们知道了this的指向。由此JavaScript中就出现了call、apply方法,这两个方法主要是用于动态改变this指向的,他们的使用方法一样,只不过是传递的参数不一样罢了。
使用方法:
如果call或apply的第一参数是null的话, this指向window
[cc lang=”javascript”]obj.myFunc();
myFunc.call(obj,arg);//以参数的方式进行传递
myFunc.apply(obj,[arg1,arg2..]);//以数组的方式进行传递[/cc]
1、动态改变this指向
[cc lang=”javascript”]function changeStyle(attr, value){
this.style[attr] = value;
}
var box = document.getElementById(‘box’);
window.changeStyle.call(box,”height”,”200px”)
window.changeStyle.apply(box,[‘height’,’200px’])[/cc]
以上代码都是直接将this指向了box对象
2、使用call以及apply实现继承
[cc lang=”javascript”]var pepole = function(){
this.name = ‘jack’;
this.sex = ‘M’
}
var man = {}
pepole.call(man)
console.log(man) //{name: “jack”, sex: “M”}[/cc]
man继承了pepole对象的属性