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 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 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/07/26 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python代码调试的几种方法总结
2015/04/15 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
django静态文件加载的方法
2018/05/20 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Django框架模板用法入门教程
2019/11/04 Python
python开发前景如何
2020/06/11 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
图书室管理制度
2014/01/19 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
个人租房协议书
2014/11/28 职场文书
母亲节寄语大全
2015/02/27 职场文书
2015年调度员工作总结
2015/04/30 职场文书
2015年预算员工作总结
2015/05/14 职场文书
反邪教学习心得体会
2016/01/15 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
Python如何配置环境变量详解
2021/05/18 Python