<!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. 第一个元素<flout>写了,想在他的旁边加一个元素.IE6会出现缝隙. 不要用margin撑开,要用flout

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. SDAU课程练习--problemC

    题目描述 Here is a famous story in Chinese history. "That was about 2300 years ago. General Tian Ji ...

  3. XHTML与HTML的差别

    HTML与XHTML之间的差别,粗略可以分为两大类比较:一个是功能上的差别,另外是书写习惯的差别.关于功能上的差别,主要是XHTML可兼容各大浏览器.手机以及PDA,并且浏览器也能快速正确地编译网页. ...

  4. HDU 1317(Floyd判断连通性+spfa判断正环)

    XYZZY Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  5. GtkImageMenuItem

    做了个工具条,每次点arrow出来的菜单都没图标,郁闷;查来查去,看源码,看css,最后知道GtkAction缺省就是对应GtkImageMenuItem,再一试,跟toolbar无关,换menu也不 ...

  6. 关于配置Tomcat的URIEncoding

    遇到的问题: 程序需要发送http GET请求到服务器,请求的参数中包含了中文字符.程序中参数为UTF-8格式,且经过了UTF-8 URL编码再发送.使用的tomcat服务器,但服务器端后台程序中取到 ...

  7. Cordova3+sencha touch2.x 环境搭建

    1.安装 nodejs 2.安装 cordova: npm install -g cordova 3.创建一个工程: cordova create MyApp com.example.MyApp My ...

  8. [Unity UGUI]UGUI提供多种不同的解决方案

    现代游戏和应用程序经常需要支持各种不同的屏幕分辨率,特别是UI布局需要能够适应.UI系统在统一中包括各种工具来实现此目的,可以以多种方式组合在一起. 在这个小节我们将使用一个简单的案例研究和观察和比较 ...

  9. protobuf c++ API

    1.在.proto文件中定义消息格式 2.使用protobuf编译器 3.使用c++ api来读写消息   0.为何使用protobuf?   1.原始内存数据结构,可以以二进制方式sent/save ...

  10. mustache.js使用基本（二）sections

    作者:zccst 本文记录基本使用二,主要讲sections. {{#person}} {{/person}} 1,当person是null, undefined, false, 0, NaN, &q ...