西北马二最代码的gravatar头像
西北马二最代码 2017-10-19 16:22:30
详细解读JavaScript中的call()方法和apply()方法

版权声明:该博文为博主原创文章,转载时请注明出处。

一、call()方法和apply()方法的区别和联系

    1、这两个方法都是为了改变某个函数运行时的上下文内容而存在的,它是通过改变函数体内this的指向而实现改变context的;

    2、这两个方法的意思完全一样,只是两者传入的参数不相同;

    3、每个函数都包含两个非继承而来的函数:call()方法和apply()方法;

    4、这两个方法的作用完全相同。

二、apply()和call()的构造形式

    1、apply()方法的构造形式:Function.apply(obj,args);

        1.1、obj: 该对象将会代替这个Function类里的this对象;

        1.2、args:这是个数组,这个数组将作为一个参数被传递给,或者说:这是个数组或者类数组,apply方法把这个(Person)集合中的元素作为参数传递给被调用的函数(Teacher);

    先撸一串代码就当是举了个“栗子”:

<!DOCTYPE html>
<html>
<head>
	<title>apply()方法</title>
</head>
<body>
<script type="text/javascript">
	//定义一个人类
	function Person(name,sex){
		this.name = name;
		this.sex = sex;
	}

	//定义一个老师类
	function Teacher(name,sex,age){
		Person.apply(this,arguments);
		this.age = age;
	}

	//实例化一个老师个体
	var teacher = new Teacher("Bob","man","33");
	//进行测试
	alert("name:"+teacher.name+"\n"+"sex:"+teacher.sex+"\n"+"age:"+teacher.age);
	//进过调试,我们发现输出结果为:name:Bob  sex:man    age:33
	//但是我们并没有在老师类里面并没有给name和sex赋值,它为什么会显示有值呐?这就是apply()方
	//法的强大之处
</script> 
</body>
</html>

        1.3、在上面的“栗子”中,因为与Person.apply(this,arguments):

            this:创建对象此时的this指的是“老师类”Teacher;

            arguments:此时的arguments是一个数组,它就是["Bob","man","33"];

            简单的来说,就是让Teacher去执行Person这个类里面的内容,因为在Person类里面有this.name和this.sex等内容,所以当Teacher去执行的时候,这些属性也就加之在Teacher的身上了。

    2、call()方法的构造形式:Function.call(obj,[param1[,param2[,...[,paramN]]]]);

        2.1、obj:这个对象将会代替Function类里的this对象;

        2.2、这是一个参数列表;

        2.3、接上面举得第一个“栗子”,在Teacher函数里面可以将apply()方法修改为:Teacher.call(name,sex,age)这样就ok了。


打赏
最近浏览
西北马二最代码  LV15 2017年10月20日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友