如何使用“原型”正确编码 JavaScript 属性和方法？功能？

Question

我正在尝试学习如何使用 javascript 原型创建和使用 javascript 属性和方法，但遇到了一些困难。

在下面的代码中，我尝试创建一个名为“radius”的简单对象，其半径为 4，并具有一个名为“getCircumference”的方法，该方法使用对象“半径”值生成周长。

function radius()
{
    this = 4;
}

function getCircumference()
{
    var pi = 3.141592;
    var circumference = this.value * 2 * pi;
    document.write(circumference);
}

radius.prototype.circumference = getCircumference;
radius.circumference();

如果有人可以向我展示如何使该代码工作，更好的是，如何使该代码允许输入任何半径并在每次调用新方法时返回周长。谢谢！

Answer 1

您的代码在技术上和概念上都存在一些问题。

从技术角度来看，您无法分配给 this。将该行更改为 this.value = 4 并将其与 pst 的建议（将最后一行更改为 (new radius()).curcumference()）我相信您的代码将按原样运行。

从概念上讲，将圆视为一个对象并具有半径可能比将半径本身视为一个对象更有用。试试这个：

// traditionally, class name are TitleCased
function Circle(radius) {
    this.radius = radius;
}

Circle.prototype = {
    circumference: function() {
        return this.radius * 2 * Math.PI;
    }
};

var circle = new Circle(4);
document.write(circle.circumference());

Answer 2

尝试：(new radius).circumference()——“parent”函数的“.prototype”属性中的对象被放入“[[prototype]]”链中（关键字提示： -) 对于通过 new 派生的对象。

如果您的构造函数接受一个参数，那么您可能可以这样：new radius(42).circumference()。

有关详细信息，请参阅 http://jibbering.com/faq/notes/closures/。

Answer 3

让我们首先了解一些原型基础知识：

函数对象继承自Function.prototype。对 Function.prototype 对象的修改会传播到所有 Function 实例。

如果您习惯了面向对象的编程语言，您可以将原型视为类定义/静态变量集的组合。当然，无论您选择什么类比都会有缺陷，因为它不等同于任何一个。

当您在 JavaScript 中定义任何函数时，您有可能创建该函数的实例（类似于 OOP 中的对象）。

考虑以下示例：

function example(some, params)
{
  var foo = some;
  this.bar = params;
  //more code...
}

如果在窗口上下文中调用它：

window.example('fizz', 'buzz');

您就会知道 foo 是一个临时变量，在持续时间内存储 'fizz' 的值函数调用的值，并且 window.bar 将被设置为 'buzz' 的值。

但是，如果它用于实例化一个新对象，

var temp = new example('fizz', 'buzz');

您就会知道 foo 仍然是一个临时变量，在函数调用期间存储 'fizz' 的值，现在 temp.bar 将设置为 'buzz' 的值。

---

如果我们要在原型上定义一个新属性：

example.prototype.baz = 'w00t';

example 函数的每个实例现在都会有一个属性 baz，其值为 'w00t'.

您可以将函数定义为原型的属性，以提供“类”方法：

example.prototype.doSomething = function(){ /* do something code */... };

并且 example 的所有实例都将具有为其定义的 doSomething 函数。

---

当您想要覆盖原型值时会发生什么？

如果您覆盖原型上的属性，则所有实例都将被更新：

example.prototype.baz = 'new w00t';

但是，如果您覆盖实例上的属性，仅该实例将被更新：

temp.baz = 'not w00t';

---

您的示例：

您想要一个具有半径的 circle 对象：

function circle(r)
{
  //probably should do some value checking stuff here
  this.radius = r;
}

每个 circle 对象都有一个周长：

circle.prototype.getCircumference()
{
  return Math.PI * 2 * this.radius;
}

现在，如果实例化一个新圆，您可以获得周长：

var c = new circle(5);
console.log(c.getCircumference());

---

快速说明：

定义一个函数原型上允许所有实例共享对同一函数的引用。

如果为每个实例创建一个函数：

function temp()
{
  this.func = function(){...};
}

您的性能可能会比允许实例共享原型函数更差：

function temp(){}

temp.func = function(){...};