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程序设计有所帮助。

相关文章

  • 通过继承IHttpHandle实现JS插件的组织与管理

    通过继承IHttpHandle实现JS插件的组织与管理

    最近,项目中的用到的Js插件越来越多,有的是用原生javascript写的,有的是调用的jquery插件,页面上Js和Css文件的引用也越来越混乱,而且Js文件之间还有引用先后的依赖关系
    2010-07-07
  • JavaScript算法教程之sku(库存量单位)详解

    JavaScript算法教程之sku(库存量单位)详解

    这篇文章主要给大家介绍了JavaScript算法教程之sku(库存量单位)的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-06-06
  • JavaScript 反科里化 this [译]

    JavaScript 反科里化 this [译]

    本文主要讲了JavaScript中科里化和反科里化this的方法.话题来自于Brendan Eich(JavaScript之父)的一个tweet
    2012-09-09
  • 使用webpack和rollup打包组件库的方法

    使用webpack和rollup打包组件库的方法

    这篇文章主要介绍了使用webpack和rollup打包组件库的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • webpack-dev-server远程访问配置方法

    webpack-dev-server远程访问配置方法

    下面小编就为大家分享一篇webpack-dev-server远程访问配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • JavaScript 模块的循环加载实现方法

    JavaScript 模块的循环加载实现方法

    本文介绍JavaScript语言如何处理"循环加载"。目前,最常见的两种模块格式CommonJS和ES6,处理方法是不一样的,返回的结果也不一样
    2015-12-12
  • js实现简单进度条效果

    js实现简单进度条效果

    这篇文章主要为大家详细介绍了js实现简单进度条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • BootStrap modal模态弹窗使用小结

    BootStrap modal模态弹窗使用小结

    这篇文章主要为大家详细介绍了BootStrap modal模态弹窗使用小结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JS实现多级菜单中当前菜单不随页面跳转样式而发生变化

    JS实现多级菜单中当前菜单不随页面跳转样式而发生变化

    本文介绍了JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化,实现方法非常简单,感兴趣的朋友一起看看吧
    2017-05-05
  • Web Uploader文件上传插件使用详解

    Web Uploader文件上传插件使用详解

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。这篇文章主要为大家详细介绍了Web Uploader文件上传插件使用方法,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论