<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>constructorfunctionInherit</title>
    <script type="text/javascript">
    //声明父类
    function superClass(id){
        this.id = id;
        this.books = ['html','css','js'];
    }
    superClass.prototype.getBooks = function(){
        console.log(this.books);
    }
    //声明子类
    function subClass(id){
        superClass.call(this,id);//让子this指向父this，后面带的是父类需传入的参数id
    }
    // subClass.prototype.getSubName = function(){
    //     console.log(this.id);
    // }
    //实例化对象测试
    var test1 = new subClass(1);
    var test2 = new subClass(2);
    test2.books.push('php');//test2插入的数据'php'不影响test1

console.log(test1.id);      //1
    console.log(test1.books);   //["html", "css", "js"]
    console.log(test2.id);      //2
    console.log(test2.books);   //["html", "css", "js", "php"]
    //注：构造函数式继承是访问不到父原型链上的属性和方法的
    test1.getBooks();   //报错：undefined is not a function

//本例已经通过验证
    </script>
</head>
<body>
    
</body>
</html>

js原生继承之——构造函数式继承实例的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. JS面向对象编程之：封装、继承、多态

    最近在实习公司写代码,被隔壁的哥们吐槽说,代码写的没有一点艺术.为了让我的代码多点艺术,我就重新温故了<javascript高级程序设计>(其中几章),然后又看了<javascrip ...

  7. js原生继承几种方式

    js原生继承 js本身并没有继承和类的概念,本质上是通过原型链(prototype)的形式实现的. 1.先写两个构造函数Parent和Child,用于将Child继承Parent function P ...

  8. js原型链理解(3)--构造借用继承

    构造借用(constructor strealing) 1.为什么已经存在原型链继承还要去使用构造借用 首先看一下这个例子 function Super(){ this.sets = [0,1,2]; ...

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

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

随机推荐

  1. HDU 4393 Throw nails（优先队列）

    优先队列的应用 好坑,好坑,好坑,重要的事情说三遍! #include<iostream> #include<cstdio> #include<cstring> # ...

  2. 【WiFi密码破解详细图文教程】ZOL仅此一份 详细介绍从CDlinux U盘启动到设置扫描破解-破解软件论坛-ZOL中关村在线

    body { font-family: Microsoft YaHei UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-ser ...

  3. MySQL数据类型：SQL_MODE设置不容忽视

    [IT168 技术]SQL_MODE可能是比较容易让开发人员和DBA忽略的一个变量,默认为空.SQL_MODE的设置其实是比较冒险的一种设置,因为在这种设置下可以允许一些非法操作,比如可以将NULL插 ...

  4. CodeForces 76E Points

    给出n个点,求任意两点间距离的平方和. 暴力显然超时,可以把公式写出来,化简一下,发现预处理一下后缀和就可以o(n)出解了. #include<cstdio> #include<cs ...

  5. PAT 天梯赛 L1-009 N个数求和

    模拟题 题目链接 题解 每次将两个分数进行相加,到最后再将结果化成带分数.主要考察的最大公约数与最小公倍数. 代码如下: #include<cstdio> #include<cstd ...

  6. 关于 CentOS 7 里面 普通用户 Ulimit max user processes 值的问题

    最近在对tomcat 的一个 项目进行 压测, 普通用户 启动 tomcat 的时候 压力上去以后就会报 java.lang.OutOfMemoryError 的错误, 这种错误 按道理来说都是 系统 ...

  7. DML、DDL、DCL区别及介绍

    DML(data manipulation language):        它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作 ...

  8. 从url中提取参数名和参数值(转)

    在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到.js的实现方法如下: function getValue(url, name) { var reg = new RegExp('(\\?| ...

  9. CentOS 6.4 x64 Percona-Server-5.6.15 源码安装

    首先下载 Percona-Server-5.6 http://www.percona.com/downloads/Percona-Server-5.6/LATEST/source/ 然后必须先安装cm ...

  10. 源码解析-knockout源码准备

    准备包括心理和资源两方面. 心理 我看过一句话说,当你用一个框架时,不要忙着看一遍使用教程就开始写项目,先去看看框架原理. 这句话我深以为然.现今前端快速发展,很多前端攻城狮都很茫然:框架更新太快了, ...