由一道题让你彻底弄懂JS继承,由一道题彻底弄懂JS继承

怎么着继续 Date 对象?由一道题彻底弄懂 JS 继承

2018/01/25 · JavaScript
· Date,
继承

原版的书文出处: 撒网要见鱼   

前言

看法有限,如有描述不当之处,请援救及时提出,如有错误,会即时考订。

———-长文+多图预先警告,必要开销一定时间———-

旧事是从一次实际上要求中开头的。。。

某天,某人向自家寻求了3回救助,要协理写三个日期工具类,须要:

  • 此类继承自Date,拥有Date的有所属性和指标

  • 此类能够无限制拓展方法

印象点描述,正是需要能够这么:

// 假设最终的类是 MyDate,有一个getTest拓展方法
let date = new MyDate();

// 调用Date的方法,输出GMT绝对毫秒数
console.log(date.getTime());
// 调用拓展的方法,随便输出什么,譬如helloworld!
console.log(date.getTest());

于是乎,随手用JS中经典的由一道题让你彻底弄懂JS继承,由一道题彻底弄懂JS继承。结合寄生法写了叁个卫冕,然后,刚准备到家收工,一运营,却出现了以下的现象:

8455新葡萄娱乐 1

可是的心气是那样的: 😳囧

先前也没有蒙受过类似的难点,然后自己尝尝着用别样方法,多次品尝,均无果(不算暴力混合法的意况),其实回过头来看,是因为思路新奇,凭空想不到,并不是常理上有多难。。。

于是,借助强大的搜素引擎,搜集材料,最后,再本身总计了一番,才有了本文。

———-正文起头前———-

本文开头前,各位看官能够先暂停往下读,尝试下,在不借助于任何网络资料的动静下,是不是能兑现地点的要求?(就以10分钟为限吧)

前言

理念有限,如有描述不当之处,请匡助及时建议,如有错误,会立时查对。

20180201更新:

修改用词描述,如整合寄生式改成寄生组合式,修改多处笔误(感激@Yao
Ding的汇报)

———-长文+多图预先警告,需求开支自然时间———-

故事是从1回实际上供给中开头的。。。

某天,某人向自家寻求了二遍赞助,要扶植写三个日子工具类,供给:

  • 该类继承自Date,拥有Date的有着属性和对象

  • 该类能够轻易拓展方法

影像点描述,正是须要能够那样:

// 假设最终的类是 MyDate,有一个getTest拓展方法
let date = new MyDate();

// 调用Date的方法,输出GMT绝对毫秒数
console.log(date.getTime());
// 调用拓展的方法,随便输出什么,譬如helloworld!
console.log(date.getTest());

于是乎,随手用JS中经典的寄生组合式写了一个延续,然后,刚准备到家收工,一运营,却出现了以下的面貌:

8455新葡萄娱乐 2

唯独的心情是这么的: 😳囧

先前也向来不汇合过类似的标题,然后本身尝尝着用任何格局,数十四回品尝,均无果(不算暴力混合法的气象),其实回过头来看,是因为思路新奇,凭空想不到,并不是原理上有多难。。。

于是乎,借助强大的搜素引擎,搜集质地,最终,再自个儿总计了一番,才有了本文。

———-正文起始前———-

本文早先前,各位看官能够先暂停往下读,尝试下,在不借助于任何互联网资料的动静下,是不是能兑现地点的需要?(就以10分钟为限吧)

前言

看法有限,如有描述不当之处,请扶助及时提出,如有错误,会即时校正。

———-长文+多图预警,须要开支一定时间———-

有趣的事是从壹回实际上要求中初叶的。。。

某天,某人向本身寻求了1回赞助,要援救写一个日期工具类,须求:

  • 此类继承自Date,拥有Date的具有属性和对象
  • 该类能够随心所欲拓展方法

形象点描述,就是要求可以如此:

// 如若最后的类是 MyDate,有三个getTest拓展方法 let date = new MyDate();
// 调用Date的不二法门,输出达托霉素T相对纳秒数 console.log(date.getTime()); //
调用拓展的格局,随便输出什么,譬如helloworld!
console.log(date.getTest());

1
2
3
4
5
6
7
// 假设最终的类是 MyDate,有一个getTest拓展方法
let date = new MyDate();
 
// 调用Date的方法,输出GMT绝对毫秒数
console.log(date.getTime());
// 调用拓展的方法,随便输出什么,譬如helloworld!
console.log(date.getTest());

于是,随手用JS中经典的组成寄生法写了多个接续,然后,刚准备到家收工,一运维,却出现了以下的处境:

8455新葡萄娱乐 3

然则的心情是那般的: 😳囧

先前也从没境遇过类似的题材,然后本身尝尝着用任何措施,数十三回尝试,均无果(不算暴力混合法的景象),其实回过头来看,是因为思路新奇,凭空想不到,并不是原理上有多难。。。

于是,借助强大的搜素引擎,搜集资料,最终,再自身总计了一番,才有了本文。

———-正文开端前———-

正文早先前,各位看官能够先暂停往下读,尝试下,在不信赖任何互连网资料的情形下,是或不是能落到实处地点的供给?(就以10分钟为限吧)

8455新葡萄娱乐 4

大纲

  • 先说说哪些连忙便捷寻求解答

    • stackoverflow上早就有答案了!

    • 假使用的是普通话搜索。

  • 分析难点的最首要

    • 经文的继承法有什么难点

    • 8455新葡萄娱乐,怎么不能够被一而再?

  • 该怎么促成持续?

    • 强力混合法

    • ES5黑魔法

    • ES6大法

    • ES6写法,然后babel打包

  • 两种持续的微薄差距

  • ES6继续与ES5继续的区分

  • 构造函数与实例对象

  • 怎样飞快判断是或不是一连?

  • 写在最终的话

大纲

  • 先说说怎么着神速高效寻求解答

    • stackoverflow上早就有答案了!

    • 设若用的是汉语搜索。

  • 解析难题的要害

    • 经典的继承法有啥难题

    • 干什么不能被持续?

  • 该怎么着达成连续?

    • 强力混合法

    • ES5黑魔法

    • ES6大法

    • ES6写法,然后babel打包

  • 三种持续的轻微区别

  • ES6接续与ES5接续的区分

  • 构造函数与实例对象

  • [[Class]]与Internal slot

  • 什么样快速判断是不是持续?

  • 写在最后的话

大纲

  • 先说说什么样高效便捷寻求解答
    • stackoverflow上早就有答案了!
    • 万一用的是汉语搜索。
  • 剖析难点的重中之重
    • 经典的继承法有啥难题
    • 何以不只怕被接续?
  • 该怎么贯彻延续?
    • 暴力混合法
    • ES5黑魔法
    • ES6大法
    • ES6写法,然后babel打包
  • 二种持续的分寸差距
  • ES6继承与ES5继承的分别
  • 构造函数与实例对象
  • [[Class]]与Internal slot
  • 怎么快速判断是或不是继续?
  • 写在终极的话

前言

故事是从2回实际上须求中初露的。。。

某天,某人向小编寻求了叁遍支援,要拉扯写2个日期工具类,供给:

  • 此类继承自 Date,拥有Date的装有属性和指标

  • 此类能够肆意拓展方法

影像点描述,就是必要能够这么:

// 假设最终的类是 MyDate,有一个getTest拓展方法let date = new MyDate();// 调用Date的方法,输出GMT绝对毫秒数console.log(date.getTime());// 调用拓展的方法,随便输出什么,譬如helloworld!console.log(date.getTest());

于是,随手用JS中经典的结合寄生法写了贰个接续,然后,刚准备到家收工,一运维,却出现了以下的情景:

8455新葡萄娱乐 5

而是的情怀是那样的: 😳囧

先前也未尝遭逢过类似的题材,然后自个儿尝尝着用别样措施,多次品尝,均无果(不算暴力混合法的境况),其实回过头来看,是因为思路新奇,凭空想不到,并不是规律上有多难。。。

于是,借助强大的搜素引擎,搜集素材,最终,再本身总括了一番,才有了本文。

本文初阶前,各位看官可以先暂停往下读,尝试下,在不注重其他网络资料的动静下,是不是能落到实处地点的急需?(就以
10分钟为限吧)

先说说什么样快速高效寻求解答

遇见不会的难点,肯定首先对象正是何等快捷寻求消除方案,答案是:

  • 先去stackoverflow上看看有没有相近的题。。。

于是,借助搜索引擎搜索了下,第三条就符合条件,点开进去看描述

8455新葡萄娱乐 6

先说说哪些高效高效寻求解答

碰着不会的难点,肯定首先对象正是怎么样火速寻求化解方案,答案是:

  • 先去stackoverflow上看看有没有近似的题。。。

于是乎,借助搜索引擎搜索了下,第1条就符合条件,点开进去看描述

8455新葡萄娱乐 7

先说说怎样快速高效寻求解答

相遇不会的标题,肯定首先指标正是什么高效寻求解决方案,答案是:

  • 先去stackoverflow上看看有没有近似的题。。。

于是乎,借助搜索引擎搜索了下,第2条就符合条件,点开进去看描述

8455新葡萄娱乐 8

解析难点的重点

借助于stackoverflow上的答复。

stackoverflow上早就有答案了!

先说说结果,再浏览一番后,确实找到了化解方案,然后回过头来一看,惊到了,因为这些标题标提问时间是6 years, 7 months ago
相当于说,2011年的时候就早已有人建议了。。。

倍感温馨落后了三个暂且**>_<**。。。

8455新葡萄娱乐 9

再者还发现了2个细节,那正是viewed:10,606 times,也正是说于今一共也才10000屡次观望而已,考虑到前端行业的从事人数,那些比例惊人的低。
以点见面,看来,境遇那一个题指标人并不是诸多。

stackoverflow上早就有答案了!

先说说结果,再浏览一番后,确实找到了缓解方案,然后回过头来一看,惊到了,因为那些题材的问讯时间是6 years, 7 months ago
也正是说,2011年的时候就曾经有人提出了。。。

深感温馨落后了三个一时**>_<**。。。

8455新葡萄娱乐 10

还要还发现了一个细节,那正是viewed:10,606 times,也便是说现今总括也才30000频仍阅读而已,考虑到前端行业的从业人数,这一个比例惊人的低。
以点会面,看来,境遇那么些难题的人并不是不少。

stackoverflow上早就有答案了!

先说说结果,再浏览一番后,确实找到了消除方案,然后回过头来一看,惊到了,因为这几个题目的问话时间是6 years, 7 months ago
也正是说,2011年的时候就早已有人提议了。。。

感到本人落后了三个一代>_。。。

8455新葡萄娱乐 11

而且还发现了叁个细节,那正是viewed:10,606 times,也正是说到现在一共也才一万往往观看而已,考虑到前者行业的从事人数,这几个比重惊人的低。
以点会面,看来,遭遇那个标题标人并不是成都百货上千。

经文的继承法有什么难题

先看看本文最起先时提到的经典继承法完毕,如下:

/** * 经典的js组合寄生继承 */function MyDate() {    Date.apply(this, arguments);    this.abc = 1;}function inherits(subClass, superClass) {    function Inner() {}Inner.prototype = superClass.prototype;    subClass.prototype = new Inner();    subClass.prototype.constructor = subClass;}inherits(MyDate, Date);MyDate.prototype.getTest = function() {    return this.getTime();};let date = new MyDate();console.log(date.getTest());

正是那段代码⬆,那也是JavaScript高程(红宝书)中推介的一种,一直用,从未失手,结果今天马失前蹄。。。

咱俩再回想下它的报错:

8455新葡萄娱乐 128455新葡萄娱乐 13

再打字与印刷它的原型看看:

8455新葡萄娱乐 14

怎么看都没难点,因为依照原型链回溯规则, Date的有所原型方法都足以经过
MyDate指标的原型链往上回溯到。再细致看看,发现它的最重要并不是找不到形式,而是
thisisnotaDateobject.

嗯哼,也正是说,关键是:出于调用的靶子不是Date的实例,所以不容许调用,就到底和谐通过原型继承的也尤其。

比方用的是汉语搜索。

用粤语搜索并不丢人(我赶上标题时的本能反应也是去百度)。结果是这么的:

8455新葡萄娱乐 15

哦,看来英文关键字搜索效果不错,第1条就是符合供给的。然后又试了试中文搜索。

8455新葡萄娱乐 16
8455新葡萄娱乐 17

意义不如人意,搜索前几页,唯一有一条看起来相比像样的(segmentfault上的那条),点进去看

8455新葡萄娱乐 18
8455新葡萄娱乐 19

怎么说啊。。。这几个难题关切度不高,浏览器数较少,而且上边的题材讲述和预期的有点差异,依然是有人回复的。
可是,即便说难题在必然水平上取得了化解,不过回答者绕过了不能够持续那一个难点,有点未竟全功的趣味。。。

假如用的是普通话搜索。

用普通话搜索并不丢人(笔者遇见难题时的本能反应也是去百度)。结果是如此的:

8455新葡萄娱乐 20

嗯,看来英文关键字搜索效能不错,第③条正是符合要求的。然后又试了试中文搜索。

8455新葡萄娱乐 21
8455新葡萄娱乐 22

效果不如人意,搜索前几页,唯一有一条看起来相比较接近的(segmentfault上的那条),点进入看

8455新葡萄娱乐 23
8455新葡萄娱乐 24

怎么说吧。。。那些标题关心度不高,浏览器数较少,而且上面的难题讲述和预期的略微区别,照旧是有人回答的。
可是,固然说难点在听天由命程度上收获了缓解,可是回答者绕过了无法持续这些题目,有点未竟全功的趣味。。。

倘诺用的是汉语搜索。

用普通话搜索并不丢人(小编遭遇标题时的本能反应也是去百度)。结果是这么的:

8455新葡萄娱乐 25

嗯,看来英文关键字搜索效果不错,第二条便是符合供给的。然后又试了试汉语搜索。
8455新葡萄娱乐 26

8455新葡萄娱乐 27功用不如人意,搜索前几页,唯一有一条看起来相比接近的(segmentfault上的那条),点进入看

8455新葡萄娱乐 28
8455新葡萄娱乐 29

怎么说吗。。。那个题目关怀度不高,浏览器数较少,而且上面包车型地铁难题讲述和预期的多少区别,仍旧是有人回复的。
只是,即便说难题在肯定程度上获得了缓解,不过回答者绕过了不可能持续这一个标题,有点未竟全功的意味。。。

干什么不可能被再三再四?

首先,看看 MDN上的分解,上边有涉嫌,JavaScript的日期对象只可以通过
JavaScriptDate作为构造函数来实例化。

8455新葡萄娱乐 30

然后再看看stackoverflow上的答应:

8455新葡萄娱乐 31

有提到, v8引擎底层代码中有限定,若是调用对象的 [[Class]]不是
Date,则抛出荒唐。

看来,结合这两点,可以得出四个结论:要调用Date上格局的实例对象必须经过Date构造出来,否则差异意调用Date的方法。

浅析难题的首要性

依靠stackoverflow上的作答

浅析难点的基本点

借助stackoverflow上的对答

相关文章