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 API学Jquery之一 选择器
Apr 07 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
PHP 引用文件技巧
2010/03/02 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
VUE写一个简单的表格实例
2019/08/06 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python同步两个文件夹下的内容
2019/08/29 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
如何用python批量调整视频声音
2020/12/22 Python
工会主席事迹材料
2014/06/03 职场文书
五一促销活动总结
2014/07/01 职场文书
班级课外活动总结
2014/07/09 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
查摆剖析材料范文
2014/09/30 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
数据库连接池
2021/04/06 MySQL
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS