javascript中Function的两个方法apply()和call()

javascript学到了后面,我逐渐的了解到这两个方法所起的作用,比较大的地方就是应用在对象冒充实现构造函数继承中。

<script type="text/javascript">
	function Box(name, age){
		this.name= name;
		this.age = age;
		this.family = ['哥哥','姐姐']; //引用类型,放在构造里面就不会被共享
	}
	//Box.prototype.family = '家庭'; //不起作用
	function Desk(name, age){
		Box.call(this, name,age);//对象冒充,只能继承构造里的信息
	}
	var desk = new Desk('caibaojian',27);
	alert(desk.family);
	desk.family.push('弟弟');
	alert(desk.family);
	var desk2 = new Desk('jack',22);
	alert(desk2.family);
</script>

当然可能还用在其他方面,不过我还不太明白其作用。 正宗的解释是 call 方法 调用一个对象的一个方法,以另一个对象替换当前对象。 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 网上有一段例子,很好的解释了这个:

<script type="text/javascript"> 
function Obj(){this.value="对象!";} 
var value="global 变量"; 
function Fun1(){alert(this.value);} 

window.Fun1(); //global 变量 
Fun1.call(window); //global 变量 
Fun1.call(document.getElementById('myText')); //input text 
Fun1.call(new Obj()); //对象! 
</script> 
<input type="text" id="myText" value="input text">

至于apply的用法则跟call差不多,只不过里面的参数改为了数组。 并且它还可以使用arguments声明来调用:

<script type="text/javascript"> 
function Box(name, age){
this.name= name;
this.age = age;
this.run = function(){
return this.name+" is "+this.age +" year old";
}
};
function SayBox() {
	Box.apply(this,arguments);
}
var sayBox = new SayBox('qdkfweb.cn',2);
alert(sayBox.run()); // qdkfweb.cn is 2 year old
</script>

通过这样子的书写前提就是超类中的参数顺序与子类中的参数顺序完全一致时才适用。 在JavaScript中应用好这两个方法,能够帮助你省很多时间,特别是在函数的继承和共享方面。本人深入方面还没学习,留待以后继续补充。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流