在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 使用 Kendo UI 庫實(shí)現(xiàn)對象的繼承
準(zhǔn)備
Kendo UI 特效概述
Kendo MVVM 數(shù)據(jù)綁定(三) Click
Kendo MVVM 數(shù)據(jù)綁定(十) Source
Kendo MVVM 數(shù)據(jù)綁定(二) Checked
Kendo MVVM 數(shù)據(jù)綁定(五) Events
UI Widgets 概述
Kendo MVVM 數(shù)據(jù)綁定(一) attr
單頁面應(yīng)用(二) Router 類
單頁面應(yīng)用(四) Layout
Kendo DataSource 概述
Kendo MVVM 數(shù)據(jù)綁定(四) Disabled/Enabled
Kendo MVVM 數(shù)據(jù)綁定(十一) Value
Kendo MVVM (二) ObservableObject 對象
單頁面應(yīng)用(一)概述
Kendo UI 模板概述
Kendo MVVM 數(shù)據(jù)綁定(七) Invisible/Visible
Kendo MVVM 數(shù)據(jù)綁定(八) Style
初始化 Data 屬性
Kendo UI Validator 概述
單頁面應(yīng)用(三) View
Kendo MVVM 數(shù)據(jù)綁定(九) Text
Kendo MVVM (一) 概述
移動(dòng)應(yīng)用開發(fā)簡介
Kendo MVVM 數(shù)據(jù)綁定(六) Html
使用 Kendo UI 庫實(shí)現(xiàn)對象的繼承

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

avaScript 也是一種面向?qū)ο蟮拈_發(fā)語言,但和 C++,Java,C# 所不同的是,它的對象不是基于類(Class),而是基于對象原型(ProtoType),因此對于來自 C++,Java 等背景的程序員,初次接觸到 JavaScript 的面向?qū)ο蟮拈_發(fā)時(shí),開始會(huì)有些不適應(yīng)。而 JavaScript 語言本身也非常靈活,實(shí)現(xiàn)面向?qū)ο蟮姆椒ㄒ埠芏?,不同的框架使用的方法也不同?/p>

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

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

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

首先可以創(chuàng)建一個(gè)新對象(注意 JavaScript 中沒有類的概念),可以通過kendo.Class.extend 來定義。


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

上面代碼創(chuàng)建一個(gè) 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();

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/15.jpg" alt="" />

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

也可以為對象添加一個(gè)構(gòu)造函數(shù),Kendo UI 使用 init 來定義構(gòu)造函數(shù) ,這樣在創(chuàng)建新對象時(shí),可以通過構(gòu)造函數(shù)來創(chuàng)建新的對象. 下面代碼重新定義 Person 對象,并為其添加一個(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è)對象,創(chuàng)建一個(gè)名為 John ,Bristowe 的Person,并把它的 isAPrettyCoolPerson 屬性設(shè)為 True 。

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/16.jpg" alt="" />

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

現(xiàn)在我們可以創(chuàng)建 Person 對象的一個(gè)派生對象 Parent,Parent 對象繼承 Person 對象 ,然后我們創(chuàng)建一個(gè) 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);

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/17.jpg" alt="" />

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


var Child = Parent.extend({});

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

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/18.jpg" alt="" />

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