您的位置:知识库 » Web前端

JavaScript 继承方式(3)

作者: snandy  来源: 博客园  发布时间: 2011-03-15 11:28  阅读: 810 次  推荐: 1   原文链接   [收藏]  

  接上文:JavaScript 继承方式(2)

  3,继承工具函数三

/**
* @param {Function} subCls
* @param {Function} superCls
*/
function extend(subCls,superCls) {
subCls.prototype
= new superCls();
}

  父类,按原型方式写,即属性和方法都挂在原型上。

/**
* 父类Person
*/
function Person(){}
Person.prototype.nationality
= 'China';
Person.prototype.getNationality
= function() {return this.nationality;}
Person.prototype.setNationality
= function(n) { this.nationality = n;}

  子类继承与父:

function Man() {}
extend(Man,Person);

  继承父类的属性和方法后,再添加子类自有属性,方法 :

Man.prototype.name = 'jack';
Man.prototype.getName
= function() { return this.name;}
Man.prototype.setName
= function(n) { this.name=n;}

  测试如下:

var m = new Man();
console.log(m);
console.log(m
instanceof Person);

  可以看到这种写类方式,继承方式完全采用原型机制。

  4,继承工具函数四

  这种方式是目前比较流行的,51ditu网站的开发就是按照这种模式的。

/**
* @param {Function} subCls 子类
* @param {Function} superCls 父类
*/
function extend(subCls,superCls) {
//暂存子类原型
var sbp = subCls.prototype;
//重写子类原型--原型继承
subCls.prototype = new superCls();
//重写后一定要将constructor指回subCls
subCls.prototype.constructor = subCls;
//还原子类原型
for(var atr in sbp) {
subCls.prototype[atr]
= sbp[atr];
}
//暂存父类
subCls.supr = superCls;
}

  按构造函数+原型 方式写类,即属性挂在this上,方法挂在prototype上。

/**
* 父类Person
*/
function Person(nationality){
this.nationality = nationality;
}
Person.prototype.getNationality
= function() {return this.nationality;}
Person.prototype.setNationality
= function(n) { this.nationality = n;}

/**
* 子类Man
*/
function Man(nationality,name) {
Man.supr.call(
this,nationality); //很重要的一句,调用父类构造器
this.name = name;
}
Man.prototype.getName
= function() {return this.name;}
Man.prototype.setName
= function(n) {this.name=n;}

  注意子类Man中要显示的调用父类构造器已完成父类的属性/字段拷贝。

  extend调用,创建Man的实:

extend(Man,Person);
var m = new Man('USA','jack');
console.log(m);
m.setName(
'lily');
console.log(m.name);
1
0
标签:JavaScript

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻