新手理解 apply 和 call
栏目: JavaScript · 发布时间: 5年前
内容简介:本文仅适合新手, 我是说很新的那种, 旨在和大家共同了解js的call和apply方法. 笔者水平有限, 文中不免会有疏漏, 大神请轻喷.apply 和 call 都是 JS 函数对象的原型方法, 因此我们可以在任何的函数调用这两个方法, 主要作用就是使得对象能够借用到本来不属于他的方法(就是对象的本领). 有点懵逼是不是? 下边我们来举个栗子.假设我们有一只喵星人:
本文仅适合新手, 我是说很新的那种, 旨在和大家共同了解js的call和apply方法. 笔者水平有限, 文中不免会有疏漏, 大神请轻喷.
开始说正事
apply 和 call 都是 JS 函数对象的原型方法, 因此我们可以在任何的函数调用这两个方法, 主要作用就是使得对象能够借用到本来不属于他的方法(就是对象的本领). 有点懵逼是不是? 下边我们来举个栗子.
狗急跳墙
假设我们有一只喵星人:
const cat = { // 它的名字叫 cat name: 'cat', // 它可以跑 run() { console.log(`${this.name} can run`) }, // 还可以跳(包括跳墙是可以的) jump() { console.log(`${this.name} can jump`) } } 复制代码
同时, 它还有一个小伙伴汪星人:
const dog = { // 汪星人叫 dog name: 'dog', // 会跑 run() { console.log(`${this.name} can run`) }, // 还会吠 bark() { console.log(`${this.name} bark loudly`) }, // 马戏团的:dog:, 还会做算数 count(a, b) { console.log(`${a} + ${b} = ${a + b}`) } } 复制代码
不难发现, 猫狗各有所长. 猫咪可以跳墙, 但是 :dog::dog: 可以吠叫. 假如, 现在的情况提别紧急, 紧急到了什么地步呢. 大家都要到墙头上才能保证安全. 这个时候猫咪直接
cat.jump() 复制代码
成功翻上墙头.
然而, 现在 :dog::dog: 就尴尬了. 跳上墙头??? 不会
就一个 bark()
喊半天也没有用呀!!!
这个时候 apply 就派上用场了. 我们执行
cat.jump.apply(dog) 复制代码:dog::dog: 也顺利脱险啦. 跳上了墙头, 狗狗欢快的
bark()
这时候猫咪不乐意了, 它也想吠叫, 但是没有这个本领. 这时候:dog::dog:也大方的借出了自己的 bark 本领给了猫咪.
dog.bark.apply(cat) 复制代码
两只小可爱欢快的在墙头上叫起来 ^_^.
apply方法的原理
apply方法可以当作是一种方法的借调: 也就是说把某个方法引用到不包含它的某个对象上. 方法(函数)是用来被对象调用才能够执行的, 而apply恰恰指向了调用当前方法的对象. 初学者可能会误认为apply是对向继承了之前引用的方法. 然而, 这里不太建议这样理解. 我们可以再次利用狗狗对象调用jump方法, 得到的结果如下图所示:
狗狗, 并没有学会 jump 的本领, 它只是在紧急时刻借用了猫咪的跳墙方法.
需要参数
我们知道我们的 :dog::dog: 来自马戏团, 具备了算数的能力. 不信试试?
dog.count(1, 2) 复制代码
简直了不得, 有木有? 然而, 喵星人现在也想要去马戏团. 可是它不会算数, 就需要从汪星人那里借来 count
本领. 那么就尴尬了.
既然要算加法, 就需要把两个加数给人家嘛. 怎么给呢? 只需要把 count
方法需要的参数拼接到一个数组里就可以啦. 就像酱紫.
以上所述就是小编给大家介绍的《新手理解 apply 和 call》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 新手理解的JS原型链
- 新手对React生命周期的理解
- Vuex新手的理解与使用 原 荐
- 关于跨域和jsonp的一些理解(新手向)
- 新手入门:零基础理解大型分布式架构的演进历史、技术原理、最佳实践
- Kubernetes新手指南
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。