JS继承用法实例分析


Posted in Javascript onFebruary 05, 2015

本文实例分析了JS继承的用法。分享给大家供大家参考。具体分析如下:

继承 : 子类不影响父类,子类可以继承父类的一些功能 ( 代码复用 )

属性的继承 : 调用父类的构造函数 call

方法的继承 : for in :  拷贝继承 (jquery也是采用拷贝继承extend)

1. 拷贝继承

function Person (name){
 this.name = name;
}
Person.prototype.showName =function (){
 alert(this.name);
}
function Worker(name,job){
 Person.call(this,name);
 this.job = job;
}
extend(Worker.prototype, Person.prototype);
//如果用Worker.prototype=Person.prototype的话,会造成引用相同的问题
function extend(obj1,obj2){
 for(var i in obj2){
   obj1[i] = obj2[i]
 }
}
var coder = new Worker('magicfly','frontEnd');
coder.showName();

2. 类继承

function Person (name){
 this.name = name;
}
Person.prototype.showName =function (){
 alert(this.name);
}
function Worker(name,job){
 Person.call(this,name);
 this.job = job;
}
//Worker.prototype = new Person();
// 这样继承会继承父级的不必要属性 
function F(){};
F.prototype = Person.prototype;
Worker.prototype = new F();
//通过建立一个临时构造函数来解决 ,也称为代理函数

var coder = new Worker('MAGICFLY','START');
coder.showName();

3. 原型继承

var a = {
  name : '小明'
};
var b = cloneObj(a);
b.name = '小强';
//alert( b.name );
alert( a.name );
function cloneObj(obj){
  var F = function(){};
  F.prototype = obj;
  return new F();
}

适用情况

拷贝继承:  通用型的  有new或无new的时候都可以
类式继承:  new构造函数
原型继承:  无new的对象

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
Javascript实现Web颜色值转换
Feb 05 #Javascript
JS表的模拟方法
Feb 05 #Javascript
JS的数组迭代方法
Feb 05 #Javascript
js实现照片墙功能实例
Feb 05 #Javascript
js实现仿百度瀑布流的方法
Feb 05 #Javascript
JS函数this的用法实例分析
Feb 05 #Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 #Javascript
You might like
php对大文件进行读取操作的实现代码
2013/01/23 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
详解Python 函数如何重载?
2019/04/23 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
django form和field具体方法和属性说明
2020/07/09 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
学生会副主席竞聘书
2014/03/31 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
助学感谢信范文
2015/01/21 职场文书
企业百日安全活动总结
2015/05/07 职场文书
python删除csv文件的行列
2021/04/06 Python
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python