ES6 中的继承

ES6 继承  (逼格最高,也是未来的趋势,必学必用)

知识点:
class  类    ES6给我们提供了class的语法糖,可以通过class来创建类
 1       class Person {//此行没有括号,在第二行constructor()传参
 2           constructor(name,age){
 3               this.name = name;
 4               this.age = age;
 5           }
 6           /*下面的写法就等同于把方法挂在原型上*/
 7           static say(){// 加了static 静态方法,只给类用的方法
 8               console.log(‘哈哈‘);
 9           }//方法和方法之间不用加逗号 ,
10           say(){//动态方法,给实例使用的方法
11               console.log(this.name);
12           }
13       }
14
15       let p = new Person(‘成龙‘,20);
16       p.say();//成龙

声明子类 extends 父类名 就继承父类了

 1      class Coder extends Person {
 2          /*
 3              在子类constructor中添加属性的小技巧
 4
 5              专属于子类的属性写在参数的前面,父类的属性放在后面
 6              这样一来,就能直接使用...arg
 7
 8              ...arg
 9                  把函数中的多余的参数放入数组中体现出来。
10
11          */
12          constructor(job,...arg){
13              // console.log(this)
14              super(...arg); //等同于调用父类,把多余的参数(和父类一样的属性)放到super中,达到继承父类属性的目的
15              /*
16                  在继承里,写constructor必须写super
17                  super下面才能使用this,super有暂存死区(super上面不能使用this,用了就报错)
18              */
19              this.job = job;//自己私有的属性,直接this点即可
20              console.log(arg);
21          }
22          codeing(){
23              console.log(‘敲代码‘);
24          }
25          say(){
26              console.log(‘哈哈‘);
27          }
28
29      }
30
31      let c = new Coder(‘前端‘,‘周杰伦‘,20);
32      let p = new Person(‘张杰‘,30);
33      // delete c.name;
34      console.log(c);
35      // c.say();
36      // p.say();
37      // c.codeing();

原文地址:https://www.cnblogs.com/MrZhujl/p/9937657.html

时间: 2024-10-09 12:14:35

ES6 中的继承的相关文章

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

ES5和ES6中的继承 图解

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

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

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

JS创建对象、继承原型、ES6中class继承

面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,yingjiangyong等.每个实例表示具体的领导,他们 都属于Leader类型.ES6之前的版本中没有类和实例,是通过原型prototype完成面向对象编程.区别:JS中没有类和对象,所有的对象都是实例,只是把一个对象的原型指向另一个对象.//创建对象的第一种方法:.__proto__var Un

ES5与ES6中的继承

ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam' this.sleep = function () { // 实例方法 return this.name + '正在睡觉' } } Father.prototype.eat = funciton () { // 原型方法 return this.name + '正在吃饭' } 一,原型链继承核心:将父

ES5中的继承和ES6中的继承

在JavaScript中,prototype.constructor.__proto__.构造函数.原型.实例这些概念已经很让人头疼,再加上ES6的class .extends已经乱成一锅粥了,平时对这些用的少写的少,是得好好捋清楚.看了几篇文章有了自己的理解,理解如下: 构造函数.prototype = 原型: 构造函数.prototype.constructor = 原型.constructor = 构造函数: new 构造函数 = 实例: 实例.constructor = 构造函数: 实例

浅谈es5和es6中的继承

首先给大家介绍下在es5中构造函数的继承 1 function A(){ 2 2 //构造函数A 3 3 this.name="我是A函数"; 4 4 } 5 5 6 6 A.prototype={ 7 7 constructor:A, 8 8 render(){ 9 9 console.log("我是A实例的render方法") 10 10 } 11 11 } 12 12 13 13 let a=new A(); 14 14 15 15 function B(a)

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; }

es6中class类的全方面理解(二)------继承

继承是面向对象中一个比较核心的概念.ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承.相较于ES5当中通过原型链继承要清晰和方便许多.先上代码: class Cucurbit{ constructor(name,color){ console.log("farther") this.name=name; this.color=color; } say(){ console.log("我的名字叫"