学习 apply 和 call

gclove 发布于2019-08-21 14:42 / 984人阅读

摘要：官方描述方法在指定值和参数参数以数组或类数组对象的形式存在的情况下调用某个函数。两者基本一致，只有一个区别，就是方法接受的是若干个参数的列表，而方法接受的是一个包含多个参数的数组。

Function.prototype.apply() & Function.prototype.call() 官方描述

apply() 方法在指定 this 值和参数（参数以数组或类数组对象的形式存在）的情况下调用某个函数。fun.apply(thisArg[, argsArray])

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。fun.call(thisArg[, arg1[, arg2[, ...]]])

两者基本一致，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

注意点
thisArg: 在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象，说明thisArg可以不传），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象(Number,String,Boolean)。

温故

以call为例，apply把后面参数转化成数组格式即可

在调用一个存在的函数时，为其指定一个全新的 this 对象（原函数的this对象此次调用被覆盖），并且可以传递参数，

function test(a) {
    console.log(this.one);
    console.log(a)
}
test.call({one:1},2)
//  1
//  2
//我们在test函数执行的时候绑定一个对象 {one:1} 和参数 2

调用父构造函数，实现继承

function a(a) {
    this.a = a
}
function b(b) {
    this.b = b
}
//想要创建一个实例对象拥有a和b里面的属性
function c(a,b){
    //相当于a，b函数执行了一次,所以属性会被创建
    a.call(this,a)
    b.call(this,b)
}
//效果等同于
function c(a,b){
    this.a = a;
    this.b = b
}
var d = new c(1,2);
d会同时用于a,b的属性，这样在涉及到很多属性继承时候就很方便
//c {a: 1, b: 1}

使用call方法调用匿名函数，引用官方示例，其实和1类似

    var animals = [
      {species: "Lion", name: "King"},
      {species: "Whale", name: "Fail"}
    ];
    
    for (var i = 0; i < animals.length; i++) {
      (function (i) { 
        this.print = function () { 
          console.log("#" + i  + " " + this.species + ": " + this.name); 
        } 
        this.print();
      }).call(animals[i], i);
    }
    // #0 Lion: King
    // #1 Whale: Fail

知新（for me）

由于call方法需要穷举所有需要传递的参数，所以只能在已知参数的情况下使用，apply则零活很多，但是接收参数的情况是一样的，apply可以将数组形式默认转化成一个参数列表参数[a,b,c]会以(a,b,c)的形式接收。
举例来说：

//比较一组数据大小
 Math.max(9,2,4,6,7) // 9
 Math.max([9,2,4,6,7]) // NaN
//因为Math.max 方法不能接收一个数组 ,所以我们可以进行遍历
var arr = [9,2,4,6,7],arr_len = arr.length,maxNumber = arr[0];
for(var i = 1 ;i< arr_len ;i++){
maxNumber = Math.max(maxNumber,arr[i])
}
maxNumber // 9
//这样能够达到效果，但是可以有更方便高效的方法：用apply进行改造
 Math.max.apply(null,[9,2,4,6,7]) //9 
//经过apply转化，Math.max此次执行的时候真正接收的参数是  (9,2,4,6,7)
//所以类似这种本来需要写成遍历数组变量的任务 ，都可以用apply执行，Array.prototype.push也是

还有个 bind方法和这两个很类似，可以参考另一篇内容，详细说了bind方法
javascript原生一步步实现bind分析

以上是个人理解，如果有误，感谢指导！

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

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

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

学习JavaScript之this,call,apply

摘要：在全局对象中调用，自然读取的是全局对象的值构造器调用说明作为构造器调用时，指向返回的这个对象。最直观的表现就是，去看一些优秀框架的源代码时，不再是被绕的晕乎乎的。学习起因：在之前的JavaScript学习中，this,call,apply总是让我感到迷惑，但是他们的运用又非常的广泛。遂专门花了一天，来弄懂JavaScript的this,call,apply。中途参考的书籍也很多，以...

wenhai.he 2019-08-19 17:30 评论0 收藏0
前端学习笔记之js中apply()和call()方法详解

摘要：第二行将函数的指向一个字符串第三行将函数的指向一个数字以此类推。再举一个例子实现对象继承继承了的属性和方法陈安东男姓名年龄性别输出姓名陈安东年龄性别男这样用就实现了继承用也类似这里排版不是太好，详情看我的简书经过网上的大量搜索，渐渐明白了apply()和call方法的使用，为此写一篇文章记录一下。定义 apply()方法： Function.apply(obj,args)obj：...

moven_j 2019-08-20 16:20 评论0 收藏0
JS学习笔记 - 代码复用

摘要：本文章记录本人在学习中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。但是在开发的过程中，并不是所有的代码复用都会使用到继承。而且整个代码都无法按照预期来运行。为了修复绑定对象与方法之间的关系。本文章记录本人在学习 JavaScript 中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。 js 中复用代码说道代码复用，一般都会涉及到对...

cheng10 2019-08-21 10:35 评论0 收藏0
Javascript中this与闭包学习笔记

摘要：但是在调用函数值执行之后并没有达到我们想要的效果。解析在这里我们为每一个的事件绑定了一个匿名函数，这个匿名函数就形成了一个闭包。这样我们就为每个的事件的匿名函数，都保存下了自己闭包变量。博客原址理解 Javascript中的this 基于不同的调用方式this的指向也会有所不同，调用方式大致有如下几种：调用方式表达式构造函数调用 new Foo(); 对象方法...

pinecone 2019-08-22 10:34 评论0 收藏0
深入浅出JavaScript之call()、apply()方法

摘要：的作用在中，方法和方法都是为了改变函数运行时上下文而存在的，换句话说就是为了改变函数体内部的指向。欢迎前端大牛纠正错误，如有错误我会及时改正。写在前面：隔了很长时间了，也不知道写点什么。最近一直在研究ES6，一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。 call、apply的作用在JavaScript中，call()方法和apply()方法都是为了...

Cympros 2019-08-20 14:16 评论0 收藏0