JavaScript 也是一種面向?qū)ο蟮拈_發(fā)語言,但和 C++,Java, C# 所不同的是,它的對象不是基于類(Class),而是基于對象原型(ProtoType),因此對于來自 C++,Java 等背景的程序員,初次接觸到 JavaScript 的面向?qū)ο蟮拈_發(fā)時,開始會有些不適應(yīng)。而 JavaScript 語言本身也非常靈活,實(shí)現(xiàn)面向?qū)ο蟮姆椒ㄒ埠芏?,不同的框架使用的方法也不同?/p>
對于 JavaScript 的面向?qū)ο蟮姆椒ê?C++,Java 面向?qū)ο蟮牟煌c(diǎn),舉個簡單的類比,使用 C++, Java 來建房,是先有藍(lán)圖(Class),然后根據(jù)這個藍(lán)圖(Class)來建房(對象)。而 JavaScript 是直接建個房(Object),如果要將個新房,就參考這個建好的房作為原型(prototype),然后復(fù)制一個對象。
Kendo UI 不僅僅提供了一些好看的 UI 組件,而且也提供一個 JavaScript 構(gòu)建對象,實(shí)現(xiàn)繼承的方法,其形式接近于 C++,Java 的類繼承方法。
首先可以創(chuàng)建一個新對象(注意 JavaScript 中沒有類的概念),可以通過kendo.Class.extend 來定義。
var person = kendo.Class.extend({});
上面代碼創(chuàng)建一個 Person 對象,但沒有定義 Person 對象任何屬性和方法。下面可以為 Person 定義一些屬性和方法(函數(shù)),可以通過對象字面量的方法來定義,Javascript 對象的屬性或方法都是以 Key:value 的形式來定義。也使用 this 來引用對象的方法或?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();
也可以為對象添加一個構(gòu)造函數(shù),Kendo UI 使用 init 來定義構(gòu)造函數(shù) ,這樣在創(chuàng)建新對象時,可以通過構(gòu)造函數(shù)來創(chuàng)建新的對象. 下面代碼重新定義 Person 對象,并為其添加一個屬性 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();
我們使用這個對象,創(chuàng)建一個名為 John ,Bristowe 的 Person , 并把它的 isAPrettyCoolPerson 屬性設(shè)為 True 。
現(xiàn)在我們可以創(chuàng)建 Person 對象的一個派生對象 Parent,Parent 對象繼承 Person 對象 ,然后我們創(chuàng)建一個 Dad 對象。
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);
我們再創(chuàng)建一個 Child 對象,繼承自 Parent,要注意的是 isCoolPerson 屬性。想想它的值是真還是假呢?
var Child = Parent.extend({});
var me = new Child();
me.firstName = "Burke";
me.sayHello();
alert(me.isAPrettyCoolPerson);
可以看到 me 的 isAPrettyCoolPerson 的值為 false, 沒有因?yàn)?myDad 的 isAPrettyCoolPerson 為 True 而變?yōu)?true , 這些因?yàn)?Child 繼承自 Parent , Parent 缺省的 isAPrettyCoolPerson 為 false, myDad 修改的只是某個特定的實(shí)例的值,沒有修改作為原型的對象(Parent)的屬性。
更多建議: