理解与使用js中的apply()和call()

开始看到JavaScript中的apply和call函数，非常不解。也看过几篇文章但是一到实践用到的时候又遗忘了。本文结合实例，当做笔记记录一下该问题与大家分享。

apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.（具体是什么意思呢？我们看看下面的例子就知道啦）

1.apply()和call()基本认识

apply()在w3c手册是这样描述的：

方法重用

通过 apply() 方法，您能够编写用于不同对象的方法。

call() 和 apply() 之间的区别

不同之处是：

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

简单的来说，call()是apply()的一颗语法糖，作用和 apply() 一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。

一个简单的实例，希望大家也可以理解数据的关系，文末还有一个小问题，知道答案的话也就基本理解了apply啦。

2.apply()和call()使用

使用 apply，你可以继承其他对象的方法：

var max = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(max); // 输出5

注意这里apply()的第一个参数是null，在非严格模式下，第一个参数为null或者undefined时会自动替换为指向全局对象，apply()的第二个参数为数组或类数组。

使用call:

var max = Math.max.call(null, 1, 2, 3, 4, 5);
console.log(max); // 输出5

来看w3c上的示例：

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
// person.fullName.call(person1, "Oslo", "Norway"); // call

以上代码的结果是

image.png

。我们发现对象_person1 _传递到了 _person _的 fullName 方法内，结果能说明：apply()方法能劫持另外一个对象的方法，继承另外一个对象的属性.

再看两个小例子：

（本例子在vue项目中实现）
例1：

test.vue 页面上写一个按钮按钮点击触发 btnclick()，我们可以看到在方法内有一个person类，有一个student类。对比控制台输出，我们可以发现。

最后一行''444444'输出的this，是vue对象。可以理解

student内的this，是当前student对象。也可以理解

person内的this，就是student对象。为什么？

原因是因为在student内apply的使用Person.apply(this,arguments)。此时person.apply把student内当前对象劫持并继承该对象

apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.

btnclick () {
  function Person (name, age) {
    console.log(name, age, '1111111111111') // 控制台输出 jack 24 1111111111111
    console.log(this, '33333333333') // 控制台输出 Student {} "33333333333"
    this.name = name
    this.age = age
  }
  function Student (name, age, grade)  
  {  
    Person.apply(this,arguments)
    console.log(this) // 控制台输出 Student {name: "jack", age: 24}
    console.log(arguments) // 控制台输出 Arguments(3) ["jack", 24, "2年"]
    this.grade = grade;  
  }
  const stu = new Student("jack", 24, "2年")
  console.log(stu, '2222222222') // 控制台输出 Student {name: "jack", age: 24, grade: "2年"} "2222222222"
  console.log(this, '4444444444') // 控制台输出 VueComponent {_uid: 9, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} "4444444444"
}

image

例2：

test.vue 页面上写一个按钮按钮点击触发 btnclick2()，我们可以看到在方法内只有一个person类。对比控制台输出，我们可以发现。

person内的this输出为当前vue对象，与上面对比的不同之处在于，例1中的person.apply()是在student内使用的，而当前例子的person.apply()是在点击按钮方法内直接触发的，所以对象this也就变成了当前对象this，即vue实例。

btnclick2 () {
  function Person (name, age) {
    console.log(name, age, '1111111111111') // 控制台输出 jack 18 1111111111111
    console.log(this, '33333333333')  // VueComponent {_uid: 9, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} "33333333333"
    this.name = name
    this.age = age
  }
  const params = ["jack", 18]
  Person.apply(this,params)
  console.log(this) // VueComponent {_uid: 9, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
}

image

补充：

整文件代码如下，可以看到页面还会输出name,age,grade。

    <template>
        <div class="hello">
            <div>
                <button @click="btnclick()">触发函数</button>
                <button @click="btnclick2()">触发函数2</button>
            </div>
            <div>{{ name }}</div>
            <div>{{ age }}</div>
            <div>{{ grade }}</div>
        </div>
    </template>
    <script>
    export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data () {
        return {
            name: '',
            age: '',
            grade: ''
        }
    },
    methods: {
        btnclick () {
        function Person (name, age) {
            console.log(name, age, '1111111111111')
            console.log(this, '33333333333')
            this.name = name
            this.age = age
        }
        function Student (name, age, grade)  
          {  
            Person.apply(this,arguments)
            console.log(this)
            console.log(arguments)
            this.grade = grade;  
          }
          const stu = new Student("jack", 24, "2年")
          console.log(stu, '2222222222')
          console.log(this, '4444444444')
        },
        btnclick2 () {
          function Person (name, age) {
            console.log(name, age, '1111111111111')
            console.log(this, '33333333333')
            this.name = name
            this.age = age
          }
          const params = ["jack", 18]
          Person.apply(this,params)
          console.log(this)
        }
      }
    }
    </script>

    <style scoped>

    </style>

问：为什么点击第一个按钮时，页面无变化。点击第二个按钮时，页面显示name，age？

image

如何选用：

如果不需要关心具体有多少参数被传入函数，选用apply()
如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用call()

总结

call()和apply()都是用来改变函数执行时的上下文，可借助它们实现继承；
call()和apply()唯一区别是参数不一样，call()是apply()的语法糖

这两个方法很好地体现了js函数式语言特性，在js中几乎每一次编写函数式语言风格的代码，都离不开call和apply，能够熟练运用它们，是真正成为一名jser程序员的重要一步。

本文在本人原始地址: 超人思否