JavaScript教程-33-浅析call()、apply()

最新推荐文章于 2020-04-08 18:15:05 发布

木易yves

最新推荐文章于 2020-04-08 18:15:05 发布

阅读量84

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35938103/article/details/105145975

版权

javascript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

1：每个方法都包含两个非继承来的方法 call 和 apply。

2：这两个方法的主要的作用就是用来设置方法中的this 指代的对象。可能这么说上去比较抽象。我先简单解释一下。任何的方法中都有一个this。上节课我们说过this指代了当前调用方法的对象。可能是window、也可能是某一个对象。那么call 和 apply的作用就是当我们使用某个方法的时候，可以通过call 和 apply 来设置改变方法中的this 指代的对象。

3：带来的好处：

-- 可以让函数的作用域得到了扩充。

-- 可以让函数和对象解耦。

4：看示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>call和apply的使用</title>
		<script type="text/javascript">
			var name = "小刚";
			var age = 19;
			
			//创建一个学生对象，可以使用如下的方式去定义对象的属性和方法
			var stu = {
				name:"小红",
				age:17,
				show:function(){
					alert("age = "+this.age + "  name = "+this.name);
				}
			};
			
			//这里的this，指代的是当前stu 对象。所以 age 和 name ，都是学生对象的属性。
			stu.show();//age = 17  name = 小红
			
			//创建一个新的对象
			var stu1 = {
				name:'小兰',
				age:'16'
			}
			//如果我们希望stu1 也可以使用 stu 的show 方法。可以通过如下的方式进行
			//下面的代码是重点
			stu.show.call(stu1);//age = 16  name = 小兰
			//通过上面的这个例子，我们看到了。show 方法中的this 可以被call 方法设置为了stu1对象。
			
			var stu2 = {
				name:'小马',
				age:'15'
			}
			//同样可以使用 apply 实现上述的效果,输出的效果是一致的。
			stu.show.apply(stu2);//age = 15  name = 小马
			
			
			//call 和 apply 的区别 只在于 对有参数方法的调用。下面看例子。
			function sum(a,b){
				return a + b;
			}
			function add(a,b){
				//这个例子我们只是为了展示有参数的两个方法的区别。
				//我在这里要使用sum方法来实现add 的功能 可以使用如下的方式
				return sum.call(this,a,b);
				
				//如果要使用apply替代call的话是这样的
				//当然两个return 只能保留一个，语法就是这样的
//				return sum.apply(this,[a,b]);
			}
			alert(add(1,2));//3
			
			//总结：call 和 apply的功能是类似的，都是用来重新设置方法中的this指代的对象的。
			//两者的语法不同，第一个参数都是要设置的对象，
			//后续的参数，如果是call方法，那么就将方法的参数逐个写入即可。
			//如果是apply 方法，那么所有的参数都要放到一个数组中才可以。
		</script>
	</head>
	<body>
	</body>
</html>

PS：笔者有大量的学习资料：java、python、大数据、人工智能、前端等。需要的小伙伴请加群：711408961

笔者的b站中有一些教学视频分享。感兴趣的小伙伴可以关注：https://space.bilibili.com/412362068