<!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. One Bomb

    One Bomb time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  2. Naive Bayes在mapreduce上的实现(转)

    Naive Bayes在mapreduce上的实现 原文地址 http://www.cnblogs.com/sunrye/p/4553732.html Naive Bayes是比较常用的分类器,因为思 ...

  3. Chapter 1 First Sight——5

    "He's in a wheelchair now," Charlie continued when I didn't respond, 他现在在轮椅上了,没等我回答查理斯就继续说 ...

  4. Java基于Socket文件传输示例

    http://www.blogjava.net/sterning/archive/2007/10/13/152508.html 最近需要进行网络传输大文件,于是对基于socket的文件传输作了一个初步 ...

  5. my97datepicker开始日期小于结束日期格式化时间精确届时分秒

    my97datepicker开始日期小于结束日期格式化时间精确到时分秒 一 , 需求: 结束时间 > 开始时间, 不符合的时间段不能选择.比如我选择开始日期是7月28,那结束的日期将只能从7月2 ...

  6. css3的box-sizing--从此不用担心盒模型的不兼容

    前段时间阿里的面试问了关于盒模型的东西,众所周知,ie和标准盒模型是有着区别的.面试官问有没有什么办法可以改变盒模型的显示效果.答案是css3的box-sizing: 其可以取三个值: 1.值cont ...

  7. Selenium-Grid工作方式

    http://blog.csdn.net/five3/article/details/9428655 Selenium-Grid工作方式 标签: selenium-grid2webdriversele ...

  8. LNMP（Linux+Nginx+Mysql+PHP---源码）环境搭建

    LNMP(Linux+Nginx+Mysql+PHP(Perl)) Linux:[root@dep5 mysql]# cat /etc/issueRed Hat Enterprise Linux Se ...

  9. 关于服务器跨域问题（使用cors解决）

    1.配置cors依赖 pom中加入 <dependency> <groupId>com.thetransactioncompany</groupId> <ar ...

  10. JOSN反串行化

    JOSN编码的数据可以使用eval函数生产操作的类型. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC " ...