JavaScript类的继承多种实现方法

类的继承

1 子承父业

extends（继承父类的普通函数）（方法）

class Father {
      constructor() {
      }
      money() {
        console.log(100);
      }
    }
    class Son extends Father {
    }
    class sunzi extends Son {

    }
    var yxf = new Father;
    var lbw = new Son;
    var bb = new sunzi;
    console.log(yxf.money());
    console.log(lbw.money());
    console.log(bb.money());

super的用法

用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数（方法）

class Father1 {
      constructor(x,y) {
        this.x = x;
        this.y = y;
      }
      sum() {
        console.log(this.x + this.y);
      }
    }
    class Son1 extends Father1 {
      constructor(x,y){
        super(x,y);
      }
    }
    var yxf = new Son1(1,2);
    yxf.sum();

super关键字调用就近原则

<script>
    //super关键字调用父类普通函数
    class Father {
      say() {
        return '我是爸爸';
      }
    }
    class Son extends Father {
      say() {
      //   return '我是儿子';
      console.log( super.say());

      }
    }
    var yxf = new Son();
    yxf.say();//返回结果：我是儿子 就近原则
    //继承中的属性或方法查找原则：就近原则
    //1.继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类；
    //2.继承中，如果子类里面没有，就去查找父类有没有如果有就用父类
  </script>

子类继承父类，同时扩展自己的方法

注意：子类子构造函数使用super 必须放到this的前面（必须先调用父类的构造方法 再使用子类的构造方法）父亲永远是第一位的！！！！

<script>
    class Father {
      constructor(x,y){
        this.x = x;
        this.y = y;
      }
      sum() {
        console.log(this.x + this.y);
      }
    }
    // 子类继承父类加法 同时扩展减法
    class Son extends Father {
      constructor(x,y) {
        //利用super调用父类的构造函数
        //super 必须在子类this之前调用
        super(x,y);
        this.x = x;
        this.y = y;
      }
      sub() {
        console.log(this.x - this.y);
      }
    }
    var son = new Son(1,2);
    son.sum();
    son.sub();
  </script>
 <script>
    //super关键字调用父类普通函数
    class Father {
      say() {
        return '我是爸爸';
      }
    }
    class Son extends Father {
      say() {
      //   return '我是儿子';
      console.log( super.say());
      }
    }
    var yxf = new Son();
    yxf.say();//返回结果：我是儿子 就近原则
    //继承中的属性或方法查找原则：就近原则
    //1.继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类；
    //2.继承中，如果子类里面没有，就去查找父类有没有如果有就用父类
  </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript类和继承 this属性使用说明

    this属性表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: 复制代码 代码如下: <script type="text/javascript"> console.log(this === window); // true consol

  • 浅谈nodejs中的类定义和继承的套路

    浅谈nodejs中的类定义和继承的套路

    javascript是一门极其灵活的语言. 灵活到你无法忍受! 我个人喜欢强类型的语言,例如c/c++,c#等. 但是js代表着未来,所以需要学习. js中类定义以及继承有n多种方式,现在来学习一下nodejs类定义以及继承的固定套路. 套路1. 在构造函数(constructor)中总是使用instanceof操作符: function Base() { if (!(this instanceof Base)) { return new Base(); } } 上述代码的含义就是: 如果Bas

  • JS继承--原型链继承和类式继承

    JS继承--原型链继承和类式继承

    什么是继承啊?答:别人白给你的过程就叫继承. 为什么要用继承呢?答:捡现成的呗. 好吧,既然大家都想捡现成的,那就要学会怎么继承! 在了解之前,你需要先了解构造函数.对象.原型链等概念...... JS里常用的两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 原型链继承: 复制代码 代码如下: //要继承的对象var parent={name : "baba" say : function(){ alert("I am baba");}} //

  • JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    1.Object类 在JS中,Object是所有类的基类,使用Object类来创建自定义对象时,可以无需定义构造函数(constructor,prototype,hasOwnProperty(property)) var per = new Object(); per.name = 'zhangsan'; per.age = ; alert(per.name + per.age); 我们想在程序中得到一个对象变量,只要能存储大量数据即可,这个时候,我们可以考虑使用Object类.Object类避

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • js中实现多态采用和继承类似的方法

    多态的实现可以采用和继承类似的方法.首先定义一个抽象类,其中调用一些虚方法,虚方法在抽象类中没用定义,而是通过其具体的实现类来实现. 如下面的例子: Object.extend=function(destination,source){ for(property in source){ destination[property]=source[property]; } return destination; } //定义一个抽象基类base,无构造函数 function base(){}; ba

  • js继承 Base类的源码解析

    // timestamp: Tue, 01 May 2007 19:13:00 /* base2.js - copyright 2007, Dean Edwards http://www.opensource.org/licenses/mit-license */ // You know, writing a javascript library is awfully time consuming. //////////////////// BEGIN: CLOSURE ////////////

  • 在JavaScript中模拟类(class)及类的继承关系

    Javascipt语法不支持"类"(class)[es6已经支持],但是有模拟类的方法.今天我主要谈谈Javascipt中模拟"类"的方法及js中继承的总结和回顾. js中实现"类"与继承,既是重点,又是难点.很多同学可能都对js中"类"与继承都有所了解,但是深入剖析的时候,感觉力不从心.模棱两可. 我们先来总结一下js定义"类"的几种方法: 方法一:构造函数法 这个方法是比较经典的方法,我们会经常见到.生

  • JavaScript类的继承多种实现方法

    类的继承 1 子承父业 extends(继承父类的普通函数)(方法) class Father { constructor() { } money() { console.log(100); } } class Son extends Father { } class sunzi extends Son { } var yxf = new Father; var lbw = new Son; var bb = new sunzi; console.log(yxf.money()); consol

  • JavaScript类的继承方法小结【组合继承分析】

    本文实例讲述了JavaScript类的继承方法.分享给大家供大家参考,具体如下: 在JavaScript 里,被继承的函数称为超类型(父类,基类也行,其他语言叫法),继承的函数称为子类型(子类,派生类).继承也有之前问题,比如字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数. 为了解决引用共享和超类型无法传参的问题,我们采用一种叫借用构造函数的技术,或者成为对象冒充(伪造对象.经典继承)的技术来解决这两种问题. function aObj(){ this.name

  • JavaScript类的继承操作实例总结

    本文实例总结了JavaScript类的继承操作.分享给大家供大家参考,具体如下: 一.类式继承 首先要做的是创建构造函数.按惯例,其名称就是类名,首字母应该大写.在构造函数中,创建实例属性要用关键字this .类的方法则被添加到prototype对象中.要创建该类的实例,只需结合关键字new调用这构造函数即可. /* Class Person. */ function Person(name) { this.name = name; } Person.prototype.getName = fu

  • JavaScript类和继承 prototype属性

    我们已经在第一章中使用prototype属性模拟类和继承的实现. prototype属性本质上还是一个JavaScript对象. 并且每个函数都有一个默认的prototype属性. 如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数. 比如下面一个简单的场景: 复制代码 代码如下: // 构造函数 function Person(name) { this.name = name; } // 定义Person的原型,原型中的属性可以被自定义对象引用 Person.prototype

  • javascript类式继承新的尝试

    我今天做的尝试是,如何更它更像其他的语言一样的使用继承机制,多层继承和更方面的调用父类的构造. 我希望达到的效果: 复制代码 代码如下: function A(){ alert('a'); } function B(){ this.$supClass(); alert('b'); } extend(B,A); function C(){ this.$supClass(); alert('c'); } extend(C,B); var c = new C(); alert( c instanceo

  • Javascript 类的继承实现代码

    JavaScript中类的学习,从基本类继承过来方法 也可以这样实现: Java代码 复制代码 代码如下: function newClass(){ this.firstName="frank"; this.toUc=String.toUpperCase; this.toString=function(){ return this.toUc(this.firstName); } } var nc=new newClass(); alert(nc);//在IE中没反应.. functio

  • javascript中数组的多种定义方法和常用函数简介

    数组的定义:方法1. 复制代码 代码如下: var mycars=new Array()mycars[0]="sharejs.com"mycars[1]="Volvo"mycars[2]="BMW" 方法2.定义和初始化一起: 复制代码 代码如下: var mycars=new Array("Saab","Volvo","BMW"); 或者: 复制代码 代码如下: var mycars=

  • javascript 类定义的4种方法

    复制代码 代码如下: /* 工厂方式--- 创建并返回特定类型的对象的 工厂函数 ( factory function ) */ function createCar(color,doors,mpg){ var tempCar = new Object; tempCar.color = color; tempCar.doors = doors; tempCar.mpg = mpg; tempCar.showCar = function(){ alert(this.color + " "

  • JavaScript类和继承 constructor属性

    constructor属性始终指向创建当前对象的构造函数.比如下面例子:比如下面例子: 复制代码 代码如下: // 等价于 var foo = new Array(1, 56, 34, 12); var arr = [1, 56, 34, 12]; console.log(arr.constructor === Array); // true // 等价于 var foo = new Function(); var Foo = function() { }; console.log(Foo.co

随机推荐