关于javascript:面试官能用JavaScript手写一个bind函数吗

30次阅读

共计 1966 个字符，预计需要花费 5 分钟才能阅读完成。

常常会看到网上各种手写 bind 的教程，上面是我在本人实现手写 bind 的过程中遇到的问题与思考。如果对于如何实现一个手写 bind 还有纳闷的话，那么能够先看看下面两篇文章。

咱们先应用一个典型的手写 bind 的例子，代码如下：

Function.prototype.bind2 = function (context) {if (typeof this !== "function") {throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }

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

    var fNOP = function () {};

    var fBound = function () {var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

咱们首先用原生 bind 运行一下代码

function Foo(a) {this.a = a}
Foo.prototype.sayHi = function() {}
let _Foo = Foo.bind(undefined, 'a')
new _Foo()

更多面试题解答参见前端手写面试题具体解答

而后应用手写版代码，运行同样的代码

function Foo(a) {this.a = a}
Foo.prototype.sayHi = function() {}
let _Foo = Foo.bind2(undefined, 'a')
new _Foo()

咱们能够看到相比原生 bind 办法，手写版的 bind 办法返回的构造函数，结构进去的新对象会比原生的多一层 __proto__。而这个__proto__ 产生的起因就是在很多教程中提到的 避免原型链篡改。

这也就是为什么很多的文章会通知你，为什么要增加上面的代码。

var fNOP = function () {};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();

这段代码中，应用了一个空函数作为直达，相当于Object.create(fBound.prototype)。具体能够查看文章结尾给出的文章，外面的具体的阐明。

既然说道，加上面的代码是为了避免原型链篡改。我就想看看原生的 bind 如何解决这个问题的呢？

function Foo(a) {this.a = a}
Foo.prototype.sayHi = function() {}
let _Foo = Foo.bind(undefined, 'a')
_Foo.prototype.sayHi = function() {console.log('篡改的_Foo 的 sayHi 办法')}
(new _Foo().sayHi())

我发现在运行下面的代码，程序执行到批改 _Foo 的原型办法的语句时，就曾经报错了。提醒表明 _Foo 没有 prototype 属性！既然没有 prototype 属性，那么是不是也就不必解决原型链篡改的问题了呢？

之后，我查了一下标准, 在 NOTE 中，有上面一段话。明确指出了 bind 返回的函数是没有 prototype 属性，这也多少印证了下面的猜测。

Function objects created using Function.prototype.bind do not have a prototype property or the [[Code]], [[FormalParameters]], and [[Scope]] internal properties.

其中须要留神的有一点是这条：