从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(class)里来的?

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(class)里来的?脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

function GirlFriend(@H_512_30@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

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

前一种方法的炮姐:

从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(class)里来的?

用了Class的炮姐:

从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(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中继承这点事,虽然这看上去跟真的似的,但是这还是个语法糖,还是原型链那点事

从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(class)里来的?


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

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(class)里来的?全部内容,希望文章能够帮你解决从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(class)里来的?所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。