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 相关文章推荐
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
js+canvas实现画板功能
Sep 13 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
PHP实现图片简单上传
2006/10/09 PHP
php csv操作类代码
2009/12/14 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
python创建学生管理系统
2019/11/22 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
信息管理员岗位职责
2013/12/01 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
二年级数学教学反思
2014/01/21 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
个人汇报材料范文
2014/12/30 职场文书
艺术节开幕词
2015/01/28 职场文书
义诊活动总结
2015/02/04 职场文书
2016年公司新年寄语
2015/08/17 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
使用refresh_token实现无感刷新页面
2022/04/26 Javascript