如何理解和熟练运用js中的call及apply

kuangcaibao 发布于2019-08-20 14:14 / 3380人阅读

摘要：用的比较多的，通过选择的节点是一种类似的。它不能应用下的等方法。和都是为了改变某个函数运行时的即上下文而存在的，换句话说，就是为了改变函数体内部的指向。这些的话也就能明白它俩的用处以及它们定义。

要明白call以及apply 首先得知道他们的用法如何有什么用

    function cat() {}
        cat.prototype = {
            food: "fish",
            say: function () {
                alert("I love " + this.food);
            }
        }
        var blackCat = new cat;
        blackCat.say();

但是如果我们有一个对象whiteDog = {food:"bone"},我们不想对它重新定义say方法，那么我们可以通过call或apply用blackCat的say方法：blackCat.say.call(whiteDog);

所以，可以看出call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

用的比较多的，通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过：

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
这样domNodes就可以应用Array下的所有方法了。

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

二者的作用完全一样，只是接受参数的方式不太一样。例如，有一个函数 func1 定义如下：

    var func1 = function(arg1, arg2) {};

就可以通过 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 来调用。其中 this 是你想指定的上下文，他可以任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数。

这些的话也就能明白它俩的用处以及它们定义。

我也是从知乎大牛的回答里面看到然后总结下来的。

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

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

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

理解JavaScript中的call,apply和bind方法

摘要：输出的作用与和一样，都是可以改变函数运行时上下文，区别是和在调用函数之后会立即执行，而方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。这几个方法...

chaosx110 2019-08-26 12:23 评论0 收藏0
从一行等式理解JS当中的call, apply和bind

摘要：所以，这篇文章将通过一段非常简洁的等式，把当中一个相对较难的知识点，，和给串联起来要理解当中的这三个关键字，首先得弄清楚它们是用来干嘛的。方案让吃掉，直接消化吸收的所有能力。关于JS当中的call，apply和bind，相信大家和我一样，已经看过了无数篇相关的文章，都有自己的理解。所以这篇文章并非什么科普类的文章，仅仅是把我自己的理解记录下来。我的学习习惯，是喜欢把各种看似孤立的知...

CarterLi 2019-08-22 16:01 评论0 收藏0
VQuery-封装自己的JQuery

摘要：无参数当前当前文档中其所在在位置从开始工具函数函数函数包装器可以不用了工具函数通过类名来选取元素父级对象类名获取到的节点数组事件添加函数需要绑定事件的对象事件类型事件触发执行的函数标准修改下指向的问题最后选择 VQuery-封装自己的JQuery 标签（空格分隔）： JS 封装自己的jQuery--vQuery vQurey选择器 VQuery类 elements属性,存储选择的元素...

EdwardUp 2019-08-21 10:48 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研...

罗志环 2019-08-23 17:08 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研发体系...

isaced 2019-05-21 19:50 评论0 收藏0