bind的模拟实现

wangxinarhat 发布于2019-08-23 11:32 / 3065人阅读

摘要：那模拟实现这个时候的指调用的时候传入的参数这两点完成后，还有一个特点，就是一个绑定函数也能使用操作符创建对象，提供的值被忽略，同时调用时的参数被提供给模拟函数。

apply

apply的方法和 call 方法的实现类似，只不过是如果有参数，以数组形式进行传递，直接上代码：

Function.prototype.apply2 = function(context) {
    var context = context || window
    context.fn = this // this 也就是调用apply的函数
    var result
    // 判断是否有第二个参数
    if(arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn()
    return result
}

var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}
bar.apply2(foo, ["black", "18"]) // black 18 1

bind

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

也就是说bind可以返回一个函数，并且可以传入参数。

首先根据第一点，需要返回一个函数：

Function.prototype.bind2 = function(context) {
    var self = this
    return function() {
        self.apply(context)
    }
}
var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

var bindFoo = bar.bind2(foo); 
bindFoo() // 1

接下来还有第二点，可以传入参数，可是传参数还会有两种情况，是在bind的时候传参数呢，还是在调用返回的函数的时候传参数呢？

var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name);
    console.log(age);
    console.log(this.value);
}

var bindFoo = bar.bind(foo, "black");
bindFoo("18")
// black
// 18
// 1

通过上面的例子就可以明显发现。两种方式都可以传参。那模拟实现：

Function.prototype.bind2 = function(context) {
    var self = this
    var args = [...arguments].slice(1)
    console.log([...arguments])
    return function() {
        // 这个时候的arguments指调用的时候传入的参数
        self.apply(context, args.concat([...arguments]))
    }
}

var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name);
    console.log(age);
    console.log(this.value);
}

var bindFoo = bar.bind2(foo, "black");
bindFoo("18")

这两点完成后，还有一个特点，就是一个绑定函数也能使用new操作符创建对象，提供的this值被忽略，同时调用时的参数被提供给模拟函数。

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

var value = 2;
var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
}

bar.prototype.sex = "boy"
var bindFoo = bar.bind(foo, "black")
var obj = new bindFoo("18")
// black
// 18
// undefined
console.log(obj.sex) // boy

尽管在全局和 foo 中都声明了 value 值，最后依然返回 undefined，那是因为当调用obj的时候，这个时候的this指向已经指向到了 obj

所以我们要去修改一下返回函数的原型来去实现：

Function.prototype.bind2 = function(context) {
    var self = this;
    var args = [...arguments].slice(1)
    
    var fun = function() {
        // 当作为构造函数的时候，this 指向实例， self指向绑定函数，由fun.prototype = this.prototype, 使 fun.prototype 为 绑定函数的 prototype，此时结果为true，所以this指向实例
        // 作为普通函数时，this 指向window， self 指向绑定函数，此时结果为false，此时this指向绑定的context
        self.apply(this instanceof self ? this : context,args.concat(...arguments))
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承函数的原型中的值
    // 使用Object.create避免修改函数的prototype
    fun.prototype = Object.create(this.prototype)
    return fun
}

最后加个对调用bind是否是个函数的判断：

Function.prototype.bind2 = function(context) {
    if(typeof this !== "function") {
        throw new TypeError("Error")
    }
    var self = this;
    var args = [...arguments].slice(1)
    
    var fun = function() {
        // 当作为构造函数的时候，this 指向实例， self指向绑定函数，由fun.prototype = this.prototype, 使 fun.prototype 为 绑定函数的 prototype，此时结果为true，所以this指向实例
        // 作为普通函数时，this 指向window， self 指向绑定函数，此时结果为false，此时this指向绑定的context
        self.apply(this instanceof self ? this : context,args.concat(...arguments))
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承函数的原型中的值
    // 使用Object.create避免修改函数的prototype
    fun.prototype = Object.create(this.prototype)
    return fun
}

云服务器 GPU云服务器模拟实现实现模拟加载 C语言数据结构实现银行模拟安卓平台的模拟器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97109.html

JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
面试官问：能否模拟实现JS的bind方法

摘要：点击那么面试官可能会问是否想过到底做了什么，怎么模拟实现呢。另外前不久写过一篇文章面试官问能否模拟实现的操作符。所以相当于调用时，的返回值函数内部要模拟实现实现的操作。文章中的例子和测试代码放在中模拟实现。前言用过React的同学都知道，经常会使用bind来绑定this。 import React, { Component } from react; class TodoItem ...

Julylovin 2019-08-26 13:25 评论0 收藏0
【进阶3-4期】深度解析bind原理、使用场景及模拟实现

摘要：返回的绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器，提供的值被忽略，同时调用时的参数被提供给模拟函数。 bind() bind() 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数，传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。bind返回的绑定函数也能使用 n...

guyan0319 2019-08-23 14:31 评论0 收藏0
JavaScript专题之模拟实现bind

摘要：但是三作为构造函数时函数其实还有一个非常重要的特点返回的函数如果作为构造函数，搭配关键字出现的话，我们的绑定就需要被忽略。其次，当返回的函数作为构造函数时，之前绑定的会失效。本文共 1100 字，读完只需 4 分钟概述前一篇文章我们尝试模拟实现了 call 和 apply 方法，其实 bind 函数也可以用来改变 this 的指向。bind 和 call和 apply 两者的区别...

刘明 2019-08-23 12:37 评论0 收藏0
JavaScript进阶之模拟call,apply和bind

摘要：模拟和模拟一样，现摘抄下面的代码添加一个返回值对象然后我们定义一个函数，如果执行下面的代码能够返回和函数一样的值，就达到我们的目的。原文：https://zhehuaxuan.github.io/... 作者：zhehuaxuan 目的本文主要用于理解和掌握call，apply和bind的使用和原理，本文适用于对它们的用法不是很熟悉，或者想搞清楚它们原理的童鞋。好，那我们开始...

CoderBear 2019-08-23 15:55 评论0 收藏0