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向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
js实现分割上传大文件
Mar 09 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
JavaScript如何使用插值实现图像渐变
Jun 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
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
基于python绘制科赫雪花
2018/06/22 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
python调用百度API实现人脸识别
2020/11/17 Python
在Python中实现字典反转案例
2020/12/05 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
初三语文教学计划
2015/01/22 职场文书
功夫熊猫观后感
2015/06/10 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
vue实现同时设置多个倒计时
2021/05/20 Vue.js
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
Elasticsearch 聚合查询和排序
2022/04/19 Python
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python