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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 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
一个域名查询的程序
2006/10/09 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php实现Session存储到Redis
2015/11/11 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP数组函数知识汇总
2016/05/12 PHP
php-fpm中max_children的配置
2019/03/15 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Three.js基础部分学习
2017/01/08 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
python中字符串数组逆序排列方法总结
2019/06/23 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
python中spy++的使用超详细教程
2021/01/29 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
民间借贷被告代理词
2015/05/23 职场文书
2016情人节宣传语
2015/07/14 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
SpringBoot整合Minio文件存储
2022/04/03 Java/Android