1. 程式人生 > >javascript設計模式系列二-封裝

javascript設計模式系列二-封裝

In 分享圖片 class getname 初始 ceo alt 最終 實例

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

javascript設計模式系列二-封裝