今天学习的是 apply 和 call, 他们是我们作为前端入门必须掌握的知识点, 废话不多说开始我们今天的学习之路
1.apply 和 call 是什么?
apply 和 call 是 function 对象中的两个方法.
2. 什么场景下面我们需要使用到 apply 和 call?
举个例子我们有两个对象 A 和 B, 在对象 A 中有一个方法 C,A 对象经常使用方法 C,B 偶尔会使用到方法 C, 此时为了节约资源, 减少冗余代码我们不会在 B 中在写一个方法 C, 而是直接使用 B 调用 A 中的方法 C, 在这样的场景下面我们就会使用到 apply 和 call.
3.apply 和 call 的定义?
从我们的第二个问题我们可以大概知道, apply 和 call 就是改变当前对象的作用域, B 能够访问 A 中的方法 C, 在这里我们称作 B 改变了 A 中的 this 指向, 相当于将 A 对象中函数 C 的上下文修改为 B.
官方的定义:
apply: 调用一个对象的一个方法, 用另一个对象替换当前对象. 例如: B.apply(A, arguments); 即 A 对象调用 B 对象的方法.
call: 调用一个对象的一个方法, 用另一个对象替换当前对象. 例如: B.call(A, args1,args2); 即 A 对象调用 B 对象的方法.
从官方的定义我们能够看出 apply 和 call 的唯一区别在于, 他们的参数不同, apply 接收两个参数, 第一个参数为要改变的原函数的上下文, 第二个参数为替换原函数的参数, 我们需要注意的是第二个参数必须是数组. call 可以接收多个参数, 第一个参数是要改变的原函数的上下文, 第二个参数和以后的参数为要替换原函数的参数
4.apply 和 call 的实际使用
apply 和 call 的实际使用我将通过举例实战的方式来讲解
- var A = {
- name: "AAA",
- fn: function(skill) {
- this.skill = skill;
- console.log("my name is" + this.name + ", my skills are" + this.skill);
- }
- }
- var B = {
- name: "BBB"
- }
- A.fn("sing"); //my name is AAA, my skills are sing
- B.fn("dance"); //Uncaught TypeError: B.fn is not a function;
在这段代码我们能够看到 B 直接调用 A 中的 fn 是会报错的, 因为 B 中并没有 A 中 fn 方法, 接下来我们使用 apply 和 call 实现 B 能调用 fn 方法
- var A = {
- name: "AAA",
- fn: function(skill) {
- this.skill = skill;
- console.log("my name is" + this.name + ", my skills are" + this.skill);
- }
- }
- var B = {
- name: "BBB"
- }
- A.fn("sing"); //my name is AAA, my skills are sing
- //B.fn("dance"); //Uncaught TypeError: B.fn is not a function;
- A.fn.apply(B,["dance"])//my name is BBB, my skills are dance
- A.fn.call(B,'dance21')//my name is BBB, my skills are dance21
在执行 A 对象的函数 fn 时, 通过 apply 将函数 fn 的执行上下文 (this) 暂时修改为对象 B, 此时 fn 中的 this 指向对象 B, 同时修改原函数 fn 的参数为 "dance"(注意 "dance" 参数必须是数组的形式),call 方法自动执行改变之后的原函数
来源: http://www.bubuko.com/infodetail-2977458.html