js建立類(封裝)

標籤：java   title   tail   this   home   初學者   閉包   記憶體   例子   

 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 Chinaconsole.log(p1.age);            //24     var p2 = Person("ys", 12);p2.getHome();                   //ys‘s home in Chinaconsole.log(p2.age);            //24   console.log(p2.test == p1.test);  //true, 證明靜態私人變數共用性

 

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

總結：

• 有些公用屬性，方法，可以設定為靜態，這樣可以在每次執行個體化的時候，不需要額外開闢記憶體資源，達到真正意義上的共用，
• 有些公用的屬性方法，只想在內部程式處理時候達到共用，則設定為，靜態私人屬性方法，
• 有些公用的屬性方法，想在執行個體對象中達到共用，則設定為prototype屬性方法。

 

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

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

 

 

 

js建立類(封裝)