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 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
js函数排序的实例代码
Jul 01 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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/06/27 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python中二维阵列的变换实例
2014/10/09 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
女大学生毕业找工作的自我评价
2013/10/03 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
十佳护士获奖感言
2014/02/18 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
庆六一宣传标语
2014/10/08 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书