simulate classes in javascript

本文深入探讨了JavaScript中类的设计,包括属性、方法、私有成员的定义,以及类之间的继承关系,通过实例展示了如何创建类、定义方法、实现私有成员、使用原型链进行继承,并介绍了构造函数链的概念。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. As is probably clear, you simulate a class property in JavaScript simply by defining a property of the constructor function itself to store a special 1x1 rectangle, you can do the following:

Rectangle.UNIT = new Rectangle(1,1); 

 


2. To define a class method in JavaScript, simply make the appropriate function a
property of the constructor.

// This class method takes two Circle objects and returns the

// one that has the larger radius.

       Circle.max = function(a,b) { if (a.r > b.r) return a; else return b; }
 

3. private members , you can refer to http://www.crockford.com/javascript/private.html for more info.

example :

function ImmutableRectangle(w, h) {

  // This constructor does not store the width and height properties

  // in the object it initializes. Instead, it simply defines // accessor methods in the object. These   //methods are closures and

// the width and height values are captured in their scope chains.

  this.getWidth = function( ) { return w; }

  this.getHeight = function( ) { return h; }

} 
 


4. JavaScript equality operators compare objects by reference, not by value.

5. Superclasses and Subclasses

// Here is a simple Rectangle class.
// It has a width and height and can compute its own area
function Rectangle(w, h) {
    this.width = w;
    this.height = h;
}
Rectangle.prototype.area = function( ) { return this.width * this.height; }

// Here is how we might subclass it
function PositionedRectangle(x, y, w, h) {
    // First, invoke the superclass constructor on the new object
    // so that it can initialize the width and height.
    // We use the call method so that we invoke the constructor as a
    // method of the object to be initialized.
    // This is called constructor chaining.
    Rectangle.call(this, w, h);

    // Now store the position of the upper-left corner of the rectangle
    this.x = x;
    this.y = y;
}

// If we use the default prototype object that is created when we
// define the PositionedRectangle( ) constructor, we get a subclass of Object.
// To subclass Rectangle, we must explicitly create our prototype object.
PositionedRectangle.prototype = new Rectangle( );

// We create this prototype object for inheritance purposes, but we
// don't actually want to inherit the width and height properties that
// each Rectangle object has, so delete them from the prototype.
delete PositionedRectangle.prototype.width;
delete PositionedRectangle.prototype.height;

// Since the prototype object was created with the Rectangle( ) constructor,
// it has a constructor property that refers to that constructor.  But
// we want PositionedRectangle objects to have a different constructor
// property, so we've got to reassign this default constructor property.
PositionedRectangle.prototype.constructor = PositionedRectangle;

// Now that we've configured the prototype object for our subclass,
// we can add instance methods to it.
PositionedRectangle.prototype.contains = function(x,y) {
    return (x > this.x && x < this.x + this.width &&
            y > this.y && y < this.y + this.height);
}
 



creating a subclass in JavaScript is not as simple as creating a class that
inherits directly from Object. First, there is the issue of invoking the
superclass constructor from the subclass constructor. Take care when you do this
that the superclass constructor is invoked as a method of the newly created
object. Next, there are the tricks required to set the prototype object of the
subclass constructor. You must explicitly create this prototype object as an
instance of the superclass, then explicitly set the constructor property of the
prototype object.[*]Optionally, you may also want to delete any properties that the superclass constructor created in the prototype object because what's important are the properties that the prototype object inherits from its prototype.
guess

print(r instanceof PositionedRectangle &amp;&amp;
      r instanceof Rectangle &amp;&amp;
      r instanceof Object);

 will return what ?

--------------------------------------------------------------

ps: what is prototype ?
In the previous section, I showed that the new
operator creates a new, empty object and then invokes a constructor function as a method of that object. This is not the complete story, however. After creating the empty object, New
sets the prototype of that object. The prototype of an object is the value of the prototype property of
its constructor function. All functions have a prototype property that is automatically created and initialized when the function is defined. The initial value of the prototype property is an object with a single property. This property is named constructor and refers back to the constructor function with which the prototype is associated. (You may recall the constructor property from Chapter 7 ; this is why every object has a constructor property.) Any properties you add to this prototype object will appear to be properties of objects initialized by the constructor.

 

 

Constructor Chaining

In the example just shown, the PositionedRectangle( ) constructor function needed to explicitly invoke the superclass constructor function. This is called constructor chaining and is quite common when creating subclasses. You can simplify the syntax for constructor chaining by adding a property named superclass to the prototype object of the subclass:

// Store a reference to our superclass constructor.
PositionedRectangle.prototype.superclass = Rectangle;
 

With this property defined, the syntax for constructor chaining is simpler:

function PositionedRectangle(x, y, w, h) {
    this.superclass(w,h);
    this.x = x;
    this.y = y;
}
 

 

Note that the superclass constructor function is explicitly invoked through the this object. This means that you no longer need to use call( ) or apply( ) to invoke the superclass constructor as a method of that object.

 

more about superclass

more

 

 

6. Extending Without Inheriting

 JavaScript is such a flexible language that subclassing and inheritance is not the only way to extend a class.

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值