JavaScript MVC 學(xué)習(xí)筆記（二）類的使用（上）

caozhijian 發(fā)布于2019-08-21 10:25 / 2152人閱讀

摘要：任何函數(shù)都可以用做構(gòu)造函數(shù)，構(gòu)造函數(shù)必須使用運(yùn)算符作為前綴來(lái)創(chuàng)建新的實(shí)例。當(dāng)使用關(guān)鍵字來(lái)調(diào)用構(gòu)造函數(shù)時(shí)，執(zhí)行上下文從全局對(duì)象變成一個(gè)空的上下文，這個(gè)上下文代表了新生成的實(shí)例。默認(rèn)情況下，如果構(gòu)造函數(shù)中沒(méi)有返回任何內(nèi)容，就會(huì)返回當(dāng)前的上下文。

公開(kāi)記錄學(xué)習(xí)JS MVC，不知道能堅(jiān)持多久= =。以《基于MVC的JavaScript web富應(yīng)用開(kāi)發(fā)》為主要學(xué)習(xí)資料。

  JavaScript類的內(nèi)容好多，我腦容量太小，分兩次學(xué)習(xí)

JavaScript的類

JavaScript是基于原型的語(yǔ)言，沒(méi)有包含內(nèi)置的類，但是通過(guò)JavaScript可以輕易地模擬出經(jīng)典的類。JavaScript中有構(gòu)造函數(shù)和 new 運(yùn)算符。構(gòu)造函數(shù)用來(lái)給實(shí)例對(duì)象初始化屬性和值。任何JavaScript函數(shù)都可以用做構(gòu)造函數(shù)，構(gòu)造函數(shù)必須使用new 運(yùn)算符作為前綴來(lái)創(chuàng)建新的實(shí)例。

new 運(yùn)算符改變了函數(shù)的執(zhí)行上下文，同時(shí)改變了return 語(yǔ)句的行為。實(shí)際上，使用new和構(gòu)造函數(shù)和傳統(tǒng)的實(shí)現(xiàn)了類的語(yǔ)言中的使用方法是很類似的：

var Person = function(name) {
  this.name = name;
};

// 實(shí)例化一個(gè)Person
var alice = new Person("alice");

// 檢查這個(gè)實(shí)例
assert( alice instanceof Person );

構(gòu)造函數(shù)的命名通常使用駝峰命名法，首字母大寫(xiě)，以此和普通的函數(shù)區(qū)分開(kāi)來(lái)，這是一種習(xí)慣用法。

不要省略new前綴的方式來(lái)調(diào)用構(gòu)造函數(shù):

// 不要這么做!
Person("bob"); //=> undefined

這個(gè)函數(shù)只會(huì)返回undefined，并且執(zhí)行上下文是window（全局）對(duì)象，你無(wú)意間創(chuàng)建了一個(gè)全局變量name。調(diào)用構(gòu)造函數(shù)時(shí)不要丟掉new關(guān)鍵字。

當(dāng)使用new關(guān)鍵字來(lái)調(diào)用構(gòu)造函數(shù)時(shí)，執(zhí)行上下文從全局對(duì)象（window）變成一個(gè)空的上下文，這個(gè)上下文代表了新生成的實(shí)例。因此，this關(guān)鍵字指向當(dāng)前創(chuàng)建的實(shí)例。盡管理解起來(lái)有些繞，實(shí)際上其他語(yǔ)言內(nèi)置類機(jī)制的實(shí)現(xiàn)也是如此。默認(rèn)情況下，如果構(gòu)造函數(shù)中沒(méi)有返回任何內(nèi)容，就會(huì)返回this——當(dāng)前的上下文。要不然就返回任意非原始類型的值。

創(chuàng)建自己的類模擬庫(kù)

var Class = function(){

    var klass = function(){
      this.init.apply(this, arguments);
    };

    klass.prototype.init = function(){};

    return klass;
};

var Person = new Class;

Person.prototype.init = function(){
  // 基于Person 的實(shí)例做初始化
};

// 用法：
var person = new Person;

  由于 JavaScript 2 規(guī)范從未被實(shí)現(xiàn)過(guò)，class 一直都是保留字。最常見(jiàn)的做法是將變量名 class 改為 _class 或 klass。

給類添加函數(shù)

在JavaScript 中，在構(gòu)造函數(shù)中給類添加函數(shù)和給對(duì)象添加屬性是一樣的：

Person.find = function(id){ /*...*/ };
var person = Person.find(1);

要想給構(gòu)造函數(shù)添加實(shí)例函數(shù)，則需要用到構(gòu)造函數(shù)的prototype ：

Person.prototype.breath = function(){ /*...*/ };
var person = new Person;
person.breath();

一種常用的模式是給類的 prototype 起一個(gè)別名fn，寫(xiě)起來(lái)也更簡(jiǎn)單：

Person.fn = Person.prototype;
Person.fn.run = function(){ /*...*/ };

這種模式在jQuery 的插件開(kāi)發(fā)中是很常見(jiàn)的，將函數(shù)添加至jQuery.fn 中也就相當(dāng)于添加至jQuery 的原型中。

給實(shí)現(xiàn)了類機(jī)制的類庫(kù)添加方法

給類添加屬性和給構(gòu)造函數(shù)添加屬性是一樣的。

直接給類設(shè)置屬性和設(shè)置其靜態(tài)成員是等價(jià)的：

var Person = new Class;

// 直接給類添加靜態(tài)方法
Person.find = function(id){ /* ... */ };

// 這樣我們可以直接調(diào)用它們
var person = Person.find(1);

給類的原型設(shè)置的屬性在類的實(shí)例中也是可用的：

var Person = new Class;

// 在原型中定義函數(shù)
Person.prototype.save = function(){ /* ... */ };

// 這樣就可以在實(shí)例中調(diào)用它們
var person = new Person;
person.save();

這樣很難一眼就分辨出類的靜態(tài)屬性和實(shí)例的屬性。因此我們采用另外一種不同的方法來(lái)給類添加屬性，這里用到了兩個(gè)函數(shù)extend() 和include() ：

var Class = function () {
    var klass = function () {
        this.init.apply(this, arguments);
    };

    klass.prototype.init = function () {};

    // 定義 prototype 的別名
    klass.fn = klass.prototype;

    // 定義類的別名
    klass.fn.parent = klass;

    // 給類添加屬性
    klass.extend = function (obj) {
        var extended = obj.extended;
        for (var i in obj) {
            klass[i] = obj[i];
        }
        if (extended) 
            extended(klass)
    };

    // 給實(shí)例添加屬性
    klass.include = function (obj) {
        var included = obj.included;
        for (var i in obj) {
            klass.fn[i] = obj[i];
        }
        if (included) 
            included(klass)
    };
    return klass;
};

這段代碼使用extend() 函數(shù)來(lái)生成一個(gè)類，這個(gè)函數(shù)的參數(shù)是一個(gè)對(duì)象。通過(guò)迭代將對(duì)象的屬性直接復(fù)制到類上：

var Person = new Class;
Person.extend({
    find: function(id) { /* ... */ },
    exists: functions(id) { /* ... */ }
});
var person = Person.find(1);

include() 函數(shù)的工作原理也一樣，只不過(guò)不是將屬性復(fù)制至類中，而是復(fù)制至類的原型中。換句話說(shuō)，這里的屬性是類實(shí)例的屬性，而不是類的靜態(tài)屬性。

var Person = new Class;
Person.include({
    save: function(id) { /* ... */ },
    destroy: functions(id) { /* ... */ }
});
var person = new Person;
person.save();

同樣地，這里的實(shí)現(xiàn)支持extended 和included 回調(diào)。將屬性傳入對(duì)象后就會(huì)觸發(fā)這兩
個(gè)回調(diào)：

Person.extend({
    extended: function(klass) {
        console.log(klass, " was extended!");
    }
});

這種寫(xiě)法已經(jīng)可以支持模塊了。模塊是可重用的代碼段，用這種方法可以實(shí)現(xiàn)各種繼承，用來(lái)在類之間
共享通用的屬性。

var ORMModule = {
    save: function(){
        // 共享的函數(shù)
    }
};

var Person = new Class;
var Asset = new Class;
Person.include(ORMModule);
Asset.include(ORMModule);