深入浅出JavaScript之call()、apply()方法

Cympros 发布于2019-08-20 14:16 / 1062人阅读

摘要：的作用在中，方法和方法都是为了改变函数运行时上下文而存在的，换句话说就是为了改变函数体内部的指向。欢迎前端大牛纠正错误，如有错误我会及时改正。

写在前面：

隔了很长时间了，也不知道写点什么。最近一直在研究ES6，一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。

call、apply的作用

在JavaScript中，call()方法和apply()方法都是为了改变函数运行时上下文而存在的，换句话说：就是为了改变函数体内部 this 的指向。
在JavaScript中，也可以说再OOP JavaScript思想编程中，其实最绕的地方就是：函数被定义时的上下文、运行时的上下文、上下文的改变。

我们先来定义一个构造函数(constructor)然后改变指向：

function Fn() {}

Fn.prototype = {
    color:"red",
    say:function () {
        alert(this.color);
    }
};

var fn = new Fn();
fn.say();       //返回red

这是一个很普通的构造函数，给原型new了一个新的对象，然后添加一个属性和方法。那么我们如果要再创建一个对象呢，不想给这个新的对象添加方法怎么去公用上面这个方法呢？

 var Fn1 = {
    color:"yellow"
};

var fn = new Fn();
fn.say.call(Fn1);    //使用call()方法返回yellow
fn.say.apply(Fn1);   //使用apply()方法返回yellow

所以，可以看出 call()和 apply()是为了动态改变 this 而出现的，当一个对象(Object)没有这个方法，但是其他的Fn原型里面有这个方法，我们可以借助call或apply用其它对象的方法来操作。
大家是不是感觉这个call()和apply()没什么差距对吧？

call()方法与apply()方法的差别

对于使用者而言，call与apply的作用完全一样，不过它们接受的参数不一样：
call()方法中的其余的参数必须直接传给函数
apply()接收两个参数：一个参数是在其中运行的作用域,另一个是参数数组(可以是Array实例,也可以是arguments对象).
也可以理解为其实call传参为固定的必须知道你有多少个参数传进去，而apply可以传一个数组。

当明确知道传参数量时使用call()而不确定的时候使用apply()方法然后把参数push进数组传递进去，函数内部也可以通过 arguments 这个数组来遍历所有的参数。

深入理解call与apply

function box(msg)　{
    alert(msg);
}
box(1); //1
box(1,2); //1

上面的这个函数就是没有确定实参数量，这个时候就可以考虑使用call或者apply，刚刚讲过，只有apply在不确定的数量的时候使用最佳。

function box(){
 console.log.apply(console,arguments);
};
box(1); //1
box(1,2); //1 2

这一章差不多就讲完了，其实要点没多少知识点，主要就是充分掌握了技巧与思想，JavaScript就会变的很容易。欢迎前端大牛纠正错误，如有错误我会及时改正。谢谢~

(PS:其实一直不知道写什么，所以这么长时间没更新，如果大家想看JS哪些方面的，在我了解与掌握的前提下还是可以写一写的。我的邮箱:cn_brian@163.com)

GPU云服务器云服务器 apply与call的区别 js中的call和apply JS中bind、call和apply的作 apply()方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81509.html

JavaScript深入之call和apply的模拟实现

摘要：深入系列第十篇，通过和的模拟实现，带你揭开和改变的真相一句话介绍方法在使用一个指定的值和若干个指定的参数值的前提下调用某个函数或方法。如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 JavaScript深入系列第十篇，通过call和apply的模拟实现，带你揭开call和apply改变this的真相 call 一句话介绍 call： call() 方法在使用一个指定的 this...

miya 2019-08-22 11:03 评论0 收藏0
JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
深入JavaScript之call和apply方法

摘要：难兄难弟我是里的方法，我和方法是难兄难弟。有些地方没有咱俩还真不行。我可以改变被调用方法内部的指向指向第一个参数。这个时候我方法就无能为力了，只能让帮你了也可以使用运算符最后我们这对难兄难弟其实一点也不难啊难兄难弟我是js里的call方法，我和apply方法是难兄难弟。为什么这么说呢，因为很多前端小白看到咱俩就犯怵: WTF！这是什么方法，根本看不懂啊！然后去谷歌去百度，回来还是：...

joywek 2019-08-21 17:14 评论0 收藏0
JavaScript 深入之 call 和 apply 的模拟实现

摘要：第一版首先要获取调用的函数，用可以获取的指向为，因为是的实例相当于把挂载到上，所以可以取到测试一下但是第一版不可以传递多个参数第二版这里会自动调用这个方法。 // 第一版 Function.prototype.call2 = function(context) { // 首先要获取调用call的函数，用this可以获取 // this的指向为bar，因为bar是Func...

邱勇 2019-08-23 14:05 评论0 收藏0
JavaScript深入之new的模拟实现

摘要：深入系列第十二篇，通过的模拟实现，带大家揭开使用获得构造函数实例的真相一句话介绍运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一也许有点难懂，我们在模拟之前，先看看实现了哪些功能。 JavaScript深入系列第十二篇，通过new的模拟实现，带大家揭开使用new获得构造函数实例的真相 new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具...

tianlai 2019-08-20 16:17 评论0 收藏0