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 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
js替代copy(示例代码)
Nov 27 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 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
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP7匿名类用法分析
2016/09/26 PHP
js option删除代码集合
2008/11/12 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python的装饰器用法学习笔记
2016/06/24 Python
python中时间模块的基本使用教程
2019/05/14 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
python logging 日志的级别调整方式
2020/02/21 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python搜索算法原理及实例讲解
2020/11/18 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
P/Invoke是什么
2015/07/31 面试题
JSF界面控制层技术
2013/06/17 面试题
工厂采购员岗位职责
2014/04/08 职场文书
初中生评语大全
2014/04/24 职场文书
幼师求职自荐信
2014/05/31 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
公司委托书范本5篇
2014/09/20 职场文书
服务整改报告
2014/11/06 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android