脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js封装可使用的构造函数继承用法

js封装可使用的构造函数继承用法分析

 更新时间：2015年01月28日 11:43:19   投稿：shichen2014  
这篇文章主要介绍了js封装可使用的构造函数继承用法,实例分析了使用属性拷贝来实现拷贝继承的技巧,需要的朋友可以参考下

本文实例讲述了js封装可使用的构造函数继承用法。分享给大家供大家参考。具体如下：

先来看下面这段代码

（YUI）库所用的方法：

复制代码 代码如下:
function extend(Child, Parent) {

　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
}

另外还有一种拷贝继承方法，属性拷贝：

这种方法与之前的不同，由于已经完成对child的原型进行扩展，不需要再重置child.prototype.constructor属性了，因为它不会再被覆盖。

与之前的方法相比，这个方法在效率上显然略孙一筹。因为这里执行的是对子对象原型的逐一拷贝。而非简单的原型链查询。

这种方式仅适用只包含基本数据类型的对象，所有的对象类型包括函数和数组，都是不可复制的，他们只支持引用传递。

复制代码 代码如下:
function extend2(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;
}

var Shape = function(){}
var TwoDShape = function(){}
Shape.prototype.name = 'shape';
Shape.prototype.toString = function(){
 return this.name;
}
extend2(TwoDShape,Shape);
var t = new TwoDShape();
t.name
//-->"shape"
t.toString();
//-->"shape"
TwoDShape.prototype.name = 'TwoDShape';
t.name
//-->"2d shape"
t.toString();
//-->"2d shape"

TwoDShape.prototype.toString === Shape.prototype.toString
//-->true
TwoDShape.prototype.name === Shape.prototype.name
//-->false

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript之移动端H5生成图片解决方案讲解

    JavaScript之移动端H5生成图片解决方案讲解

    这篇文章主要介绍了JavaScript之移动端H5生成图片解决方案讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • EXT中单击button按钮grid添加一行（光标位置可设置)的实例代码

    EXT中单击button按钮grid添加一行（光标位置可设置)的实例代码

    这篇文章主要介绍了EXT中单击button按钮grid添加一行（光标位置可设置)的实例代码 的相关资料,需要的朋友可以参考下
    2016-06-06
  • 使用JavaScript实现一个物理模拟

    使用JavaScript实现一个物理模拟

    最近掌门人在写3D游戏,对于其中的物理效果很感兴趣,今天我将使用纯JavaScript来实现一个简易的物理模拟,其中包括碰撞检测与响应、摩擦力与空气阻力、以及物体的破坏效果,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-01-01
  • 深入理解JSON数据源格式

    深入理解JSON数据源格式

    JSON 在很多场合下作为数据格式比XML要更加方便。JSON的数据由对象、数组和元素等格式组成。每种格式都可以包含合法的JavaScript数据类型
    2014-01-01
  • Element Plus UI 组件库中 mt-x 类详解

    Element Plus UI 组件库中 mt-x 类详解

    在ElementPlusUI组件库中,mt-x类用于设置元素的外边距,其中"mt"代表"margin-top",x表示外边距的大小,这种类名的使用可以快速调整元素的顶部外边距,简化样式管理,确保设计的一致性,本文给大家介绍Element Plus UI 组件库中 mt-x 类基本知识,感兴趣的朋友一起看看吧
    2024-11-11
  • 微信开发 使用picker封装省市区三级联动模板

    微信开发 使用picker封装省市区三级联动模板

    这篇文章主要学习微信开发，如何使用picker封装省市区三级联动模板,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • bootstrap实现轮播图效果

    bootstrap实现轮播图效果

    这篇文章主要为大家详细介绍了bootstrap实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JS触摸事件、手势事件详解

    JS触摸事件、手势事件详解

    本篇文章主要介绍了JS触摸事件、手势事件详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 可拖拽组件slider.js使用方法详解

    可拖拽组件slider.js使用方法详解

    这篇文章主要为大家详细介绍了可拖拽组件slider.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 基于javascript实现窗口抖动效果

    基于javascript实现窗口抖动效果

    这篇文章主要介绍了基于javascript实现窗口抖动效果,需要的朋友可以参考下
    2016-01-01

最新评论