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

<!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>

时间: 2024-10-12 16:33:22

js原生设计模式——2面向对象编程之继承—call(this)构造函数式继承的相关文章

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>classInherit</title>    <script type="text/javascript">    //声明父类    function superClass(){        this.name

js原生继承之——构造函数式继承实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>constructorfunctionInherit</title>    <script type="text/javascript">    //声明父类    function superClass(id){  

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

1.面向对象模式装饰者 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>面向对象—Decorator装饰者模式</title>    <script type="text/javascript">    //给实例对象(注:不影响类)动态添加职责的方式叫做Decor

js原生设计模式——8单例模式之简约版属性样式方法库

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>单例模式——在js中就是指的单个对象,可用于命名空间声明</title> </head><body>    <div id="box"></div></body><

js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)

桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>桥接模式之多元化类之间的实例化调用</title>    <script type="text/javascript">    //多维类的声明和调用(有点像类职责链模式)   

JS面向对象编程之:封装、继承、多态

最近在实习公司写代码,被隔壁的哥们吐槽说,代码写的没有一点艺术.为了让我的代码多点艺术,我就重新温故了<javascript高级程序设计>(其中几章),然后又看了<javascript设计模式>,然后觉得要写点心得体会,来整理自己所学的吧.以下是我个人见解,错了请轻喷,欢迎指出错误,乐于改正. 一.封装 (1)封装通俗的说,就是我有一些秘密不想让人知道,就通过私有化变量和私有化方法,这样外界就访问不到了.然后如果你有一些很想让大家知道的东西,你就可以通过this创建的属性看作是对象

C++面向对象编程之继承

一. 封装和继承 1.1 封装的概念 封装:通过访问控制属性对类类型中的属性和行为进行打包和限制. 1.2 继承:通过一种机制表达出类型之间的共性和特性的方式. 继承基本语法: class 子类名 : 继承方式1 父类1,继承方式2 父类2... { 类的定义 }; 继承方式: public  公有方式 private 私有方式 protected 保护方式 1.3 继承的特性 (1) 一个子类类型的对象在任何时候都可以看作基类类型的对象(心里始终要记着). (2) 一个父类类型的对象作为子类对

深入理解JavaScript系列(17):面向对象编程之概论

介绍 在本篇文章,我们考虑在ECMAScript中的面向对象编程的各个方面(虽然以前在许多文章中已经讨论过这个话题).我们将更多地从理论方面看这些问题. 特别是,我们会考虑对象的创建算法,对象(包括基本关系 - 继承)之间的关系是如何,也可以在讨论中使用(我希望将消除之前对于JavaScript中OOP的一些概念歧义). 英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-7-1-oop-general-theory/ 概论.范式与思想 在进行E

深入理解JavaScript系列(18):面向对象编程之ECMAScript实现(推荐)

介绍 本章是关于ECMAScript面向对象实现的第2篇,第1篇我们讨论的是概论和CEMAScript的比较,如果你还没有读第1篇,在进行本章之前,我强烈建议你先读一下第1篇,因为本篇实在太长了(35页). 英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/ 注:由于篇幅太长了,难免出现错误,时刻保持修正中. 在概论里,我们延伸到了ECMAScript,现在,当我们知道它OOP