javascript里万物都是对象,每个函数也是对象,因此对象都有自己的方法,函数方法主要有3个,call()和apply(),bind()。这3个都有一个共同特点就是可以改变函数的执行环境。
<p id="result1"></p>
<p id="result2"></p>
<p id="result3"></p>
<p id="result4"></p>
<script type="text/javascript">
var price=1;
var apple={
price:8,
getPrice:function(){
return this.price;
}
};
var orange={
price:10,
getPrice:function(){
return this.price*2;
}
};
var result1=orange.getPrice();
document.getElementById('result1').innerHTML=result1;
var result2=apple.getPrice.apply(orange);
document.getElementById('result2').innerHTML=result2;
var result3=orange.getPrice.call(this);
document.getElementById('result3').innerHTML=result3;
orange.getPrice=orange.getPrice.bind(apple);
var result4=orange.getPrice();
document.getElementById('result4').innerHTML=result4;
</script>
刚才通过代码演示了这3个方法的使用,现在演示区别。
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"John",
lastName: "Doe",
}
person.fullName.call(person1, "Oslo", "Norway");
效果如下:
这个例子在person1对象里使用了person 对象的fullName()方法,并且传了参数"oslo","Norway" 两个分别的参数。
下面的例子使用了apply方法,并切可以很好的演示call和apply 方法的区别。
<script>
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"John",
lastName: "Doe",
}
var x = person.fullName.apply(person1, ["Oslo", "Norway"]);
document.getElementById("demo").innerHTML = x;
</script>
简单总结的话就是当没有传入参数的时候两个方法都是一样的,当传入参数的时候call 得传入分开的一个个参数,而apply 可以传入整个数组。