Javascript原型继承和对象构造函数

Question

I have following piece of code for learning JS.

function CircleArea(x)
{
   this.x = x;
}

CircleArea.prototype = 
{  
   area: function () {
       return 22 / 7 * this.x * this.x;
   }
};

var CalArea = new CircleArea(7);
if( CalArea.constructor === CircleArea.prototype.constructor)
{
   alert(CalArea.area());
}

I decoupled the inheritance chain by assigning an object literal to CircleArea.prototype and then defined CalArea object using CircleArea constructor. Now both CalArea.constructor and CircleArea.prototype.constructor are basically Object constructors rather than CircleArea constructor but when I called CalArea.area() inside alert function this.x obtains 7 as its value whereas value 7 is passed as an argument to CircleArea constructor not to Object constructor to which CalArea.constructor and CircleArea.prototype constructors refer now.

Answer 1

I'm not sure what you mean by "decoupled the inheritance chain" but to me, what you are experiencing is the expected behavior.

You call area() on an instance of CircleArea .

area() uses this.x .

this in that context is your instance of CircleArea that has x=7 .

So your calculation is 22 / 7 * 7 * 7

If you are expecting something different, could you explain what you expect and why you expect it?

---

I am guessing that your confusion stems from this which is set to the object instance that a function is called on, so calling CalArea.area() means that this is set to CalArea so this.x is the same as CalArea.x

Answer 2

When you assign an object to prototype (CircleArea.prototype = {area: fun..}) you just dispatch default CircleArea.prototype hence CircleArea.prototype.constructor dispatched too. But CircleArea still is constructor when you use operator new it returns an object instance of CircleArea ({x: argument, proto : { area: fun, proto :...}}). You just can't use new CalArea.constructor() but can new CircleArea(). new CalArea.constructor() returns the Object instance