登录  /  注册
首页 > web前端 > js教程 > 正文

详解JavaScript继承方式(三)

零到壹度
发布: 2018-03-22 14:29:55
原创
1268人浏览过

本文继续给大家来详解javascript继承方式,主要以代码的形式和大家分享,希望能帮助到大家。

1.继承工具函数三

/**
 * @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);
登录后复制

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

2,继承工具函数四

这种方式是目前比较流行的,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);
登录后复制

以上就是详解JavaScript继承方式(三)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号