使用 Kendo UI 庫(kù)實(shí)現(xiàn)對(duì)象的繼承

JavaScript 也是一種面向?qū)ο蟮拈_(kāi)發(fā)語(yǔ)言，但和 C++，Java, C# 所不同的是，它的對(duì)象不是基于類(lèi)（Class），而是基于對(duì)象原型（ProtoType)，因此對(duì)于來(lái)自 C++,Java 等背景的程序員，初次接觸到 JavaScript 的面向?qū)ο蟮拈_(kāi)發(fā)時(shí)，開(kāi)始會(huì)有些不適應(yīng)。而 JavaScript 語(yǔ)言本身也非常靈活，實(shí)現(xiàn)面向?qū)ο蟮姆椒ㄒ埠芏啵煌目蚣苁褂玫姆椒ㄒ膊煌?/p>

對(duì)于 JavaScript 的面向?qū)ο蟮姆椒ê?C++，Java 面向?qū)ο蟮牟煌c(diǎn)，舉個(gè)簡(jiǎn)單的類(lèi)比，使用 C++, Java 來(lái)建房，是先有藍(lán)圖（Class），然后根據(jù)這個(gè)藍(lán)圖（Class）來(lái)建房（對(duì)象）。而 JavaScript 是直接建個(gè)房（Object），如果要將個(gè)新房，就參考這個(gè)建好的房作為原型（prototype)，然后復(fù)制一個(gè)對(duì)象。

Kendo UI 不僅僅提供了一些好看的 UI 組件，而且也提供一個(gè) JavaScript 構(gòu)建對(duì)象，實(shí)現(xiàn)繼承的方法，其形式接近于 C++，Java 的類(lèi)繼承方法。

使用 kendo.Class.extend 創(chuàng)建對(duì)象

首先可以創(chuàng)建一個(gè)新對(duì)象（注意 JavaScript 中沒(méi)有類(lèi)的概念），可以通過(guò)kendo.Class.extend 來(lái)定義。

var person = kendo.Class.extend({});

上面代碼創(chuàng)建一個(gè) Person 對(duì)象，但沒(méi)有定義 Person 對(duì)象任何屬性和方法。下面可以為 Person 定義一些屬性和方法（函數(shù)），可以通過(guò)對(duì)象字面量的方法來(lái)定義，Javascript 對(duì)象的屬性或方法都是以 Key：value 的形式來(lái)定義。也使用 this 來(lái)引用對(duì)象的方法或?qū)傩浴?/p>

var Person = kendo.Class.extend({
    firstName: 'Not Set',
    lastName: 'Not Set',
    isAPrettyCoolPerson: false,
    sayHello: function() {
        alert("Hello! I'm " + this.firstName + " " + this.lastName);
    }
});

var person = new Person();
person.sayHello();

創(chuàng)建構(gòu)造函數(shù)

也可以為對(duì)象添加一個(gè)構(gòu)造函數(shù)，Kendo UI 使用 init 來(lái)定義構(gòu)造函數(shù) ，這樣在創(chuàng)建新對(duì)象時(shí)，可以通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建新的對(duì)象. 下面代碼重新定義 Person 對(duì)象，并為其添加一個(gè)屬性 isAPrettyCoolPerson ，

var Person = kendo.Class.extend({
    firstName: 'Not Set',
    lastName: 'Not Set',
    isAPrettyCoolPerson: false,
    init: function (firstName, lastName) {
        if (firstName) this.firstName = firstName;
        if (lastName) this.lastName = lastName;
    },

    sayHello: function () {
        alert("Hello! I'm " + this.firstName + " " + this.lastName);
    }

});

var person = new Person("John", "Bristowe");
person.isAPrettyCoolPerson = true;
person.sayHello();

我們使用這個(gè)對(duì)象，創(chuàng)建一個(gè)名為 John　，Bristowe　的 Person , 并把它的 isAPrettyCoolPerson 屬性設(shè)為 True 。

創(chuàng)建一個(gè)派生對(duì)象

現(xiàn)在我們可以創(chuàng)建 Person 對(duì)象的一個(gè)派生對(duì)象 Parent，Parent 對(duì)象繼承 Person 對(duì)象 ，然后我們創(chuàng)建一個(gè) Dad 對(duì)象。

var person = new Person("John", "Bristowe");
person.isAPrettyCoolPerson = true;

var Parent = Person.extend({
    firstName: 'Mark',
    lastName: 'Holland'
});

var myDad = new Parent();
myDad.isAPrettyCoolPerson = true;

myDad.sayHello();
alert(myDad.isAPrettyCoolPerson);

我們?cè)賱?chuàng)建一個(gè) Child 對(duì)象，繼承自 Parent，要注意的是 isCoolPerson 屬性。想想它的值是真還是假呢？

var Child = Parent.extend({});

var me = new Child();
me.firstName = "Burke";
me.sayHello();
alert(me.isAPrettyCoolPerson);

可以看到 me 的 isAPrettyCoolPerson 的值為 false, 沒(méi)有因?yàn)?myDad 的 isAPrettyCoolPerson 為 True 而變?yōu)?true , 這些因?yàn)?Child 繼承自 Parent , Parent 缺省的 isAPrettyCoolPerson 為 false, myDad 修改的只是某個(gè)特定的實(shí)例的值，沒(méi)有修改作為原型的對(duì)象（Parent）的屬性。