2015秋前端开发课件

本章内容实现经典继承原型链使用父方法OOP框架jQuery简单继承经典OOP中的继承如C#,Java或C++经典OOP中的继承当前所有的Student类型实例也是的功能类型，并且有Inheritance继承是一种扩展对象功能给另一个对象的方式如Student继承继承Mammal，等在JavaScript中，继承的实现是由设置派生类型的原型到超类型的实例上function (fname,

lname)

{}function

Student(fname,

lname,

grade)

{}Stotype

=

new

();var

student=new

Student("张","三",5);经典OOP中的继承实现原型链JavaScript中搜索属性的方式原型链JavaScript中的对象只能有单一原型其原型也有原型，以此类推称为原型链当对象上的属性调用时对象搜索该属性如果对象并不包含属性，其原型检查该属性，以此类推如果在原型中都没有找到，结果为undefined调用父方法使用一些OOP的调用父方法JavaScript没有直接的方法调用父方法函数构造器实际上不知道谁是其父调用父方法使用call和apply调用父方法：示例以矩形继承有形状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;}());调用父方法：示例以矩形继承有形状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;}());调用父构造器调用父方法：示例以矩形继承有形状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;}());调用父构造器调用父方法调用父方法演示OOP框架OOP框架OOP是首要设计范式，在大多数编程语言中但，OOP在JavaScript总并不完美同时这也是为什么每个框架都有自己的实现OOP的方式YUI,

Prototype.js,

Backbone.js,等如果不用这些框架，可以用jQuery的简单实现jQuery的简单继承如何用这个？从代码中拷贝创建"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;}});如何用这个？从代码中拷贝创建"class"：var

Sh =

Class.extend({init:

function(x,

y){构造器},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;}});如何用这个？从代码中拷贝创建"class"：var

Sh =

Class.extend({init:

function(x,

y){构造器},serialize:

function(){return

{x:this._x,y:this._y方法jQuery的简单继承如何用这个？/simple-inheritance从代码中拷贝创建"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;}});构造器方法父构造器jQuery的简单继承如何用这个？/simple-inheritance从代码中拷贝创建"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