<!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原生设计模式——2面向对象编程之继承—call(this)构造函数式继承的更多相关文章

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

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

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

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

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

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

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

    <!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原生继承之——构造函数式继承实例

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

  9. js原生设计模式——12装饰者模式

    1.面向对象模式装饰者 <!DOCTYPE html><html lang="en"><head>    <meta charset=&q ...

随机推荐

  1. HDU 2485 Destroying the bus stations

    2015 ACM / ICPC 北京站 热身赛 C题 #include<cstdio> #include<cstring> #include<cmath> #inc ...

  2. 第2课 Linux操作系统简介

    1. Linux操作系统的构成 (1)内核(kernel) ①操作系统的核心,负责管理系统的进程.内存.设备驱动程序.文件和网络系统. ②控制系统和硬件之间的相互通信. ③决定着系统的性能和稳定性. ...

  3. 修炼dp( 2 )

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

  4. ural1521 War Games 2

    War Games 2 Time limit: 1.0 secondMemory limit: 64 MB Background During the latest war games (this s ...

  5. swift 自学小计

    返回多个value func Myfunc()->(double,double,double) { return (3.14,2.33,9.88) } 动态参数 func Myfunc(numb ...

  6. 记一次gitlab添加账号收不到邮件的解决办法

    之前gitlab创建账号可以正常收到邮件,最近就收不到,查了gitlab的配置以及postfix都没有问题,发来查看了发信25端口,该端口被屏蔽,提交工单到阿里云那边收到回复说是服务器统一关闭25端口 ...

  7. 使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项

    导航栏到小屏幕的时候,我们的处理办法是隐藏为一个按钮.可是选项卡的标签页部分,我们的处理办法是加一个水平滚动条.但是加水平滚动条需要解决一个问题,就是宽度的问题,如果不设置宽度,他就会根据屏幕大小自适 ...

  8. EasyUi中的datagird中a标签的click事件无法触发？（已解决）

    ***************************2015-10-29 21:07************************* 问题如下: datagrid最后一列编辑中有如下a标签 { f ...

  9. jQuery Ajax 二次封装

    jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...

  10. CodeForces 660B Seating On Bus

    模拟. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #inc ...