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

<!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-19 15:47:24

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

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

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

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面向对象编程之:封装、继承、多态

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

JS原型继承和类式继承

类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的.特别是当我们是用new 关键字的时候,就使得"类"的概念就越像其他语言中的类了.类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性.call和apply方法为类式继承提供了支持.通过改变this的作用环境,使得子类本身具有父类的各种属性. JavaScript var father = function() { this.age = 52; this.say = function() { al

面向对象JS ES5/ES6 类的书写 继承的实现 new关键字执行 this指向 原型链

一 .什么是面向对象? 面向对象(Object Oriented),简写OO,是一种软件开发方法. 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 面向对象的概念和应用已超越了程序设计和软件开发,扩展到如数据库系统.交互式界面.应用结构.应用平台.分布式系统.网络管理结构.CAD技术.人工智能等领域. 面向对象是相对于面向过程来讲的,面向对象方法,把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统建模,更贴近事物的自然运行模式. 编程范式 一般可以

js oop中的三种继承方法

JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方法.(继承的两方,发生在两个类之间)> 一.通过object实现继承 1:定义父类 function Parent(){} 2:定义子类 funtion Son(){} 3:通过原型给Object对象添加一个扩展方法. Object.prototype.customExtend = function(p

js如何是利用apply实现继承

js如何是利用apply实现继承:javascript是一种面向对象的语言,当然继承是它的重要特征之一,比如常规的可以使用原型实现继承,不过使用apply可是可以实现继承的,下面就通过代码实例介绍一下,关于apply函数这里就不介绍了,具体可以参阅javascript的call()和apply()的作用和区别一章节. 下面看代码实例: function Parent(username){ this.username=username; this.sayHello=function(){ aler

Swift学习——类的定义,使用,继承,构造等(五)

Swift学习--类的定义,使用.继承,构造等(五) 类的使用说明 1 使用class和类名来创建一个类名,比如: class student 2 类中属性的声明和常量和变量一样,唯一的差别就是他们的上下文是类 3 方法和函数声明也一样 // 1 ---- 简单的类介绍 class Student{ //变量学号初始化为0 var num = 0; //成员函数 func GetNum()->Int{ return num } } //创建类的实例对象 var student = Student

JS原型链与几种继承方法的对比

继承的方式有两种:接口继承.实现继承接口继承:即虚函数,父类只定义接口,不具体实现子类继承接口,自己负责实现这个方法,运行时动态决定调用哪个实现.实现继承:父类实现的方法,子类可以直接调用 JS中只支持实现继承,以原型链来实现. 回顾一下构造函数.原型.实例的关系:每个构造函数都有一个原型对象,原型对象又都包含一个constructor指针指向构造函数,实例包含一个_proto_内部属性指向原型对象. 继承的实现方法(父类型叫Parent,子类型叫Child)原本Child.prototype