<!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. 关于数据结构的10个面试题(c语言实现)

    关于数据结构的10个面试题(c语言实现) 2010-04-21 22:17 5702人阅读 评论(0) 收藏 举报 数据结构面试c语言bttree 1.         输入一个链表的头结点,从尾到头 ...

  2. Win7+QTP10.0+IE9无法启动IE的解决方法

    请安装QTP补丁QTP_00626. 更多补丁请查阅:http://www.cnblogs.com/testware/archive/2010/10/13/1849985.html

  3. hihoCoder 1257 Snake Carpet（很简单的构造方法）

    2015 ACM / ICPC 北京现场赛 I 题 构造 注意一个小坑,每条蛇的输出是要从头到尾输出的. 还要注意的是,不能开数组去模拟构造过程,然后输出,那样会TLE的. #include < ...

  4. Android网络开发之OkHttp--基本用法实例化各个对象

    1.实例化OkHttpClient对象,OkHttpClient包含了以下属性,以及set()和get()方法.但并没有包含具体的执行方法,详情见源码. //实例化OkHttpClent对象 priv ...

  5. 自制ichartjs饼图

    饼图:2个数据: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> &l ...

  6. 转 android客户端版本检测更新，服务下载，通知栏显示

    看图, 只要点击取消或是下载完毕 通知才会消失!      代码是大部分是借用别人的,再自己修改,达到自己所需要的效果 xml文件 update.xml <?xml version=" ...

  7. switch条件语句规则

  8. spring事务的传播性的理解

    来自至顶网的文章 http://developer.zdnet.com.cn/2007/0521/402066.shtml

  9. With PHP frameworks, why is the “route” concept used?

    http://programmers.stackexchange.com/questions/122190/with-php-frameworks-why-is-the-route-concept-u ...

  10. 更改CI框架默认访问路径及去掉index.php

    下面是去掉index.php的操作 PHP CodeIgniter(CI)去掉 index.php - Langjun - 博客园 设置访问的默认路径是在