【深入理解JS核心技术】3. 调用、应用和绑定有什么区别
一起养成写作习惯!5月1/31
call, apply, bind之间的区别:
call()方法调用一个给定this值和参数一一提供的函数。
var person = { lastName: '哪吒' };function invite(greeting1, greeting2) {console.log(greeting1 + " " + this.lastName + " " + greeting2);
}invite.call(person, "Hello", "How are you"); // Hello 哪吒 How are you
复制代码
apply()使用给定值调用函数this并允许您将参数座位数组传递
apply()方法会接收两个参数:函数内this的值和一个参数数组。第二个参数可以是Array的实例,也可以是arguments对象。
function sum(num1, num2) {return num1 + num2;
}function callSum1(num1, num2) {return sum.apply(this, arguments); // 传入arguments对象
}function callSum2(num1, num2) {return sum.apply(this, [num1, num2]); // 传入数组
}console.log(callSum1(10, 10)); // 20
console.log(callSum2(10, 10)); // 20
复制代码
var person = { lastName: '哪吒' };function invite(greeting1, greeting2) {console.log(greeting1 + " " + this.lastName + " " + greeting2);
}invite.apply(person, ["Hello", "How are you"]); // Hello 哪吒 How are you
复制代码
bind()返回一个新函数,允许您传递任何数量的参数
ES5定义一个新方法:bind()。(bind方法会创建一个新的函数实例,其this值会被绑定到传给bind()的对象)
var employee1 = { firstName: "a", lastName: "aa" };
var employee2 = { firstName: "d", lastName: "dd" };function invite(greeting1, greeting2) {console.log(greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2);
}var inviteEmployee1 = invite.bind(employee1); // 创建新函数并绑定对象
var inviteEmployee2 = invite.bind(employee2);
inviteEmployee1("Hello", "How are you?"); // Hello a aa, How are you?
inviteEmployee2("Hello", "How are you?"); // Hello d dd, How are you?
复制代码
call和apply是可以互换的,两者都立即执行当前函数。您需要决定是否更容易发送数组或逗号分隔的参数列表。而bind创建一个新的函数,该函数将this设置为传递给bind()的第一个参数。
call()和apply()方法都会以指定的this值来调用函数,即会设置调用函数时函数体内this对象的值。call()和apply()真正强大的地方并不是给函数传参,而是控制函数 调用上下文 即函数体内this值的能力。
window.color = "red";
let o = {color: 'blue'
};function sayColor() {console.log(this.color);
}sayColor(); // redsayColor.call(this); // red
sayColor.call(window); // red
sayColor.call(o); // blue
复制代码
使用call()和apply()的好处是可以将任意对象设置为任意函数的作用域,这样对象可以不用关心方法。
未完结!更多内容尽情期待下一节~
【深入理解JS核心技术】欢迎各位观众老爷,求点赞,求关注,求转发~
低调务实优秀中国好青年 (简介) && 附加答案
中文 | English
一个 ☝️ 正经的前端学习 开源 仓库,启发来自 淘宝大佬 @冴羽 ,初心做一个真正能帮助到大家的仓库。一个人可以走的更快,但一群人才能走的更远。(非常口语化的,手写总结)
欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个Star (此仓库每天都会准时更新)- vx联系: xiaoda0423
【深入理解JS核心技术】3. 调用、应用和绑定有什么区别相关推荐
- 【深入理解JS核心技术】2. 什么是原型链?
原型链是用于在现有对象的基础上构建新类型的对象.它类似于基于类的语言中的继承. 对象实例的原型可以通过 Obeject.getPrototypeOf(object) 或 proto 属性获得,而构造函 ...
- node源码详解(四) —— js代码如何调用C++的函数
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4 本博客同步在https://cnodejs. ...
- 彻底理解js中this
相关博文:http://blog.csdn.net/libin_1/article/details/49996815 彻底理解js中this的指向,不必硬背. 首先必须要说的是,this的指向在函数定 ...
- 深入理解js的执行机制
写在前面 javascript在浏览器中被浏览器的js引擎执行解释,从执行上下文的角度分析一下js的执行机制 执行上下文 执行上下文被定义成javascript引擎在处理理解js代码时,所创建的一个动 ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
- 【学习笔记】深入理解js原型和闭包(11)——执行上下文栈
继续上文的内容. 执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境.当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境.处于活动状态的执行 ...
- 理解JS的6种继承方式
[转]重新理解JS的6种继承方式 写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面 ...
- 深入理解Js中的this
深入理解Js中的this JavaScript作用域为静态作用域static scope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及 ...
- js原型和原型链_理解JS中的原型和原型链
导读:JavaScript中(JS)的原型和原型链是web前端开发面试中经常被问到的问题:同时,如果我们能很好的理解JS中的原型和原型链,对于控制台输出的很多信息我们也能更好的理解,而原型链也是实现继 ...
- 【学习笔记】深入理解js原型和闭包(9)—— 简述【执行上下文】下
继续上一篇文章(https://www.cnblogs.com/lauzhishuai/p/10078231.html)的内容. 上一篇我们讲到在全局环境下的代码段中,执行上下文环境中有如何数据: 变 ...
最新文章
- python3基础知识点总结_python基础知识点总结
- 用.Net Reactor5打包加密dll文件和exe程序
- centos设置java环境变量,CentOS设置环境变量
- 云服务器怎么创建子网,如何使用ECS实例子网划分和子网掩码
- Leetcode-121. 买卖股票的最佳时机
- Kubernetes APIServer机制概述
- Linux 命令之 gunzip -- 用来解压缩文件
- html表单不允许修改,[问题]如何在表单里定义(form)仅仅可读,不可修改的列?
- C++:05---class和struct
- HCNA——RIP简单介绍及基本配置
- SQL server 2008 中的五个系统数据库详解
- VScode中文注释乱码问题解决
- 全渠道零售中台与数字化转型(1)-中台的前世今身
- Android微信登录
- 太励志!北大物业小哥六战法考终上岸
- 机器学习实战(一)——员工离职预测
- 推杆如妻子,发球木如情人,短铁如父母,球道木如朋友,长铁如兄弟
- 关键点检测之直接回归(逐行手撕Pytorch)
- 一文弄懂BIN、HEX、AXF、ELF文件格式的区别
- 计算机学院品牌活动,计算机学院研究生会举办十佳健康品牌活动
热门文章
- HTML5 webSQL查看表结构
- 如何制作学术Poster?
- 如何在计算机里打开ps,传授电脑psd文件用什么软件打开
- CMMI3认证升级CMMI5认证需满足的基本条件
- 微信小程序 vs 支付宝小程序(钉钉小程序) 区别 api大全
- 软件开发系统类别记录
- WebAPI HelpPage出现Failed to generate the sample for media type 'application/x-www-form-urlencoded'. 错
- 北卡罗来纳大学遗传算法工具箱
- 【Unity】替换场景、Prefab字体 工具类
- 简述对互联网产品经理的认识