JavaScript MVC 學習筆記（二）類的使用（上）

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

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

公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發(fā)》為主要學習資料。

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

JavaScript的類

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

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

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

// 實例化一個Person
var alice = new Person("alice");

// 檢查這個實例
assert( alice instanceof Person );

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

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

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

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

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

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

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 的實例做初始化
};

// 用法：
var person = new Person;

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

給類添加函數(shù)

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

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

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

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

一種常用的模式是給類的 prototype 起一個別名fn，寫起來也更簡單：

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

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

給實現(xiàn)了類機制的類庫添加方法

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

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

var Person = new Class;

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

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

給類的原型設置的屬性在類的實例中也是可用的：

var Person = new Class;

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

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

這樣很難一眼就分辨出類的靜態(tài)屬性和實例的屬性。因此我們采用另外一種不同的方法來給類添加屬性，這里用到了兩個函數(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)
    };

    // 給實例添加屬性
    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ù)來生成一個類，這個函數(shù)的參數(shù)是一個對象。通過迭代將對象的屬性直接復制到類上：

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

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

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

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

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

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

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

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