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实现计算加载页面所用的时间
Apr 02 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
JqGrid web打印实现代码
May 31 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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/03 咖啡文化
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
Puppet的一些技巧
2018/09/17 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
vue实现简单的日历效果
2020/09/24 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
python处理大数字的方法
2015/05/27 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python unittest实现api自动化测试
2018/04/04 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Sanic框架配置操作分析
2018/07/17 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Python绘制动态水球图过程详解
2020/06/03 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
中层竞聘演讲稿
2014/01/09 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
党员先进事迹材料
2014/12/19 职场文书
销售员自我评价
2015/03/11 职场文书
聘任书格式及范文
2015/09/21 职场文书