bind与call和apply的区别

时间: 2023-05-03 18:02:38 浏览: 111

前端大厂最新面试题-bind_call_apply.docx

前端大厂最新面试题-bind_call_apply _bind、call、apply 是 JavaScript 中的三个函数方法，用于改变函数的执行上下文，即改变函数中的 this 指向。下面我们将详细讲解这三个方法的使用和区别。作用 _bind、call、apply 三者都是改变函数执行时的上下文，也就是改变函数中的 this 指向。例如，以下代码中，say 方法输出的结果不同，因为 this 指向不同： ```javascript var name = "lucy"; var obj = { name: "martin", say: function() { console.log(this.name); } }; obj.say(); // martin，this 指向 obj 对象 setTimeout(obj.say, 0); // lucy，this 指向 window 对象 ``` 在 setTimeout 中，say 方法作为回调函数执行时，在全局执行上下文中执行，因此 this 指向 window 对象。我们实际需要的是 this 指向 obj 对象，这时候就需要改变 this 指向。区别 apply、call、bind 三者的使用方法如下： apply * 接受两个参数，第一个参数是 this 的指向，第二个参数是函数接受的参数，以数组的形式传入 * 改变 this 指向后，原函数会立即执行 * 如果第一个参数为 null、undefined，则默认指向 window（在浏览器中） ```javascript function fn(...args) { console.log(this, args); } let obj = { myname: "张三" }; fn.apply(obj, [1, 2]); // this 会变成传入的 obj，传入的参数必须是一个数组 fn(1, 2); // this 指向 window ``` call * 第一个参数也是 this 的指向，后面传入的是一个参数列表 * 改变 this 指向后，原函数会立即执行 * 如果第一个参数为 null、undefined，则默认指向 window（在浏览器中） ```javascript function fn(...args) { console.log(this, args); } let obj = { myname: "张三" }; fn.call(obj, 1, 2); // this 会变成传入的 obj，传入的参数必须是一个数组 fn(1, 2); // this 指向 window ``` bind * 第一参数也是 this 的指向，后面传入的是一个参数列表 * 改变 this 指向后，不会立即执行，而是返回一个永久改变 this 指向的函数 ```javascript function fn(...args) { console.log(this, args); } let obj = { myname: "张三" }; const bindFn = fn.bind(obj); // this 也会变成传入的 obj bindFn(1, 2); // this 指向 obj fn(1, 2); // this 指向 window ``` 实现 bind 实现 bind 的步骤可以分解成为三部分： * 修改 this 指向 * 动态传递参数 * 兼容 new 关键字整体实现代码如下： ```javascript Function.prototype.myBind = function(context) { // 判断调用对象是否为函数 if (typeof this !== "function") { throw new TypeError("Bind must be called on a function"); } // 保存当前函数 let self = this; // 保存参数 let args = Array.prototype.slice.call(arguments, 1); // 返回绑定 this 的函数 return function() { // 保存当前的参数 let bindArgs = Array.prototype.slice.call(arguments); // 合并参数 let finalArgs = args.concat(bindArgs); // 调用原函数 return self.apply(context, finalArgs); }; } ``` _bind、call、apply 三者都可以改变函数的 this 对象指向，但它们的使用方法和返回结果不同。其中，apply 和 call 会立即执行，而 bind 返回一个永久改变 this 指向的函数。

bind、call和apply都是JavaScript中用于调用函数的方法，它们的区别如下： 1. bind方法会创建一个新函数，并将其绑定到指定的对象上。bind的第一个参数是新函数的上下文(this指向)，后面的参数是新函数调用时传递的参数，返回值是一个新函数。 2. call方法会在指定的上下文下调用函数，并将所有参数传递给该函数。call的第一个参数是函数的上下文(this指向)，后面的参数是函数调用时传递的参数，返回值是函数的执行结果。 3. apply方法与call方法非常类似，唯一的区别是传入参数的方式不同。apply方法的第二个参数必须是一个数组，其中包含函数调用时的参数列表。返回值是函数的执行结果。

阅读全文

bind与call和apply的区别

相关推荐

JavaScript call, apply, bind 深度解析与实战示例

理解JavaScript：this、apply、call与bind全面解析

bind，call和apply的区别

bind、call、apply 区别

bind,call和apply

bind、call、apply区别?如何实现一个bind?

前端面试进阶：变量提升与bind/call/apply详解

bind和call apply的区别

bind、call、apply的区别

bind,call,apply的区别

bind,call,apply 的区别？

12. Bind，call，apply的区别

bind、call或者apply方法。区别

bind, call, apply是什么

使用bind、call或者apply方法

bind，call，apply改变this的操作区别

call bind apply区别

bind apply call区别

掌握Javascript apply、call与bind的实战应用与区别

最新推荐

基于Flask，mysql slope one的图书推荐系统全部资料+详细文档.zip

舰艇2 glb模型文件，航空母舰glb模型（亲测可用） 效果图见描述

HengCe-18900-2024-2030中国聚乙烯醇缩丁醛市场现状研究分析与发展前景预测报告-样本.docx

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

流程控制与循环结构详解：J750编程逻辑构建指南

舰艇2 glb模型文件，航空母舰glb模型（亲测可用）效果图见描述

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序