<!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. Android-----获取屏幕分辨率DisplayMetrics简介 .

    引自:http://blog.csdn.net/zhangqijie001/article/details/5894872 Android 可设置为随着窗口大小调整缩放比例,但即便如此,手机程序设计人 ...

  2. opencart配置mail服务

    编辑mail配置,如下图所示 如果sever开启了SSL,则端口改成465 在Contant Us页面留言,发送成功则配置完成

  3. PAT (Advanced Level) 1007. Maximum Subsequence Sum (25)

    简单DP. 注意:If all the K numbers are negative, then its maximum sum is defined to be 0, and you are sup ...

  4. Java中Calendar的用法

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Times } span.s1 { font: 13.0px Courier; backgro ...

  5. ZenCoding 个人理解和总结

    我的理解:ZenCoding是一个html简写的语法,可以最快速的生成html. 不少IDE应该都支持,我用的intellij idea是支持的. ZenCoding表示和CSS/JS有相通之处,比如 ...

  6. AOP：代理实现方式①通过继承②通过接口

    文件结构: 添加日志: package com.wangcf.manager; public class LogManager { public void add(){ System.out.prin ...

  7. 重启机器解决SSL都要输入密码问题

    在Nginx或Apache设置了SSL加密后,发现每次重启服务器后都要输入证书设置的密码,比较麻烦,不然Nginx或Apache无法使用,这时可以用私钥来做这件事.生成一个解密的key文件,替代原来k ...

  8. VS2010 中 error 2732: 链接规范与的早期规范冲突 的解决

    在实验室做项目的时候遇到了这个问题,终于整明白了. 一般来说这个错误出现在类似以下的语句中 extern "C" int yylex(void); extern "C&q ...

  9. Github上的600多个iOS开源类库

    Github上的600多个iOS开源类库,入下图所示,里面有很多资源,学习积累的好资源 地址:http://github.ibireme.com/github/list/ios/

  10. leetcode--014 Gas station

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABGoAAADsCAIAAACjc9eHAAAgAElEQVR4nO3dTa7bRt4v4HczXoH2kS