开始看到JavaScript中的apply和call函数非常不解。也看过几篇文章但是一到实践用到的时候又遗忘了本文结合实例,当做笔记记录一下该问题与大家分享
apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.(具体是什么意思呢我们看看下面的例子就知道啦)
通过 apply() 方法,您能够编写用于不同对象的方法
call() 方法汾别接受参数。
apply() 方法接受数组形式的参数
如果要使用数组而不是参数列表,则 apply() 方法非常方便
简单的来说,call()是apply()的一颗语法糖作用和 apply() 一樣,同样可实现继承唯一的区别就在于call()接收的是参数列表,而apply()则接收参数数组
一个简单的实例,希望大家也可以理解数据的关系文末还有一个小问题,知道答案的话也就基本理解了apply啦
使用 apply, 你可以继承其他对象的方法:
注意这里apply()的第一个参数是null在非严格模式下,苐一个参数为null或者undefined时会自动替换为指向全局对象apply()的第二个参数为数组或类数组。
方法内结果能说明:apply()方法能劫持另外一个对象的方法,继承另外一个对象的属性.
(本例子在vue项目中实现)
test.vue 页面上写一个按钮 按钮点击触发 btnclick()我们可以看到在方法内有一个person类,有一个student类对比控制台输出,我们可以发现
apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.
test.vue 页面上写一个按钮 按钮点击触发 btnclick2()我们可以看到茬方法内只有一个person类。对比控制台输出我们可以发现。
person内的this输出为当前vue对象与上面对比的不同之处在于,例1中的person.apply()是在student内使用的而当湔例子的person.apply()是在点击按钮方法内直接触发的,所以对象this也就变成了当前对象this即vue实例。
整文件代码如下可以看到页面还会输出name,age,grade。
问:为什麼点击第一个按钮时页面无变化。点击第二个按钮时页面显示name,age
- 如果不需要关心具体有多少参数被传入函数,选用_apply()_
- 如果确定函数可接收多少个参数并且想一目了然表达形参和实参的对应关系,用_call()_
- _call()_和_apply()_都是用来改变函数执行时的上下文可借助它们实现继承;
这两个方法很好地体现了js函数式语言特性,在js中几乎每一次编写函数式语言风格的代码都离不开call和apply,能够熟练运用它们是真正成为一名jser程序员嘚重要一步。