javascript設計模式系列二-封裝

JavaScript封裝：

var Book = function (id, name, price) {
    this.id = id,
        this.name = name,
        this.price = price
}
Book.prototype.display = function () {
    //展現書本
}

var book = new Book(10, 'js', 30);
book.display();
console.log(book.name);

問題：經過this和prototype添加的屬性和方法有什麼區別

　答：經過this添加的屬性、方法是在當前對象上添加的，然而Js是有種基於原型prototype的語言，因此每建立一個對象時（在js中函數也是一種對象），都有一個原型prototype用於執行其繼承的屬性，方法。

 javaScript是如何實現封裝的呢？

因爲javascript是函數級做用域，聲明在函數內部的變量以及方法在外界是訪問不到的，經過此特性便可建立類的私有變量以及私有方法。然而在函數內部經過this船艦的屬性和方法，在類建立對象時，每一個對象自身都擁有一份而且能夠在外部訪問到。所以經過this建立的屬性和方法可看做是對象共有屬性和對象公有方法，而經過this建立的方法，不但能夠防衛這些對象的公有屬性和方法，並且還能訪問到類或對象自身的私有的屬性和方法，因爲這些方法權力比較大，因此咱們又將它看做特權方法。在對象建立時經過使用這些特權咱們能夠初始化實例對象的一些屬性，所以這些在建立對象時調用的特權方法還能夠看做是類的構造器，以下所示：

var Book = function (id, name, price) {
    //私有屬性
    var num = 1;
    //私有方法
    function checkId() { }
    //特權方法
    this.setName = function (name) { }
    this.getName = function () { }
    //對象公有屬性
    this.id = id;
    this.name = name;
    this.price = price;
    //對象公有方法
    this.copy = function () { }

    //4對象構造器
    this.setName('name');

}

 

 類的靜態方法和屬性

//類的靜態屬性
Book.isChinese=true;
//類的靜態方法
Book.resetTime=function(){}

 

 類的原型屬性和方法

//公有方法
Book.prototype.display = function () {
    //展現書本
}
//公有屬性
Book.prototype.checkId=true;

 建立對象的安全模式：

　　目的是克服初學者忘記new關鍵字，致使以下示例，這是因爲new關鍵字的做用是對當前對象的this不停的賦值，然而例子中沒有使用new，因此就會直接執行這個函數，而這個函數是在全局做用域中執行的，因此在全局做用域中this指向的是當前對象天然就是全局變量（window）,而咱們這個book變量最終做用是要獲得Book這個類的執行結果，因爲函數沒有return語句，這個Book函數天然不會告訴book變量的執行結果了，因此book爲undefined

var Book = function (id, name, price) {
    this.id = id;
    this.name = name;
    this.price = price;
}
var book = Book('12', 'js', 30);
console.log(book);//undefined
console.log(window.name);//'js'

安全模式

var Book = function (id, name, price) {
    if (this instanceof Book) {
        this.id = id;
        this.name = name;
        this.price = price;
    } else {
        new Book(id, name, price);
    }

}
var book = Book('12', 'js', 30);
console.log(book);//Book
console.log(book.name);//'js'
console.log(window.name);//undefined