對象(類)的封裝方式(面向對象的js基本知識)

上一個月一直忙於項目，沒寫過筆記，今天稍微空下來了一點

前幾天在寫項目的時候關於怎么去封裝每一個組件的時候思考到幾種方式,這里總結一下:

1、構造函數方式(類似java寫類的方式)：把所有的屬性和方法全部掛在構造函數內部的this上:

function Textarea(opts) {
    this.defaults = {
        //...這是一些默認屬性
    };
    this.options = $.extend(true, {}, this.defaults, opts);
    this.creatDom = function() {
        //...這里面很大一堆代碼
    };
    this.setVal = function() {
        //...這是很大一堆代碼
    };
    this.getVal = function() {
        //...這是很大一堆代碼
    };
}

這種方法的優點是代碼比較緊湊,比較好理解和代碼的管理,但是這樣我們每次實例化一個對象的時候都會新開一段內存來存儲這個對象(包括方法和屬性)
我們改改:

function Textarea(opts) {
    this.defaults = {
        //...這是一些默認屬性
    };
    this.options = $.extend(true, {}, this.defaults, opts);//這是覆蓋以后的屬性
    this.creatDom = creatDom;
    this.setVal = setVal;
    this.getVal = getVal;
}
function creatDom() {
    //...這是很大一堆代碼
}
function setVal() {
    //...這是很大一堆代碼
}
function getVal() {
    //...這是很大一堆代碼
}

這樣會節約一些內存:但是犧牲了代碼的緊湊度;
我們可以知道,每次實例化對象的時候其實三個方法其實是公用的,所以出現了第二種方式去定義對象

2、原型式寫法:把屬性和方法都掛在到對象的原型上：

function Textarea() {}
Textarea.prototype.defaults = {
    //...
};
Textarea.prototype.options = $.extend(true, {}, this.defaults);
Textarea.prototype.creatDom = function() {
    //...
};
Textarea.prototype.setVal = function() {
    //...
};
Textarea.prototype.getVal = function() {
    //...
};
//當然也可以把所有屬性和方法放在對象上面然后再掛在prototype上:
function Textarea() {}
Textarea.prototype = {
    defaults : {},
    options : $.extend(true, {}, this.defaults),
    creatDom : function() {},
    setVal : function() {},
    getVal : function() {}
};

但是這種方法是不可取的，因為這樣不能通過參數來構造對象實例(一般每個對象的屬性是不相同的);就像fe里面每個人名字不一致,但都能吃能笑能寫代碼;
舉個簡單的例子:

function Person(){}
Person.prototype.name = "winter";
Person.prototype.getName = function() { return this.name;}
new Person("summer").getName();//得到的還是winter的大名;

3、構造函數+原型結合的方式：

function Textarea(opts) {
    this.defaults = {};
    this.option =  $.extend(true, {}, this.defaults, opts);
}
Textarea.prototype = {
    creatDom : function() {},
    setVal : function() {},
    getVal : function() {}
};

看看這種方式是不是很完美...
貌似還不完美,這樣Textarea.prototype還是在外面,
我們把它也拿到對象里面去:如下

function Textarea(opts) {
    this.defaults = {};
    this.option =  $.extend(true, {}, this.defaults, opts);
    Textarea.prototype = {
        creatDom : function() {},
        setVal : function() {},
        getVal : function() {}
    };
}

現在看似好了，但是我們每次實例化的時候會發生什么？
都會去執行這對代碼:

Textarea.prototype = {
    creatDom : function() {},
    setVal : function() {},
    getVal : function() {}
};

所以我們再做一個步驟,就是讓它只執行一次:

function Textarea(opts) {
    this.defaults = {};
    this.option =  $.extend(true, {}, this.defaults, opts);
    if(!!this.init){
        Textarea.prototype = {
            creatDom : function() {},
            setVal : function() {},
            getVal : function() {}
        };
        this.init = true;
    }
}

OK!一般說來公共屬性寫在prototype下,需要在實例化的時候改變的屬性寫在this下
另外我們在實例化對象的時候(new)的時候需要在new的過程中就執行初始化函數:
比如上面的例子我們在var textarea = new Textarea(opts);的時候就想把creatDom函數執行了而不是new Textarea(opts).creatDom();
這時候我們就需要這樣:

function Textarea(opts) {
    this.defaults = {};
    this.option =  $.extend(true, {}, this.defaults, opts);
    this.creatDom(this.options);
}
Textarea.prototype = {
    creatDom : function() {},
    setVal : function() {},
    getVal : function() {}
};

 

號外：構造函數下面的this

var die = BlackBerry;
function Phone(){
    console.log(this.die);
}
Phone()//BlackBerry
var die = BlackBerry;
function Phone(){
    this.die = "Nokia";
    console.log(this.die);
}
Phone()//Nokia

構造函數直接調用會把this當作全局window
所以以原型方式寫出的對象中沒有掛在this下面,直接調用構造函數將不會有這些屬性和方法
如果以構造函數的方式生成對象在構造函數直接調用的時候將在window下生成相應的對象和方法

原型下面的this

function Phone() {}
Phone.prototype = {
    name : "Nokia",
    init : function() {
        this.name = "BlackBerry";
    }
};
var myPhone = new Phone();
myPhone.init();
console.log(myPhone.name);//BlackBerry
console.log(Phone.prototype.name);//Nokia

init里面的this指的是什么？Phone.prototype？

這里的this指的是調用的實例化對象myPhone;而不是原型對象,看看下面:
console.log(myPhone.hasOwnProperty("name"));//true
這里為true的原因是在調用myPhone.init()是給實例化對象添加樂一個name屬性

console.log(myPhone.hasOwnProperty("init"));//false
這里為false很明顯，因為start是原型上面的屬性而非實例化對象的屬性

我差點被騙了：我以為在代碼執行的時候myPhone.init();this.name = "BlackBerry";會覆蓋Phone.prototype下面的那么屬性