javascript中如何實現類 (class) ---簡述構造函數與原型對象

在 js中，類的實現是通過原型的繼承機制。

通常的方法，是定義構造函數，即是定義類，類名即構造函數名，首字母必須大寫。在其中定義一些共有的屬性名。

同時，使用關鍵字prototype來定義構造函數的原型對象，在其中定義共享的方法。當定義好這些之後，必須通過關鍵字new來調用

構造函數，實現創建實例。此實例‘繼承’所有原型的方法。 

構造函數及原型對象實現類

這裏使用犀牛書的示例 9-2 以及略微調整

1)構造函數

function Range(from,to){
    this.from=from;
    this.to=to;
}

 

2）原型對象
2.1)定義原型對象

Range.prototype={
    //注意，Range.prototype={},這種形式重寫了預定義的Range.prototype對象，去掉了constructor屬性，因此我們需要顯示給原型添加一個構造函數；
    constructor:Range,//必寫！！
    //如果x在範圍內，則返回true, 否則返回false
    includes:function(x){
        return this.from<=x && x<=this.to;
    },
    //這個函數內的每個整數都調用一次f
    foreach:function(f){
        for(var x=Math.ceil(this.from);x<this.to;x++) f(x);
    },
    //返回這個範圍的字符串
    toString:function(){
        return "("+this.from+"..."+this.to+')';
    }
}

2.2）由於預定義的原型對象Range.prototype本身就包含constructor屬性，我們可以使用預定義的原型對象，然後依次添加方法

Range.prototype.includes=...
Range.prototype.foreach=...
Range.prototype.toString=...

3)實例化對象

var r=new Range(10,15);

 

4)調用共享方法

console.log(r.includes(2));//false
r.foreach(console.log);//10 11 12 13 14 15
console.log(r.toString())// (10...15)

es6寫法

在es6中，可以使用class關鍵字，使其在寫法上更加的清晰，將上述的例子改寫如下; 這種只是在寫法上做了修改，構造函數仍舊是Range1,方法仍舊加在Range1.prototype之上

class Range1{
    constructor(from,to){
        this.from=from;
        this.to=to;
    }
    includes(x){//這是類的一個方法，不要加上function
        return this.from<=x && x<=this.to;
    }
    foreach(f){
        for(var x=Math.ceil(this.from);x<this.to;x++) f(x);
    }
    toString(){
        return "("+this.from+"..."+this.to+')';
    }
}
var r_new=new Range1(3,8);
console.log(r_new.includes(4));//true
r_new.foreach(console.log);
console.log(r_new.toString());//(3...8)