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 相关文章推荐
jquery插件validate验证的小例子
May 08 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
Angular5.1新功能分享
Dec 21 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 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
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php生成动态验证码gif图片
2015/10/19 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
Python如何实现单例模式
2016/06/03 面试题
体育专业个人求职信范文
2013/12/27 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
党性心得体会
2014/09/03 职场文书
投诉书格式范本
2015/07/02 职场文书
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android