JavaScript之ES6中的class与继承

参考:https://www.imooc.com/article/17389

https://www.cnblogs.com/chenyangsuaige/p/6130737.html

继承可以实现很好的封装,子类直接对父类的方法进行重用,还可以添加自己的属性和方法。

原型对象prototype是类的唯一标识符,类的继承是基于prototype的。

es5中类的继承

//es5 类的继承四部曲
//1、创建父类
function Parent(name){
    this.name = name;
}
Parent.prototype.location = "earth";
Parent.prototype.getName = function(){
    console.log(this.name);
}
//2、创建子类
function Son(name,age){
    Parent.call(this,name);//子类调用父类的构造函数
    this.age = age;
}
//3、创建继承,子类的原型对象是父类的一个实例
Son.prototype = new Parent();//这里Son.prototype._proto_=Parent.prototype,Son.prototype.constructor=Parent
//修正子类的constructor
Son.prototype.constructor = Son;
//4、添加子类成员
Son.prototype.id = 123;
Son.prototype.getAge = function(){
  console.log(this.age);
}

//创建一个实例
var student1 = new Son(‘asd‘,‘11‘);
student1.getName();//asd,继承自父类的方法
student1.getAge();//11,子类自己的方法

es6中类的继承

//es6中class与继承

//创建父类
class Parent{
    constructor(name){
        this.name = name;
    }//!!!注意,这里没有逗号
    getName(){
        console.log(this.name);
    }
}
//子类继承自父类
class Son extends Parent{
    constructor(name,age){
        super(name);//super指向父类的实例对象,调用父类的constructor,必须先调用super方法,子类才能使用this
        this.age = age;//子类继承父类的this对象并修改
    }
    getName(){
        super.getName();//调用父类的方法
        console.log(‘son‘);
    }
}

注意:

1、es6类中只能定义constructor属性和方法,方法全部定义在类的prototype中,且方法不可枚举;

2、es6中类的constructor属性相当于es5中的构造函数,如果没有定义constructor属性,默认会添加一个空的constructor;

3、es5中,继承是子类先创建自己的实例对象this,然后通过Parent.call(this)或Parent.apply(this)调用父类的方法;es6中,继承是父类先创建自己的实例对象this,然后子类继承父类的this,在子类的constructor中修改this。

原文地址:https://www.cnblogs.com/i-Leo/p/8808994.html

时间: 2024-11-06 21:40:16

JavaScript之ES6中的class与继承的相关文章

ES6中class的使用+继承

一.Class 介绍+基本语法(1).介绍通过class关键字,可以定义类.基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰.更像面向对象编程的语法而已. (2).Class 的基本语法 //definedClasses.js //定义类 class Person{ // 构造 constructor(x,y){ this.x = x; this.y = y; } //定义在类中的方法不需要添加functio

JavaScript、ES6中的类和对象

面向对象可以用于描述现实世界的事物,但是事物分为具体的(特指的)事物和抽象的(泛指的)事物. 面向对象思维的特点: 1.抽取(抽象)对象共有的属性和行为组织(封装)成一个类(模板) 2.对类进行实例化,获取类和对象 3.对象--特指的 1) 对象是一个具体的事物,一个苹果.一张网页.一个数据库.一个与远程服务器的连接也是对象: 2) javascript中 对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如,字符串.数值.数组.函数等. 属性:事物的特征,在对象中用属性来表示(常用名

ES5和ES6中对于继承的实现方法

在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是通过将子类构造函数的原型作为父类构造函数的实例,这样就连通了子类-子类原型-父类,原型链的特点就是逐层查找,从子类开始一直往上直到所有对象的原型Object.prototype,找到属性方法之后就会停止查找,所以下层的属性方法会覆盖上层. 一个基本的基于原型链的继承过程大概是这样的: //先来个父类

ES5和ES6中的继承 图解

Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了class和extends,和ES5搅在一起,加上平时很少自己写继承,简直乱成一锅粥.不过还 好,画个图一下就清晰了,下面不说话了,直接上图,上代码. ES5 ES5中的继承,看图: 1 function Super() {} 2 3 function Sub() {} 4 Sub.prototype

ES6中的CLASS继承

ES6中的CLASS继承:https://www.jianshu.com/p/3d3d52b47762 es6 javascript的Class 类的继承:https://blog.csdn.net/qq_30100043/article/details/53542531 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9911208.html

JavaScript ES6中export及export default的区别

相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export.import可以有多个,export default仅有一个. 具体使用: 1. //demo1.js export con

javascript中创建对象和实现继承

# oo ##创建对象 1. 原型.构造函数.实例之间的关系 * 原型的construct->构造函数:调用isPrototypeOf(obj)方法可以判定和实例的关系:  * 构造函数的prototype->原型:  * 实例的__proto__ ->原型(仅在chrome,safari,Firefox中存在,而共有的是[[prototype]]):用getPrototypeOf()方法可以返回[[prototype]]的值:  * 构造函数后构造函数的‘子类’new产生一个实例,可以

JavaScript中的原型和继承

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

ES5和ES6中的继承

看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: 1 function Super() {} 2 3 function Sub() {} 4 Sub.prototype = new Super(); 5 Sub.prototype.constructor = Sub; 6 7 var sub = new Sub(); 8 9 Sub.prototype.constructor