<!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原生设计模式——2面向对象编程之继承—new类式继承的更多相关文章

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

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

  2. js原生设计模式——2面向对象编程之继承—new+call(this)组合式继承

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

  3. js原生设计模式——2面向对象编程之继承—多继承

    1.单对象克隆 <!DOCTYPE html><html lang="en"><head>    <meta charset=" ...

  4. js原生设计模式——2面向对象编程之继承—call(this)构造函数式继承

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

  5. js原生设计模式——2面向对象编程之js原生的链式调用

    技巧点:对象方法中返回当前对象就可以链式调用了,即方法中写return this; <!DOCTYPE html><html lang="en"><h ...

  6. js原生设计模式——2面向对象编程之闭包2

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

  7. js原生设计模式——2面向对象编程之闭包1

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

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

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

  9. js原生继承之——类式继承实例(推荐使用)

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

随机推荐

  1. POJ 1426 Find The Multiple BFS

    没什么好说的 从1开始进行广搜,因为只能包涵0和1,所以下一次需要搜索的值为next=now*10 和 next=now*10+1,每次判断一下就可以了,但是我一直不太明白我的代码为什么C++提交会错 ...

  2. js选择一个选项 跳出另一个选项 跳出一个输入框

    跳出输入框 <script language="javascript"> function $(obj){return document.getElementById( ...

  3. 深入Java单例模式(转)

    深入Java单例模式 源自 http://devbean.blog.51cto.com/448512/203501 在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容 ...

  4. 修炼dp( 2 )

    P1084 数字三角形4 题解:dp+dfs. #include <iostream> #include <cstdio> #include <algorithm> ...

  5. how to enable #ifdef macro in the command line of make?

    Compilers normally use the -D flags eg Code: test.o: test.cpp $(CC) $(CFLAGS) -DTEST1 test.cpp -o $@

  6. STM8单片机启动流程彻底探究--基于IAR开发环境

    初学STM8会发现,STM8官方的固件库并没有提供一个.s文件的启动代码,那么她是如何启动然后跳转到main函数执行的呢 首先,我们根据ARM的只是可以推测,STM8也是通过复位向量来启动的,假设流程 ...

  7. 解决IntelliJ IDEA 创建Maven项目速度慢问题 DarchetypeCatalog

    原因 IDEA根据maven archetype的本质,其实是执行mvn archetype:generate命令,该命令执行时,需要指定一个archetype-catalog.xml文件. 该命令的 ...

  8. php中var_dump() 打印出一个对象的时候，信息怎么看？

    php 的一个依赖注入容器, 说白了,就是用php 的反射类,来在运行的时候动态的分析类具有的函数,以及动态分析函数的参数, 从而实例化类,并执行类的方法. 另外,php 中的 typehint 还是 ...

  9. Tokumx 代替 Mongodb 群集部署

    一, 配置环境: 系统: CentOS 7 x64 tokumx1 ip: 192.168.0.155 tokumx2 ip: 192.168.0.156 tokumx3 ip: 192.168.0. ...

  10. mysql 大树据表update很慢

    问题描述: 数据表千万量级,update  where gid="adadfadsfasdf",返回结果显示耗时70ms到1s之间 分析: 表很大,那么update,可能先要取索引 ...