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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
详解vue组件中使用路由方法
2019/02/12 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python hmac模块使用实例解析
2019/12/24 Python
vue常用指令代码实例总结
2020/03/16 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
什么是类的返射机制
2016/02/06 面试题
DBA的职责都有哪些
2012/05/16 面试题
爷爷追悼会答谢词
2014/01/24 职场文书
教师师德承诺书
2014/03/26 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
车辆年检委托书范本
2014/10/14 职场文书
上课说话检讨书500字
2014/11/01 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript