使用JavaScript构造函数进行原型制作

Question

考虑以下示例

var Foo = function(){
    this.identity = 'Foo';
};
Foo.prototype.bar = function(){
    this.identity = 'bar';
};
var fooInstance = new Foo(),
    bar = new fooInstance.bar();

题

在bar ，如何获取fooInstance变量？ Foo fooInstance是否可以将其父代识别为fooInstance ？ 例如，如何在bar中创建一个函数，该函数将返回fooInstance 。 需要注意的一点是，必须通过使用prototype命令创建钢筋，并且不能简单地将其嵌套在Foo以这种方式访问​​任何Foo实例。

我的想法以及为什么它们不起作用

可以像这样重写功能

var Foo = function(){
    this.identity = 'Foo';
};
Foo.prototype.createBar = function(){
    var parent = this;
    function bar(){
        this.parent = parent;
        this.identity = 'bar';
    };
    return new bar();
};
var fooInstance = new Foo(),
    bar = fooInstance.createBar();

但是出于创建易于阅读的代码的目的，我宁愿在不需要时不使用此方法。

进一步澄清

让我根据上下文提出问题。 我在CanvasRenderingContext2D上进行原型制作，以便canvas元素的所有上下文都包含我的新方法。 让我们调用该方法foo并假定context是一个已创建的canvas上下文。 如何创建一个像“ new context.foo（）”这样的变量，以便foo函数可以使用上下文变量？

Answer 1

如果需要从bar对象引用fooInstance对象，则可以使用依赖项注入，如下所示：

Foo.prototype.bar = function(fooInstance) {
    this.identity = 'bar';
    this.fooInstance = fooInstance;
};

var fooInstance = new Foo(),
    bar = new foo.bar(fooInstance);

您可以通过在Foo上实现工厂功能来简化创建过程。

Foo.prototype.createBar = (function() {
    function Bar(parent){
        this.parent = parent;
        this.identity = 'bar';
    };

    return function () {
        return new Bar(this);
    };
})();

var fooInstance = new Foo(),
    bar = fooInstance.createBar();

Answer 2

我如何在bar中创建一个将返回fooInstance的函数

如果该函数被称为构造函数（带有new ），则不能真正做到。 在构造函数调用中， this关键字 （对“父对象”（在其上调用方法的对象）的唯一引用）设置为新实例。 您只能使用闭包来获取引用，例如，通过在父级的构造函数中创建构造函数（这对您不起作用），或者从原型上的闭包返回构造函数（您几乎在第二个示例中得到了） ）：

Foo.prototype.getBarCoonstructor = function() {
    var parentFoo = this;
    return function Bar() {
        // constructor things
        // using "parentFoo" reference
    };
};
// Usage:
var bar = new (foo.getBarConstructor()) (); // ugly.

与其为每个getBarConstructor调用创建新的构造getBarConstructor ，不如将其放置在方法之外，并将parentFoo作为其参数。 你的主意已经很不错了。

function Bar(parent) {
    // constructor things, referring "parent"
}
Bar.prototype.… = …;

Foo.prototype.createBar = function() {
    return new Bar(this); // passing the Foo instance
};

（@plalx具有相同的解决方案，但包装在模块闭包中）

Answer 3

Foo.prototype.bar只是Foo原型Object上的一个函数。 除非您在其作用域链中明确定义它的“父级”，否则该函数将无法知道。

即如果你愿意

var Foo = function(){
    this.identity = 'Foo';
};
var fooInstance = new Foo();

Foo.prototype.bar = function(){
    console.log(fooInstance); // retrieve from scope
    this.identity = 'bar';
};
bar = new foo.bar();

那会起作用。