1. 90前端首页
  2. 前端开发
  3. JavaScript

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

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

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

apply()和call()基本认识

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

方法重用

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

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

不同之处是:

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

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

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

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

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

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

以上代码的结果是

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

。我们发现 对象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\"
}

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

​例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, …}
}

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

补充:

整文件代码如下,可以看到页面还会输出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?

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

如何选用:

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

总结

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

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

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022074202

展开阅读全文

发表评论

登录后才能评论