使用Javascript构造函数原型 [英] Prototyping with Javascript Constructors

问题描述

考虑以下示例：

  var Foo = function（）{
 .identity ='Foo'; 
}; 
 Foo.prototype.bar = function（）{
 this.identity ='bar'; 
}; 
 var fooInstance = new Foo（），
 bar = new fooInstance.bar（）; 
  

问题

bar 中，如何获取 fooInstance 变量？是否有一种方法让 Foo 的子项来识别其父项 fooInstance ？例如，如何在 bar 中创建一个函数，返回 fooInstance 。一个小小的警告是，bar必须使用原型命令创建，不能简单地嵌套在 Foo code> Foo 这样的实例。

我的想法和为什么他们不工作 p>

这样可以重写函数

  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（）; 
  

然而，为了创建易读的代码，我宁愿不使用这种方法，如果不需要。 / p>

进一步澄清

让我把问题放在上下文中。我在CanvasRenderingContext2D原型，所以上下文的canvas元素将包含我的新方法。让我们调用该方法foo并假设上下文是一个已创建的画布上下文。如何创建一个像new context.foo（）这样的变量，使foo函数可以使用上下文变量？

解决方案

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

如果该函数被调用为构造函数（ new ），你不能真正做到。 此关键字，在构造函数调用中将对父（您在其上调用该方法的对象）的唯一引用设置为新实例。你只能使用闭包来获取引用，例如通过在父类的构造函数中创建构造函数（对你不起作用），或者从原型中的闭包返回构造函数（你在第二个例子中）：

  Foo.prototype.getBarCoonstructor = function（）{
 var parentFoo = this; 
 return function Bar（）{
 // constructor things 
 //使用parentFoo引用
}; 
}; 
 //用法：
 var bar = new（foo.getBarConstructor（））（）; // 丑陋。 
 

而不是为 getBarConstructor ，你最好把它放在方法之外，并把 parentFoo 作为参数。你的想法已经相当不错了。

  function Bar（parent）{
 // constructor something，referencedparent 
} 
 Bar.prototype。... = ...; 
 
 Foo.prototype.createBar = function（）{
 return new Bar（this）; //传递Foo实例
}; 
  

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

Consider the Following Example

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

Question

Within bar, how may I obtain the fooInstance variable? Is there a way for a child of Foo to recognize its parent as fooInstance? For example, how could I create a function in bar that would return fooInstance. A slight caveat is that bar must by created using the prototype command and cannot simply be nested in Foo to access any Foo instances that way.

My Ideas and Why They Don't Work

It would be possible to rewrite the functions like so

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();

Yet for the purposes of creating easily readable code i would rather not use this approach if not needed.

Further Clarification

Let me put the question in context. I am prototyping on CanvasRenderingContext2D so that all contexts for the canvas element will contain my new method. Lets call that method foo and assume context is a created canvas context. How create a variable like so "new context.foo()" such that the foo function can use the context variable?

解决方案

how could I create a function in bar that would return fooInstance

If that function is called as a constructor (with new), you can't really do it. The this keyword, the only reference to the "parent" (the object on which you called the method) is set to the new instance in a constructor invocation. You can get the reference only with a closure, for example by creating the constructor in the parent's constructor function (which doesn't work for you) or by returning the constructor from a closure on the prototype (which you nearly got in the second example):

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

Instead of creating new constructors for every call of getBarConstructor, you better should put it outside of the method and put parentFoo as an argument to it. Your idea was already quite good.

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

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

(@plalx has the same solution, but wrapped in a module closure)

这篇关于使用Javascript构造函数原型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！