【转载】JavaScript 之 call和apply，bind 的模拟实现

于 2024-05-16 02:11:47 发布
阅读量592 收藏 11
点赞数 20
分类专栏： 程序员 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84092727/article/details/138932300
版权

context.fn = this;

var args = [];

for(var i = 1, len = arguments.length; i < len; i++) {

args.push(‘arguments[’ + i + ‘]’);

}

eval(‘context.fn(’ + args +‘)’);

delete context.fn;

}

// 测试一下

var foo = {

value: 1

};

function bar(name, age) {

console.log(name)

console.log(age)

console.log(this.value);

}

bar.call2(foo, ‘kevin’, 18);

// kevin

// 18

// 1

(๑•̀ㅂ•́)و✧

模拟实现第三步

模拟代码已经完成 80%，还有两个小点要注意：

1.this 参数可以传 null，当为 null 的时候，视为指向 window

举个例子：

var value = 1;

function bar() {

console.log(this.value);

}

bar.call(null); // 1

虽然这个例子本身不使用 call，结果依然一样。

2.函数是可以有返回值的！

举个例子：

var obj = {

value: 1

}

function bar(name, age) {

return {

value: this.value,

name: name,

age: age

}

}

console.log(bar.call(obj, ‘kevin’, 18));

// Object {

// value: 1,

// name: ‘kevin’,

// age: 18

// }

不过都很好解决，让我们直接看第三版也就是最后一版的代码：

// 第三版

Function.prototype.call2 = function (context) {

var context = context || window;

context.fn = this;

var args = [];

for(var i = 1, len = arguments.length; i < len; i++) {

args.push(‘arguments[’ + i + ‘]’);

}

var result = eval(‘context.fn(’ + args +‘)’);

delete context.fn

return result;

}

// 测试一下

var value = 2;

var obj = {

value: 1

}

function bar(name, age) {

console.log(this.value);

return {

value: this.value,

name: name,

age: age

}

}

bar.call(null); // 2

console.log(bar.call2(obj, ‘kevin’, 18));

// 1

// Object {

// value: 1,

// name: ‘kevin’,

// age: 18

// }

到此，我们完成了 call 的模拟实现，给自己一个赞 ｂ（￣▽￣）ｄ

apply的模拟实现

apply 的实现跟 call 类似，在这里直接给代码，代码来自于知乎 @郑航的实现：

Function.prototype.apply = function (context, arr) {

var context = Object(context) || window;

context.fn = this;

var result;

if (!arr) {

result = context.fn();

}

else {

var args = [];

for (var i = 0, len = arr.length; i < len; i++) {

args.push(‘arr[’ + i + ‘]’);

}

result = eval(‘context.fn(’ + args + ‘)’)

}

delete context.fn

return result;

}

​

类数组转对象

在上面的例子中已经提到了一种类数组转数组的方法，再补充三个：

var arrayLike = {0: ‘name’, 1: ‘age’, 2: ‘sex’, length: 3 }

// 1. slice

Array.prototype.slice.call(arrayLike); // [“name”, “age”, “sex”]

// 2. splice

Array.prototype.splice.call(arrayLike, 0); // [“name”, “age”, “sex”]

// 3. ES6 Array.from

Array.from(arrayLike); // [“name”, “age”, “sex”]

// 4. apply

Array.prototype.concat.apply([], arrayLike)

要说到类数组对象，Arguments 对象就是一个类数组对象。

在客户端 JavaScript 中，一些 DOM 方法(document.getElementsByTagName()等)也返回类数组对象。

传递参数

将参数从一个函数传递到另一个函数

// 使用 apply 将 foo 的参数传递给 bar

function foo() {

bar.apply(this, arguments);

}

function bar(a, b, c) {

console.log(a, b, c);

}

foo(1, 2, 3)

强大的ES6

使用ES6的 … 运算符，我们可以轻松转成数组。

function func(…arguments) {

console.log(arguments); // [1, 2, 3]

}

func(1, 2, 3);

bind

一句话介绍 bind:

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

由此我们可以首先得出 bind 函数的两个特点：

返回一个函数

可以传入参数

返回函数的模拟实现

从第一个特点开始，我们举个例子：

var foo = {

value: 1

};

function bar() {

console.log(this.value);

}

// 返回了一个函数

var bindFoo = bar.bind(foo);

bindFoo(); // 1

关于指定 this 的指向，我们可以使用 call 或者 apply 实现，关于 call 和 apply 的模拟实现，可以查看《JavaScript深入之call和apply的模拟实现》。我们来写第一版的代码：

// 第一版

Function.prototype.bind2 = function (context) {

var self = this;

return function () {

self.apply(context);

}

}

传参的模拟实现

接下来看第二点，可以传入参数。这个就有点让人费解了，我在 bind 的时候，是否可以传参呢？我在执行 bind 返回的函数的时候，可不可以传参呢？让我们看个例子：

var foo = {

value: 1

};

function bar(name, age) {

console.log(this.value);

console.log(name);

console.log(age);

}

var bindFoo = bar.bind(foo, ‘daisy’);

bindFoo(‘18’);

// 1

// daisy

// 18

函数需要传 name 和 age 两个参数，竟然还可以在 bind 的时候，只传一个 name，在执行返回的函数的时候，再传另一个参数 age!

这可咋办？不急，我们用 arguments 进行处理：

// 第二版

Function.prototype.bind2 = function (context) {

var self = this;

// 获取bind2函数从第二个参数到最后一个参数

var args = Array.prototype.slice.call(arguments, 1);

return function () {

// 这个时候的arguments是指bind返回的函数传入的参数

var bindArgs = Array.prototype.slice.call(arguments);

self.apply(context, args.concat(bindArgs));

}

}

构造函数效果的模拟实现

完成了这两点，最难的部分到啦！因为 bind 还有一个特点，就是

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

也就是说当 bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但传入的参数依然生效。举个例子：

var value = 2;

var foo = {

value: 1

};

function bar(name, age) {

this.habit = ‘shopping’;

console.log(this.value);

console.log(name);

console.log(age);

}

bar.prototype.friend = ‘kevin’;

var bindFoo = bar.bind(foo, ‘daisy’);

var obj = new bindFoo(‘18’);

// undefined

// daisy

// 18

console.log(obj.habit);

console.log(obj.friend);

// shopping

// kevin

注意：尽管在全局和 foo 中都声明了 value 值，最后依然返回了 undefind，说明绑定的 this 失效了，如果大家了解 new 的模拟实现，就会知道这个时候的 this 已经指向了 obj。

(哈哈，我这是为我的下一篇文章《JavaScript深入系列之new的模拟实现》打广告)。

所以我们可以通过修改返回的函数的原型来实现，让我们写一下：

// 第三版

Function.prototype.bind2 = function (context) {

var self = this;

var args = Array.prototype.slice.call(arguments, 1);

var fBound = function () {

var bindArgs = Array.prototype.slice.call(arguments);

// 当作为构造函数时，this 指向实例，此时结果为 true，将绑定函数的 this 指向该实例，可以让实例获得来自绑定函数的值

// 以上面的是 demo 为例，如果改成 this instanceof fBound ? null : context，实例只是一个空对象，将 null 改成 this ，实例会具有 habit 属性

// 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context

self.apply(this instanceof fBound ? this : context, args.concat(bindArgs));

}

// 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值

fBound.prototype = this.prototype;

return fBound;

}

如果对原型链稍有困惑，可以查看《JavaScript深入之从原型到原型链》。

构造函数效果的优化实现

但是在这个写法中，我们直接将 fBound.prototype = this.prototype，我们直接修改 fBound.prototype 的时候，也会直接修改绑定函数的 prototype。这个时候，我们可以通过一个空函数来进行中转：

// 第四版

Function.prototype.bind2 = function (context) {

var self = this;

var args = Array.prototype.slice.call(arguments, 1);

var fNOP = function () {};

var fBound = function () {

var bindArgs = Array.prototype.slice.call(arguments);

self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));

}

fNOP.prototype = this.prototype;

fBound.prototype = new fNOP();

return fBound;

}

到此为止，大的问题都已经解决，给自己一个赞！o(￣▽￣)ｄ

三个小问题

接下来处理些小问题:

1.apply 这段代码跟 MDN 上的稍有不同

在 MDN 中文版讲 bind 的模拟实现时，apply 这里的代码是：

self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))

多了一个关于 context 是否存在的判断，然而这个是错误的！

举个例子：

var value = 2;

var foo = {

value: 1,

bar: bar.bind(null)

};

function bar() {

console.log(this.value);

}

foo.bar() // 2

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
判断，然而这个是错误的！

举个例子：

var value = 2;

var foo = {

value: 1,

bar: bar.bind(null)

};

function bar() {

console.log(this.value);

}

foo.bar() // 2

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-yXU7xm1N-1715796695668)]

[外链图片转存中…(img-zq44hZaT-1715796695669)]

[外链图片转存中…(img-DxdSf0B5-1715796695669)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84092727
关注
  • 20
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中call,apply,bind函数用法示例
10-20
在JavaScript中，`call`, `apply`, 和 `bind` 是三个非常重要的函数，它们都用于改变函数内部 `this` 的指向。下面将详细介绍这三个函数的功能、使用方法以及它们之间的区别。 1. **call() 函数** `call()` 函数...
javascript中call apply 与 bind方法详解
10-22
在JavaScript中，`call`、`apply`和`bind`都是与函数调用相关的三个重要方法，它们都允许我们改变函数内部`this`的指向，从而实现不同对象间的方法复用和灵活控制上下文环境。下面我们将分别详细介绍这三个方法。 1...
JS bind方法
最新发布
有趣的小良的博客
06-06 2200
还可以绑定函数的参数。这样可以在调用函数时，预先传入一些参数，使得函数的调用更加方便和简洁。是 JavaScript 中非常常用的一个函数方法，它可以用来解决函数调用时。是 JavaScript 中的一个函数方法，它可以用来绑定函数的。值是在运行时确定的，它取决于函数的调用方式。但是当将其赋值给一个全局变量并调用时，它的。值和参数的问题，使得函数调用更加灵活和方便。值和参数，返回一个新的函数。在 JavaScript 中，函数的。值，那么在函数被调用时，值，确保函数被调用时。值始终指向正确的对象。
js实现bind函数
MISSNext的博客
11-03 260
由点到面、一步一步实现bind函数
bind的模拟实现
weixin_34122604的博客
10-31 112
bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ) 由此我们可以首先得出 bind 函数的两个特点： 返回一个函数 可以传入参数 返回函数的模拟实现 从第一个特点开始，我们举个例子： var fo...
JavaScript中 bind函数的实现
前端学习博客
01-12 673
bind函数的实现 bind可以分为多次传入参数，bind是返回绑定this之后的函数 Function.prototype.mybind = function(thisArg,...argArray){ //1.获取到真实需要调用的函数 var fn = this; //2.绑定this //如果是null或undefined，就绑定window，如果不是，那就统一转换成Object类型(这里主要针对基本数据类型，但调用Object()对引用数据类型没有影响) t
JavaScript实现bind方法
楚楚梦厦的博客
11-10 1410
Function.prototype.pBind = function () { var self = this; // 保存原函数 var context = [].shift.call(arguments); // 保存需要绑定的this的上下文 var args = Array.prototype.slice.call(arguments); // 剩余的参数转为真数组 console.log('args-------------',ar
javascript中apply/call和bind的使用
10-20
本文主要介绍了javascript中apply/call和bind的使用。具有很好的参考价值，下面跟着小编一起来看下吧
开启Javascript中apply、call、bind的用法之旅模式
10-23
在Javascript中，Function是一种对象。Function对象中的this指向决定于函数被调用的方式,使用apply，call 与 bind 均可以改变函数对象中this的指向。
Javascript中call，apply，bind方法的详解与总结
10-20
本文主要Javascript中call，apply，bind方法的进行全面分析，并在文章结尾对call，apply，bind方法的联系和区别做了总结，具有很好的参考价值，需要的朋友一起来看下吧
关于原生js中bind函数的简单实现
11-26
今天继续研究了bind函数的实现，也知道了shim和polyfill的说法，现在总结一下， if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new TypeError("Function.prototype.bind - what is try
bind方法的实现
mapbar_front的博客
04-26 1784
bind方法的作用：就是进行this绑定。他的返回值是一个函数，返回的函数中的this就是bind的参数对象。 可以这样的进行简单的实现： function bind(fn, context){ return function(){ return fn.apply(context,arguments); } } 在原生JavaScript中，bind是一种Fu...
bind实现
runner_123的博客
03-17 1655
一、原生js实现Bind bind的三个特点 （1）保存this，返回新的函数 （2）可以传入参数 （3）一个绑定函数也可以使用new操作符创建对象，这种行为就像把原函数当成构造器，提供的this值被忽略，同时调用时的参数被提供给模拟函数 根据三个特点，分为3个步骤来实现bind （1）保存this，返回新的函数 var foo={ value:1 }; func...
js手动实现bind()
qq_41265268的博客
04-22 560
bind()的用法 bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。 function fn(name, age) { this.name = name this.age = age console.log(this) } fn() // Window fn.bind({a:1})() // {a: 1, name: undefined, age: undefined}
JavaScript-call函数的简单实现
qq_42181069的博客
12-13 578
Function.prototype.myCall = function (thisArg,...args) { //第一步，对thisArg处理，以防传进来的不是对象,基本类型的数据会转为包装对象，null和undefined会指向window thisArg = thisArg ? Object(thisArg) : window //第二步，调用绑定的函数，这里的this就是这个函数 thisArg.fn = this //第三步，将调用函数的结果返回出去 .
JS call方法原理
liubangbo的专栏
11-15 8008
原文转自：https://blog.csdn.net/u010377383/article/details/80646415 前言 本来计划是, 先把深入React技术栈过完,  但是，现在在满足RN app开发情况下，我还是先深入js一个系列。 （一）call源码解析 首先上一个call使用 function add(c, d) {   return this.a + this.b + c...
自己实现bind函数【转载】
harry_yaya的博客
03-19 409
看到一篇讲如何自己实现bind的过程，这篇讲的特别清晰，过程明了。建议跟着博客打开开发者工具自己敲一下试试。会很有收获。 然后这里有一点再补充一下两点可能理解起来不是很清晰或者容易犯糊涂的地方。 if (!Function.prototype.bind) { Function.prototype.bind = function () { var self = this, ...
JavaScript-bind实现原理
weixin_59554510的博客
08-25 384
大家好，今天给大家带来的是bind的实现原理，比前两个call，apply稍微有点点难，但是大家想要玩转js高级，那就当然是模仿各种的实现原理，对自己的js理解啥的提升挺快的，bind的话，想必大家知道：作用就是改变this指向，不调用函数没，这个跟前两个有些不一样下面我就带大家来写一下bind的实现原理：（在实现bind的原理之前我们先看一下原生的是啥样的然后我们去模仿一下）发现结果没有问题，其实js 的一些原理挺简单的，当我们学会写原理之后js高级的一些东西，就发现会幡然醒悟，奥原来是这样。...
bind()方法实现
weixin_44761091的博客
03-15 5104
文章目录一、bind方法的作用？二、bind方法实现 一、bind方法的作用？ bind() 方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。 --MDN 简单说，bind和call/apply类似都也是改变this的指向。但是bind并不会立即执行函数，而是返回一个绑定了this的新函数，且新函数的this无法再次被修改。 举个例子吧： let obj = { num:1, add : functio
js中call和apply和bind区别
03-17
JavaScript 中的 call 和 apply 和 bind 是 JavaScript 中的函数对象的三个方法。它们的主要作用是改变函数的调用对象。 call: - 与 apply 类似，都是在特定的作用域中调用函数 - 但是传入参数的形式不同，call 是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值