【深入理解JS核心技术】3. 调用、应用和绑定有什么区别

我是哪吒
1,387 阅读49分钟

一起养成写作习惯！5月1/31

call, apply, bind之间的区别：

  1. 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
  1. 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
  1. 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(); // red

sayColor.call(this); // red
sayColor.call(window); // red
sayColor.call(o); // blue

使用call()和apply()的好处是可以将任意对象设置为任意函数的作用域，这样对象可以不用关心方法。

未完结！更多内容尽情期待下一节~

【深入理解JS核心技术】欢迎各位观众老爷，求点赞，求关注，求转发~

低调务实优秀中国好青年 (简介) && 附加答案

中文 | English

一个 ☝️ 正经的前端学习 开源 仓库，启发来自 淘宝大佬 @冴羽 ，初心做一个真正能帮助到大家的仓库。一个人可以走的更快，但一群人才能走的更远。（非常口语化的，手写总结）

欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star （此仓库每天都会准时更新）- vx联系: xiaoda0423

👤：我是哪吒： 如果你所学的东西 处于喜欢 才会有强大的动力支撑。

福利 🧧，👏 模拟面试，限时30分钟

首先 感谢 🙏 您的 Star, 模拟面试可以 😌 （我会针对您的个人 👤 年限出题时间为30分钟内，所以请你 把握👌好机会）。最后，一个人可以走的更快，但一群人才能走的更远，和大家一起共勉，多折腾折腾，做一个低调务实优秀的中国好青年

🐤 交流讨论 && 如何学习 && 转载声明 && 帮忙修正以及补充

第一：你可以直接在本仓库阅读即可，阶段性学习。 （可以转载里面的所有知识点用到任何地方，但请添加仓库的地址）有问题欢迎提交issues

🐂 阶段三十一（648）

展开查看

🐂 阶段三十（623）

展开查看

🤨 阶段二十九（598）

展开查看

🤨 阶段二十九（572）

展开查看

😛 阶段二十八（565）

展开查看

😛 阶段二十七（555）

展开查看

😛 阶段二十六（544）

展开查看

😛 阶段二十五（532）

展开查看

😛 阶段二十四（525）

展开查看

😛 阶段二十三（514）

展开查看

📕 阶段二十二（500）

展开查看

😋 阶段二十一（480）

展开查看

✔ 阶段二十（470）

展开查看

😗 阶段十九（460）

展开查看

🐉 阶段十八（450）

展开查看

🐔 阶段十七（440）

展开查看

🐟 阶段十六（425）

展开查看

🦐 阶段十五（401）

展开查看

🦂 阶段十四（384）

展开查看

😘 阶段十三（370）

展开查看

🥰 阶段十二（340）

展开查看

😉 阶段十一（324）

展开查看

🙃 阶段十（306）

展开查看

😍 阶段九（285）

展开查看

🧑🏻 阶段八（250）

展开查看

🧑🏻‍💻 阶段七（215）

展开查看

😇 阶段六（190）

展开查看

🧑🏻‍💻 阶段五（175）

展开查看

🥲 阶段四（150）

展开查看

🧑🏻‍💻 阶段三（145）

展开查看

🤣 阶段二（100）

展开查看

🧑🏻‍💻 阶段一（50）

展开查看

全栈架构师

展开查看

深入理解JS核心技术

NumberTitle
1在 JavaScript 中创建对象的可能方式有哪些
2什么是原型链
3调用、应用和绑定有什么区别
4什么是 JSON 及其常用操作
5数组切片方法的目的是什么
6数组拼接方法的目的是什么
7切片和拼接有什么区别
8你如何比较Object和Map
9[== 和 === 运算符有什么区别]
10[什么是 lambda 或箭头函数]
11[什么是一级函数]
12[什么是一阶函数]
13[什么是高阶函数]
14[什么是一元函数]
15[什么是柯里化函数]
16[什么是纯函数]
17[let 关键字的作用是什么]
18[let 和 var 有什么区别]
19[选择名称let作为关键字的原因是什么]
20[如何在 switch 块中重新声明变量而不会出错]
21[什么是时间死区]
22[什么是 IIFE（立即调用函数表达式）]
23[您如何在 JavaScript 中解码或编码 URL]
24[什么是备忘]
25[什么是吊装]
26[ES6 中的类是什么]
27[什么是闭包]
28[什么是模块]
29[为什么需要模块]
30[javascript中的作用域是什么]
31[什么是服务人员]
32[如何使用 service worker 操作 DOM]
33[如何在 service worker 重启时重用信息]
34[什么是索引数据库]
35[什么是网络存储]
36[什么是发布消息]
37[什么是饼干]
38[为什么需要 Cookie]
39[cookie 中有哪些选项]
40[如何删除 cookie]
41[cookie、本地存储和会话存储有什么区别]
42[localStorage 和 sessionStorage 的主要区别是什么]
43[您如何访问网络存储]
44[会话存储上可用的方法有哪些]
45[什么是存储事件及其事件处理程序]
46[为什么需要网络存储]
47[你如何检查网络存储浏览器支持]
48[你如何检查网络工作者浏览器支持]
49[举个 web worker 的例子]
50[webworkers对DOM有什么限制]
51[什么是承诺]
52[为什么需要承诺]
53[承诺的三种状态是什么]
54[什么是回调函数]
55[为什么我们需要回调]
56[什么是回调地狱]
57[什么是服务器发送事件]
58[您如何接收服务器发送的事件通知]
59[如何检查浏览器对服务器发送事件的支持]
60[服务器发送的事件有哪些可用的事件]
61[承诺的主要规则是什么]
62[什么是回调中的回调]
63[什么是承诺链]
64[什么是promise.all]
65[承诺中比赛方法的目的是什么]
66[什么是javascript中的严格模式]
67[为什么需要严格模式]
68[你如何声明严格模式]
69[双感叹号的目的是什么]
70[删除运算符的目的是什么]
71[什么是 typeof 运算符]
72[什么是未定义属性]
73[什么是空值]
74[null 和 undefined 有什么区别]
75[什么是评估]
76[窗口和文档有什么区别]
77[你如何在javascript中访问历史记录]
78[你如何检测大写锁定键是否打开]
79[什么是 NaN]
80[未声明变量和未定义变量有什么区别]
81[什么是全局变量]
82[全局变量有什么问题]
83[什么是 NaN 属性]
84[isFinite 函数的目的是什么]
85[什么是事件流]
86[什么是事件冒泡]
87[什么是事件捕获]
88[如何使用 JavaScript 提交表单]
89[您如何找到操作系统详细信息]
90[文档加载和 DOMContentLoaded 事件有什么区别]
91[本机，主机和用户对象之间有什么区别]
92[用于调试 JavaScript 代码的工具或技术有哪些]
93[与回调相比，promise 的优缺点是什么]
94[属性和属性有什么区别]
95[什么是同源策略]
96[void 0的目的是什么]
97[JavaScript 是编译型语言还是解释型语言]
98[JavaScript 是区分大小写的语言吗]
99[Java和JavaScript之间有什么关系吗]
100[什么是事件]
101[谁创建了 JavaScript]
102[preventDefault 方法有什么用]
103[stopPropagation 方法有什么用]
104[return false 涉及哪些步骤]
105[什么是物料清单]
106[setTimeout 有什么用]
107[setInterval 有什么用]
108[为什么 JavaScript 被视为单线程]
109[什么是事件委托]
110[什么是 ECMAScript]

👩🏻‍💻：webVueBlog的leetcode刷题📒

  1. Number题号
  2. Title题目
  3. Difficulty难度
  4. Navigation解答
NumberTitleDifficultyNavigation
1.两数之和两数之和
2.两数相加两数相加
3.无重复字符的最长子串无重复字符的最长子串

以 「早起」、「运动」、「冥想」、「写作」、「阅读」这五件能够快速改变人生的事情为切入点，帮助大家建立良好的生活习惯，技术的成长绝不是一朝一夕，良好的习惯将会帮助我们更快的进步，但在技术之外，我更希望大家能在这些事情的坚持中，收获一份自信，多一份底气，对人生多一份积极。 --- （来源：低调务实优秀中国好青年群）

License

MIT

avatar
文章
阅读
粉丝