javascript call() and apply() bind()

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 可以传入整个数组。

发布了83 篇原创文章 · 获赞 18 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/Abudula__/article/details/84572584