javascript中的原型答案

【问题标题】：prototype in javascriptjavascript中的原型
【发布时间】：2012-05-05 07:44:15
【问题描述】：

我正在研究原型对象，我对以下内容有点困惑

//my constructor function
function Circle(r) { 
    this.radius = r;
    this.PI = 3.14;
}

function areaCalculator() {
    this.area = this.PI * this.radius * this.radius;
}

 function circumferenceCalculator() {
    this.circumference = 2* this.PI * this.radius;
}

因为我们的函数是一个对象，并且有一个名为原型的属性，所以可以向这个原型对象添加属性和方法，这些属性和方法将自动适用于我们使用函数构造函数创建的所有自定义对象。

Circle.prototype.areaCalculator = areaCalculator; //adding function
Circle.prototype.color = "Red"; //adding property

var circle1 = new Circle(5);
circle1.areaCalculator();
console.log(circle1.radius);//5
console.log(circle1.area); //78.5
console.log(circle1.color);//Red

如果我理解正确，所有使用 Circle 的对象都将引用相同的颜色变量，除非它们被明确设置。它是否正确？

在不使用原型的情况下做下面这样的事情是什么意思

Circle.circumferenceCalculator = circumferenceCalculator;
Circle.color = "Red";

以上两个说法正确吗？

【问题讨论】：

标签： javascript prototype

【解决方案1】：

是的，使用new Circle 创建的所有对象都将指向同一个color 属性。该属性实际上将位于原型对象上，而不是您创建的对象上。因此，当您在特定对象上设置它时，它会从原型中“隐藏”该属性，但不会覆盖它 - 您可以在设置后尝试delete obj.color，您将恢复旧颜色。

执行Circle.color='red' 只会在Circle 对象上设置color 属性（即使函数也是对象，但它们有一个callable 属性来定义它们在调用时的行为） - 这绝不会连接到Circle 的原型。

【讨论】：

【解决方案2】：

函数也是一个对象，你可以增加它的属性。一个常见的例子是 jQuery，其中$ 既充当对象又充当函数。

function Circle(r) {}
Circle.circumferenceCalculator = circumferenceCalculator;
Circle.color = "Red";

$.each();             //$ as an object
$('selector').each()  //$ as a function

但是，这不会反映在您创建的实例中。反映在实例上的只有通过原型添加的和构造函数中的。

function Circle(r) { 
    this.radius = r;
    this.PI = 3.14;
}

Circle.prototype.areaCalculator = areaCalculator;
Circle.prototype.color = "Red";

var mycircle = new Circle(5);

//props on Circle itself:
//Circle.color
//Circle.areaCalculator

//props on the instance:
//mycircle.radius
//mycircle.PI
//mycircle.areaCalculator
//mycircle.color

【讨论】：