不得不知call()和apply()

一.简介

本文结合基本javascript的权威书籍中的内容,根据自己的理解,通过相关示例向大家展示了javascript中call,apply使用及区别,希望大家能够喜欢,如有不足,也希望提出建议,大家共同进步。

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

apply() 方法在指定 this值和参数(参数以数组或伪数组的形式存在)的情况下调用某个函数。

注意:这两种方法很类似,只有一个区别,就是call()法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组及伪数组

二.基础语法

fun.call(thisArg,arg1,arg2...)

fun.apply(thisArg,[argArray1, argArray2...])

三.参数

  1.call()的参数:

    1).thisArg
  在函数运行时第一个参数是指定的this的值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向  全局对象(浏览器中就是window对象),同时值为基本数据类型时(数字,字符串,布尔值)的this会指向该基本数据类型的自动包装对象。
    2).arg1, arg2, ...
 
2.apply()的参数:
 1).thisArg
在函数运行时第一个参数是指定的this的值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null或undefined时会自动指向全象
浏览器中就是(window对象),同时值为基本数据类型时(数字,字符串,布尔值)的this会指向该基本数据类型的自动包装对象。
 2).argsArray
一个数组或者是伪数组,其中的数组元素将作为单独的参数传给函数。如果该参数的值null或undefined,则表示不需要传入任何参数。但是使用伪数组时,要考虑兼容性问题。

四.返回值

返回结果包括制定的this值和参数。

五.示例

下面列举一下这两种方法的常用场景。

1.使用call方法调用构造函数

在一个子构造函数中,你可以通过调用父构造函数的call方法来实现继承.下例中,使用Student构造函数创建的对象实例都会拥有在Person构造函数中添加的name属性和age属性,但study属性是在构造函数中定义的。

  function Person(name,age){

    this.name=name;

    this.age=age;

  }

  function Student(name,age){

    Person.call(this,name,age);

    this.study="math";

}

var excellent=new Student("李四",20)

console.log(excellent)  // Student {name: "李四", age: 20, study: "math"}

2.使用apply和内置对象

聪明的apply用法允许你在某些本来需要写成遍历数组变量的任务中使用内建的函数(内置对象)。在接下里的例子中我们会使用Math.max/Math.min来找出一个数组中的最大/最小值。

  var numbers=[2,3,7,8,6]

  var max=Math.max.apply(,null,numbers)

  var min=Math.min.apply(,null,numbers)

  console.log(max) //8

  console.log(min) //2

六.总结

  1.可以让call()中的对象调用当前对象所拥有的function。你可以使用call()来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。

  2.在调用一个存在的函数时,你可以为其第一个参数指定一个this对象。this指当前对象,也就是正在调用这个函数的对象。使用apply(), 你可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。apply()与call()非常相似,不同之处在于提供参数的方式。apply()使用参数数组而不是一组参数列表。apply()可以使用数组或伪数组

  3.你也可以使用arguments对象作为 argsArray参数。 arguments是一个函数的局部变量。 它可以被用作被调用对象的所有未指定的参数。 这样,你在使用apply函数的时候就不需要知道被调用对象的所有参数。你可以使用arguments来把所有的参数传递给被调用对象。 被调用对象接下来就负责处理这些参数。

  4.从 ECMAScript 第5版开始,可以使用任何种类的伪数组(类数组对象),需要注意:Chrome 14 以及 Internet Explorer 9 仍然不接受伪数组。如果传入伪数组,它们会抛出异常。

原文地址:https://www.cnblogs.com/lbweb/p/5948853.html