2015秋前端開發(fā)課件

本章內(nèi)容實現(xiàn)經(jīng)典繼承原型鏈使用父方法OOP框架jQuery簡單繼承經(jīng)典OOP中的繼承如C#,Java或C++經(jīng)典OOP中的繼承當(dāng)前所有的Student類型實例也是的功能類型，并且有Inheritance繼承是一種擴展對象功能給另一個對象的方式如Student繼承繼承Mammal，等在JavaScript中，繼承的實現(xiàn)是由設(shè)置派生類型的原型到超類型的實例上function (fname,

lname)

{}function

Student(fname,

lname,

grade)

{}Stotype

=

new

();var

student=new

Student("張","三",5);經(jīng)典OOP中的繼承實現(xiàn)原型鏈JavaScript中搜索屬性的方式原型鏈JavaScript中的對象只能有單一原型其原型也有原型，以此類推稱為原型鏈當(dāng)對象上的屬性調(diào)用時對象搜索該屬性如果對象并不包含屬性，其原型檢查該屬性，以此類推如果在原型中都沒有找到，結(jié)果為undefined調(diào)用父方法使用一些OOP的調(diào)用父方法JavaScript沒有直接的方法調(diào)用父方法函數(shù)構(gòu)造器實際上不知道誰是其父調(diào)用父方法使用call和apply調(diào)用父方法：示例以矩形繼承有形狀var

Sh =

(function

()

{function

Sh (x,

y)

{//initialize

the

sh}Sh .prototype

=

{serialize:

function

()

{//serialize

the

sh//return

theserialized}};return

Sh

;}());var

Rect

=

(function

()

{function

Rect(x,

y,width,

height)

{Sh .call(this,

x,

y);//初始化矩陣}Rtotype=newSh

();Rtotype.serialize=function(){Sh

.prototype.serialize.call(this);//加入矩陣特定序列化//返回已序列化};returnRect;}());調(diào)用父方法：示例以矩形繼承有形狀var

Sh =

(function

()

{function

Sh (x,

y)

{//initialize

the

sh}Sh .prototype

=

{serialize:

function

()

{//serialize

the

sh//return

theserialized}};return

Sh

;}());var

Rect

=

(function

()

{function

Rect(x,

y,width,

height)

{Sh .call(this,

x,

y);//初始化矩陣}Rtotype=newSh

();Rtotype.serialize=function(){Sh

.prototype.serialize.call(this);//加入矩陣特定序列化//返回已序列化};returnRect;}());調(diào)用父構(gòu)造器調(diào)用父方法：示例以矩形繼承有形狀var

Sh =

(function

()

{function

Sh (x,

y)

{//initialize

the

sh}Sh .prototype

=

{serialize:

function

()

{//serialize

the

sh//return

theserialized}};return

Sh

;}());var

Rect

=

(function

()

{function

Rect(x,

y,width,

height)

{Sh .call(this,

x,

y);//初始化矩陣}Rtotype=newSh

();Rtotype.serialize=function(){Sh

.prototype.serialize.call(this);//加入矩陣特定序列化//返回已序列化};returnRect;}());調(diào)用父構(gòu)造器調(diào)用父方法調(diào)用父方法演示OOP框架OOP框架OOP是首要設(shè)計范式，在大多數(shù)編程語言中但，OOP在JavaScript總并不完美同時這也是為什么每個框架都有自己的實現(xiàn)OOP的方式Y(jié)UI,

Prototype.js,

Backbone.js,等如果不用這些框架，可以用jQuery的簡單實現(xiàn)jQuery的簡單繼承如何用這個？從代碼中拷貝創(chuàng)建"class"：var

Sh =

Class.extend({init:

function(x,

y){this._x

=

x;this._y

=

y;},serialize:

function(){return

{x:this._x,y:this._y};}});/simple-inheritance繼承：var

Rect

=Sh

.extend({init:

function(x,

y,

w,

h){this._super(x,y);this._width

=

w;this._height

=

h;},serialize:

function(){

var

res

=this._super();res.width

=this._width;res.height

=

this._height;returnres;}});jQuery的簡單繼承this._x=x;this._y=y;/simple-inheritance繼承：var

Rect

=Sh

.extend({init:

function(x,

y,

w,

h){this._super(x,y);this._width

=

w;this._height

=

h;},serialize:

function(){

var

res

=this._super();res.width

=this._width;res.height

=

this._height;returnres;}});如何用這個？從代碼中拷貝創(chuàng)建"class"：var

Sh =

Class.extend({init:

function(x,

y){構(gòu)造器},serialize:

function(){return

{x:this._x,y:this._y};}});jQuery的簡單繼承this._x=x;this._y=y;};}});/simple-inheritance繼承：var

Rect

=Sh

.extend({init:

function(x,

y,

w,

h){this._super(x,y);this._width

=

w;this._height

=

h;},serialize:

function(){

var

res

=this._super();res.width

=this._width;res.height

=

this._height;returnres;}});如何用這個？從代碼中拷貝創(chuàng)建"class"：var

Sh =

Class.extend({init:

function(x,

y){構(gòu)造器},serialize:

function(){return

{x:this._x,y:this._y方法jQuery的簡單繼承如何用這個？/simple-inheritance從代碼中拷貝創(chuàng)建"class"：var

Sh =

Class.extend({init:

function(x,

y){this._x

=

x;this._y

=

y;},serialize:

function(){return

{x:this._x,y:this._y};}});繼承：var

Rect

=Sh

.extend({init:

function(x,

y,

w,

h){this._super(x,y);this._width

=

w;this._height

=

h;},serialize:

function(){

var

res

=this._super();res.width

=this._width;res.height

=

this._height;returnres;}});構(gòu)造器方法父構(gòu)造器jQuery的簡單繼承如何用這個？/simple-inheritance從代碼中拷貝創(chuàng)建"class"：var

Sh =

Class.extend({init:

function(x,

y){this._x

=

x;this._y

=

y;},serialize:

function(){return

{x:this._x,y:this._y};}});繼承：var

Rect

=Sh

.extend({init:

function(x,

y,

w,

h){this