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

相关文章

  • js动态生成按钮并动态生成8位随机数

    js动态生成按钮并动态生成8位随机数

    用js生成按钮,动态生成8位随机数的脚本
    2008-09-09
  • js绘制购物车抛物线动画

    js绘制购物车抛物线动画

    这篇文章主要为大家详细介绍了js绘制购物车抛物线动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript 学习点滴记录

    JavaScript 学习点滴记录

    HTML DOM (Document Object Model文档对象模型) DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件. DOM是以层次结构组织的节点或信息片断的集合.
    2009-04-04
  • Open and Print a Word Document

    Open and Print a Word Document

    Open and Print a Word Document...
    2007-06-06
  • JS实现上传文件显示进度条

    JS实现上传文件显示进度条

    这篇文章主要为大家详细介绍了JS实现上传文件显示进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 基于JS实现bookstore静态页面的实例代码

    基于JS实现bookstore静态页面的实例代码

    本文给大家分享一段核心代码基于js实现的bookstore静态页面,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-02-02
  • 如何在uniapp项目中嵌套H5 页面

    如何在uniapp项目中嵌套H5 页面

    在UniApp中可以通过使用 web-view 组件来嵌入H5页面,大概思路是在该页面的template部分添加web-view组件,设置src属性为所需嵌入的H5页面地址,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 微信小程序如何调用json数据接口并解析

    微信小程序如何调用json数据接口并解析

    这篇文章主要介绍了微信小程序如何调用json数据接口并解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • javascript获取ckeditor编辑器的值(实现代码)

    javascript获取ckeditor编辑器的值(实现代码)

    这篇文章主要介绍了javascript获取ckeditor编辑器的值,用于表单验证。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 老生常谈js动态添加事件--- 事件委托

    老生常谈js动态添加事件--- 事件委托

    下面小编就为大家带来一篇老生常谈js动态添加事件--- 事件委托。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论