从-1开始的ES6探索之旅02：小伙子，你对象咋来的？续篇 - 你的对象班（class）里来的？

incredible 发布于2019-08-21 18:41 / 1752人阅读

摘要：这是因为子类没有自己的对象，而是继承父类的对象，然后对其进行加工。

温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命
温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？
温馨提示-再续：ES6简直了，放着不用简直令人发指！

书接上回，即便是程序员，也还是能够通过自己的努力辛辛苦苦找到合适对象的，见前文《javascript对象不完全探索记录05：小伙子，你对象咋来的？下篇 - 啥样的对象适合你》

还记得我们新建一个炮姐和黑子废了多少事吗

function GirlFriend(name,hairColor,power){
    this.name = name;
    this.hairColor = hairColor;
    this.power = power;
}

GirlFriend.prototype.showPower = function(){
    console.log(this.power)
}

var mikoto = new GirlFriend("Mikoto","brown","Bilibili");
var kuroko = new GirlFriend("Kuroko","black","Telesport");

mikoto.showPower();//Bilibili
kuroko.showPower();//Telesport

class里来了新同学

当你擦擦额头的汗水一脸微笑地看着自己创建出的对象时，边上小哥早就拉着从class里找的对象去浪漫土耳其玩了一圈了。
其实在ES6的时代，你根本不用那么费劲，利用class这个概念，就可以帮你更方便的带来一个相对完美对象，例如刚才我们所做的，还可以通过下面的方式实现

class GirlFriend{
    constructor(name,hairColor,power){
        this.name = name;
        this.hairColor = hairColor;
        this.power = power;
    }
    showPower(){
        console.log(this.power)
    }
}

var mikoto = new GirlFriend("Mikoto","brown","Bilibili");
var kuroko = new GirlFriend("Kuroko","black","Telesport");
mikoto.showPower();//Bilibili
kuroko.showPower();//Telesport

我们在控制台上看看两个炮姐有什么不一样

前一种方法的炮姐：

用了Class的炮姐：

除了之前的对象方法是个匿名函数没有name属性之外没什么区别，所以放心的用吧！干的就是一件事！

再看看我们应该怎么做，其实很简单，就是把构造函数construtor()和其他对象方法一起放到你自己命名的class xxx{}中就可以了，再利用同构造函数法相同的方式把对象new出来就OK了
说到底利用这种方式构造的对象的原理其实和混合法／前文有说，是一样的

话又说回来，其实class这个关键字，我早就看好你了，这不就是类吗，上文所干的事情不就是在javascript里建了一个类吗，但事实上并不是这样的

ECMAScript 2015 中引入的 JavaScript 类(classes) 实质上是 JavaScript 现有的基于原型的继承的语法糖。 类语法不是向JavaScript引入一个新的面向对象的继承模型。JavaScript类提供了一个更简单和更清晰的语法来创建对象并处理继承。
摘自MDN Web docs - Web技术文档／javascript／类

说明白点，其实还是原型链那点事，只不过写的像类一样，这样方便大家理解和使用罢了，所以为了不产生不必要的误会，我决定就不叫它类了，就是class一个javascript中特有的概念

所以这回可以痛快的继承了？

是这样的，看上面定义中标黑的部分
在ES6中，通过对class的应用，有更好更方便的方式来处理继承
我们曾经举过妹妹的例子，妹妹是炮姐的克隆人，跟炮姐有相同的发色和Bilibili的能力，但是每个人有不同的能力级别，在没有用到class之前，我是这么干的

function Sister(level,number){
    this.level = level;
    this.number = number;
    this.showLevel = function(){
        console.log(this.level);
    }
}
Sister.prototype = mikoto;
var sister01 = new Sister(3,"0001");

而这个只是为了了解原型链相关原理的尝试，从最终的结果看借用了一些继承的思维，但继承说到底是类／class层面的，在之前不少前辈在javascript中尝试了对继承的实现，一文盖之JavaScript 中的继承 - MDN Web docs

但是在在ES6中既然有了class这个概念那么继承的概念呢
当然是有的！妹妹们，出来吧！

class Sister extends GirlFriend {
    constructor(name, hairColor, power, number, level) {
        super(name, hairColor, power);
        this.number = number;
        this.level = level;
    }
    showLevel() {
        console.log(this.level);
        super.showPower();
    }
}

var sister1 = new Sister("Sister", "brown", "Bilibili", "0001", 3);
sister1.showPower();//Bilibili
sister1.showLevel();//3,Bilibili

效果简直拔群，我们建立了和炮姐有同样发色和能力的妹妹，而且还能调用炮姐的能力，并且还有自己的新特性。
用法也很好理解，就是在你定义一个新的class Sister的时候让它extends要继承的class GirlFriend，新的class也可以有自己的构造函数，为自己添加新的属性，当然也可以有新的方法，还可以调用父class中的方法

这里面有个神奇的函数super()其实跟他一点不陌生，就跟关键字class一样在许多面向对象的语言中都会出现

而在创建妹妹的过程中，两次用到了super()，第一次是在构造函数中，通过super()调用了父class的构造函数使得妹妹也可以拥有和炮姐一样多的属性，第二次是在对象方法中，调用了父class的对象方法，使得妹妹在展示自己level的同时可以展示自己的Bilibili，在javascript中super()的用法也就主要是这两种

super([arguments]); 
// 调用 父对象/父类 的构造函数
super.functionOnParent([arguments]); 
// 调用 父对象/父类 上的方法`摘自MDN Web docs - Web技术文档／javascript／super

在这里要注意的一点是，在子class的constructor中必须先调用super才能使用关键字this，不然会报错的，究其原因

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

摘自ECMAScript6入门 Class的继承 - 阮一峰

关于javascript中继承这点事，虽然这看上去跟真的似的，但是这还是个语法糖，还是原型链那点事

这所谓的继承，就是让GirlFirend成为了Sister的原型对象而已

当然ES6中关于class相关的东西还有不少，学习路漫长啊

能看到这的都是真爱
发着烧写，满脸懵逼

云服务器 GPU云服务器现在发现你的优势迷你世界的云服务器从哪里来的链接云服务器输入你的凭证请检查你的网络或者防火墙设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90716.html

javascript对象不完全探索记录04：小伙子，你对象咋来的？中篇 - 现出你的原型！

摘要：译者注根据定义，没有原型，并作为这个原型链中的最后一个环节。由于这个属性不标准，因此一般不提倡使用。中用函数获得一个对象的。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命在上一篇博文javascript对象不完全探索记录03：小伙子，你对象咋来的？上篇，中大概说了说在js中，比较好理解的对象创建方式，分别是直接定义／字面量，和调用构造函数你对象还有原型？在一...

trigkit4 2019-08-22 11:22 评论0 收藏0
javascript对象不完全探索记录05：小伙子，你对象咋来的？下篇 - 啥样的对象适合你

摘要：温馨提示作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示续本文内容简单，发扬了潜入潜出的精神，请谨慎浪费时间温馨提示再续魔卡少女樱动画再开撒花经过前两篇文章的梳理对象不完全探索记录小伙子，你对象咋来的上篇对象不完全探索记温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：本文内容简单，发扬了潜入潜出的精神，请谨慎浪费时间温馨提示-再续：《魔...

hlcfan 2019-08-21 18:27 评论0 收藏0
javascript对象不完全探索记录03：小伙子，你对象咋来的？上篇

摘要：看着别人写的功能对，就直接拿过来用，写出来的代码臃肿到爆炸，满屏幕的的初级使用方式，运气好了能凑合跑起来，出了问题全脸懵逼，心中安慰自己一万遍我可是干设计的，但是既然打算好好整下就得从头开始看了。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命首先，说实话，我对不起javascript，作为一个接触前端快10年的老前端(伪)，一直发扬的是不求甚解的拿来就用主义。看...

Pluser 2019-08-22 11:15 评论0 收藏0
Redux之旅－2

摘要：之旅时间作者三月懒驴入门配置文章链接之旅链接前言上一篇文章，很简单的用代码来说明了，，，各自的意义和相互的联系以及在实际开发的应用。分割你的，使每一个更有意义，之后再合并回来。分割和合并和不同。的只有一个只有一个就意味着只有一个。 Redux之旅－2 时间：2016.4.22-11:24作者：三月懒驴入门配置文章：链接Redux之旅－1：链接 1. 前言上一篇文章，很简单的用代码来说...

liangzai_cool 2019-08-19 18:20 评论0 收藏0
从-1开始的ES6探索之旅01：颜文字成精的箭头函数上篇 - 大哥，你指哪呢？

摘要：基础语法参数参数参数函数声明参数参数参数表达式单一相当于参数参数参数表达式当只有一个参数时，圆括号是可选的单一参数函数声明单一参数函数声明没有参数的函数应该写成一对圆括号。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？之前在某些大神的代码中出现一串神秘符号类似于num =>...

Snailclimb 2019-08-21 18:36 评论0 收藏0