JS继承用法实例分析

 更新时间:2015年02月05日 15:52:15   作者:magicfly9527  
这篇文章主要介绍了JS继承用法,实例分析了拷贝继承、类继承及原型继承等的使用技巧,需要的朋友可以参考下

本文实例分析了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 数组添加一个 indexOf 方法的实现代码

    Javascript 数组添加一个 indexOf 方法的实现代码

    Javascript 的字符串有个 indexOf 的方法,能够返回字符在指定的字符串中的位置,非常有用,本文介绍了如何给 Javascript 数组也添加一个类似的方法。
    2009-09-09
  • 用js替换除数字与逗号以外的所有字符的代码

    用js替换除数字与逗号以外的所有字符的代码

    用js实现的替换除数字与逗号以外的所有字符的代码,因为需要去除重复,这样的话就会有很多的逗号需要替换
    2014-06-06
  • JavaScript仿京东放大镜效果

    JavaScript仿京东放大镜效果

    这篇文章主要为大家详细介绍了JavaScript仿京东放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • javascript中的相等操作符(==与===区别)

    javascript中的相等操作符(==与===区别)

    这篇文章主要介绍了javascript中的相等操作符(==与===区别),需要的朋友可以参考下
    2019-12-12
  • JavaScript中?. 和??分别是什么详解

    JavaScript中?. 和??分别是什么详解

    在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,下面这篇文章主要给大家介绍了关于JavaScript中?. 和??分别是什么的相关资料,需要的朋友可以参考下
    2023-02-02
  • js轮播图代码分享

    js轮播图代码分享

    这篇文章主要为大家详细介绍了js轮播图代码,代码简洁,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • jQuery 事件绑定及取消 bind live delegate on one区别解析

    jQuery 事件绑定及取消 bind live delegate on one区别解析

    这篇文章主要介绍了jquery 事件绑定及取消 bind live delegate on one区别解析,本文给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • 微信小程序利用co处理异步流程的方法教程

    微信小程序利用co处理异步流程的方法教程

    最近在学习微信小程序,下面就学习的内容进行总结,这篇文章主要给大家介绍了关于微信小程序利用co处理异步流程的方法,文中给出了详细的介绍和示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-05-05
  • 使用bootstrapValidator插件进行动态添加表单元素并校验

    使用bootstrapValidator插件进行动态添加表单元素并校验

    动态添加表单元素,并调用bootstrapValidator的方法为表单添加校验规则,调用addField()方法实现功能。下面通过本文看下具体实现方法吧
    2016-09-09
  • es6新增对象的实用方法总结

    es6新增对象的实用方法总结

    在JavaScript中,几乎每一个值都是某种特定类型的对象,于是ES6也着重提升了对象的功能性,下面这篇文章主要给大家介绍了关于es6新增对象实用方法的相关资料,需要的朋友可以参考下
    2022-05-05

最新评论