js如何創建類（封裝）

學過其他面向對象語言的JavaScripter，可能都應用過類，如：class{}，等定義的一系列方法，
但是初學者看是學習js的時候，經常會看到這樣一句話，那就是JavaScript是面向對象語言，可是自己無論怎麽學習，都不太清楚面向對象編程，我也是如此，開始一直糾結js面向對象編程，這幾天算是有所了解了，談談我對js類的理解。。。

所謂類，會有以下功能：

• 構造器
• 靜態屬性，靜態方法
• 共有屬性，共有方法
• 私有屬性，私有方法

本文就說說如何用js實現對類的封裝，實現上述功能，

1.一個簡單的類

var Person = function(name, age){
    this.name = name;
    this.age = age;

    this.sayName = function(){
        console.log(this.name);
    };
}
 

如何你覺得Ta不像類的話，那麽你可以這樣做

var Person = function(name, age){
    //共有屬性
    this.name = name;
    this.age = age;
    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
}

嘿嘿…這裏做一個奸詐的表情…

如果對於構造函數模式不太清楚的話，可以看看這裏js創建對象之設計模式

2.一個復雜的類

有了上面的例子之後，我們在此基礎之上就可以進行我們的完善了。

var Person = function(name, age){
    //共有屬性
    this.name = name;
    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
    //靜態私有屬性(只能用於內部調用)
    var home = "China";
    //靜態私有方法(只能用於內部調用)
    function sayHome(){
        console.log(home);
    }
    //構造器
    this.setAge = function(age){
        console.log(age + 12);
    };
    this.setAge(age);
}
//靜態方法（只能被類來訪問）
Person.sayAge = function(){
    console.log("your age is 12");
}
//靜態屬性（只能被類來訪問）
Person.drink = "water";
//靜態共有方法（類和實例都可以訪問）
Person.prototype.sayWord = function(){
    console.log("ys is a boy");
}
 

js中利用上述的模擬方法，實現了對類的創建，在此基礎上，我們不安現狀，想要對他進行封裝，讓他成為一個整體，更利於體現js的封裝性。

3.封裝js類

這裏我們用閉包來實現，首先解釋下閉包的概念。
閉包概念：一個函數有權訪問另一個函數作用域中的變量，即在一個函數內部創建另一個函數

實現如下：

var Person = (function(){
    //靜態私有屬性方法
    var home = "China";
    function sayHome(name){
        console.log(name + "‘s home in " + home);
    }
    //構造函數
    function _person(name, age){
        var _this = this;
        //構造函數安全模式，避免創建時候丟掉new關鍵字
        if(_this instanceof _person){
            //共有屬性, 方法
            _this.name = name;
            _this.getHome = function(){
                //內部訪問私有屬性，方法
                sayHome(_this.name);
            };
            _this.test = sayHome; //用於測試
            //構造器
            _this.setAge = function(age){
                _this.age = age + 12;
            }(age);
        }else{
            return new _person(name, age);
        }
    }
    //靜態共有屬性方法
    _person.prototype = {
        constructor: _person,
        drink: "water",
        sayWord: function(){
            console.log("ys is a boy");
        }
    }
    return _person;
})();
 

調用如下：

var p1 = new Person("ys", 12);
p1.getHome();                   //ys‘s home in China
console.log(p1.age);            //24     

var p2 = Person("ys", 12);
p2.getHome();                   //ys‘s home in China
console.log(p2.age);            //24   

console.log(p2.test == p1.test);  //true, 證明靜態私有變量共享性

如上面的代碼一樣，我們就用js實現了類

總結：

• 有些公共屬性，方法，可以設置為靜態的，這樣可以在每次實例化的時候，不需要額外開辟內存資源，達到真正意義上的共享，
• 有些公共的屬性方法，只想在內部程序處理時候達到共享，則設置為，靜態私有屬性方法，
• 有些公共的屬性方法，想在實例對象中達到共享，則設置為prototype屬性方法。

在新的ES6語法中支持class關鍵字來封裝類並繼承類

具體查看軟大師的 講解：http://es6.ruanyifeng.com/#docs/class

js創建類(封裝)