<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>classInherit</title>
    <script type="text/javascript">
    //声明父类
    function superClass(){
        this.name = 'Lucy';
    }
    superClass.prototype.getName = function(){
        console.log(this.name);
    }
    //声明子类
    function subClass(){
        this.subname = 'Lilei';
        this.books = ['html','css','js'];
    }
    //类式继承
    subClass.prototype = new superClass();
    //注：一定要先继承，再添加子类原型方法，否则子类的实例调用子类原型方法时会报错：function is not defined
    subClass.prototype.getSubName = function(){
        console.log(this.subname);
    }
    //将子类的prototype原型constructor属性的指向修正为subClass子类，否则继承后默认指向了父类的原型上，会出问题
    subClass.prototype.constructor = subClass;
    //实例化对象测试
    var test1 = new subClass();
    var test2 = new subClass();
    console.log(test1.name);       //Lucy
    console.log(test1.subname);    //Lilei
    test1.getName();               //Lucy
    test1.getSubName();            //Lilei
    // console.log(test1.books);
    test1.books.push('php');
    console.log(test1.books);   //输出：["html", "css", "js", "php"]
    console.log(test2.books);   //输出：["html", "css", "js"]
                                // 两个实例之间不会影响
    //本例已经通过验证
    </script>
</head>
<body>
    
</body>
</html>

js原生继承之——类式继承实例(推荐使用)的更多相关文章

  1. js原生设计模式——2面向对象编程之继承—new类式继承

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. JS原型继承和类式继承

    前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...

  3. JavaScript中的类式继承和原型式继承

    最近在看<JavaScript设计模式>这本书,虽然内容比较晦涩,但是细品才发现此书内容的强大.刚看完第四章--继承,来做下笔记. 书中介绍了三种继承方式,类式继承.原型式继承和掺元类继承 ...

  4. js原生设计模式——2面向对象编程之继承—原型继承(类式继承的封装)

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. 精读JavaScript模式(八)，JS类式继承

    一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...

  6. JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)

    继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象   类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...

  7. js类式继承模式学习心得

    最近在学习<JavaScript模式>,感觉里面的5种继承模式写的很好,值得和大家分享. 类式继承模式#1--原型继承 方法 让子函数的原型来继承父函数实例出来的对象 <script ...

  8. js面向对象--类式继承

    //待研究//类式继承 //js中模拟类式继承的3个函数 //简单的辅助函数,让你可以将新函数绑定到对象的 prototype 上 Function.prototype.method = functi ...

  9. JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. base64编码的图片字节流存入html页面中的显示

    在图片数据中加载到一个img标签,并如下处理 <img src="data:image/png;base64,...

  2. arm nop

    MOV R0,R0 这个语句相当于做一次无用功,也就相当于实现了NOP.       接下去就是怎么修改机器码的部分.先查询手册,查到MOV 的机器码是0xE1A0(此处可能不同,主要看自己IDA反汇 ...

  3. string字符串转C风格字符串 进而转换为数字

    要求如题 头文件stdlib.h中有一个函数atof() 可以将字符串转化为双精度浮点数(double) double atof(const char *nptr); 此字符串为C风格字符串,因此需要 ...

  4. zencart_magiczoom

    mod_zencart_magiczoom使用   一.复制相应文件到相应目录. 二.安装sql文件. 三.按照正确命名上传商品图片,一般需要中图跟大图. 四.程序运行时会在images目录下创建ma ...

  5. ecshop二次开发添加快递

    以天天快递为例:步骤1.打开includes\modules\shipping文件夹,把sto_express.php复制多一份,重名为tt_express.php:步骤2.打开tt_express. ...

  6. ExtJS简介--车辆调度

    http://www.cnblogs.com/gaoweipeng/archive/2009/11/11/1599969.html

  7. android systemUI--Notification 整理

    PendingIntent Intent是一个意图,一个描述了想要启动一个Activity.Broadcast或是Service的意图.它主要持有的信息是它想要启动的组件(Activity.Broad ...

  8. javascript 数组合并

    javascript 中两个数组合并,当然可以遍历其中一个数组,通过push()方法将元素插入到另一个数组中. 另外,也可以使用内置的方法(javascript Array 对象上就具有的方法,或许比 ...

  9. hibernate和ibatis的区别

    通过别人的资料,进行自己关注的一些扼要点的整理 共同点: 1. 不同点:1. 自动化程度上,hibernate是全自动化的orm框架,提供了对象到数据库的完全映射和sql的内部自动生成,其对象映射是指 ...

  10. SecureCRT上传bash: rz: command not found

    SecureCRT上传bash: rz: command not found -bash: rz: command not found rz命令没找到? 执行sz,同样也没找到.     安装lrzs ...