本系列作为Effective JavaScript的读书笔记。

ECMAScript标准库不大。可是提供了一些重要的类型如Array,Function和Date。在一些场合下。你或许会考虑继承当中的某个类型来实现特定的功能。可是这样的做法并不被鼓舞。

比方为了操作一个文件夹。能够让文件夹类型继承Array类型例如以下:

function Dir(path, entries) {
this.path = path;
for (var i = 0, n = entries.length; i < n; i++) {
this[i] = entries[i];
}
}
Dir.prototype = Object.create(Array.prototype);
// extends Array var dir = new Dir("/tmp/mysite", ["index.html", "script.js", "style.css"]);
dir.length; // 0

可是能够发现。dir.length的值是0,而不是期待中的3。

发生这样的现象的原因在于:仅仅有当对象是真正的Array类型时,length属性才会起作用。

在ECMAScript标准中。定义了一个不可见的内部属性被称为
[[class]]。该属性的值仅仅是一个字符串,所以不要被误导觉得JavaScript也实现了自己的类型系统。所以,对于Array类型,这个属性的值就是“Array”。对于Function类型。这个属性的值就是“Function”。下表是ECMAScript定义的全部[[class]]
值:

那么当对象的类型确实是Array时,length属性的特别之处就在于:length的值会和该对象中被索引的属性个数保持一致。比方对于一个数组对象arr。arr[0]和arr[1]就表示该对象有两个被索引的属性。那么length的值就是2。当加入了arr[2]的时候。length的值会被自己主动同步成3。

相同地,当设置length值为2时。arr[2]会被自己主动设置成undefined。

可是当继承Array类型并创建实例时,该实例的
[[class]] 属性并非Array。而是Object。因此length属性不能正确的工作。

在JavaScript中,也提供了用于查询
[[class]] 属性的方法,即使用Object.prototype.toString方法:

var dir = new Dir("/", []);
Object.prototype.toString.call(dir); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"

因此,更好的实现方法是使用组合而不是继承:

function Dir(path, entries) {
this.path = path;
this.entries = entries; // array property
}
Dir.prototype.forEach = function(f, thisArg) {
if (typeof thisArg === "undefined") {
thisArg = this;
}
this.entries.forEach(f, thisArg);
};

以上代码将不再使用继承。而是将一部分功能代理给内部的entries属性来实现。该属性的值是一个Array类型对象。

ECMAScript标准库中,大部分的构造函数都会依赖内部属性值如 [[class]]
来实现正确的行为。对于继承这些标准类型的子类型。无法保证它们的行为是正确的。

因此。不要继承ECMAScript标准库中的类型如:

Array。
Boolean,
Date,
Function。
Number,RegExp,String

总结

  1. 继承标准类型可能会导致子类的行为不对,由于标准类型会依赖于内部属性诸如 [[class]]
  2. 优先使用组合的方式来实现功能。而不是使用继承。

Effective JavaScript Item 40 避免继承标准类型的更多相关文章

  1. Effective JavaScript Item 46 优先使用数组而不是Object类型来表示有顺序的集合

    本系列作为Effective JavaScript的读书笔记. ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 可是在使用for..in循环对Objec ...

  2. Effective JavaScript Item 39 绝不要重用父类型中的属性名

    本系列作为Effective JavaScript的读书笔记. 假设须要向Item 38中的Actor对象加入一个ID信息: function Actor(scene, x, y) { this.sc ...

  3. Effective JavaScript Item 51 在类数组对象上重用数组方法

    Array.prototype对象上的标准方法被设计为也能够在其他对象上重用 - 即使不是继承自Array的对象. 因此,在JavaScript中存折一些类数组对象(Array-like Object ...

  4. Effective JavaScript Item 30 理解prototype, getPrototypeOf和__proto__的不同

    本系列作为Effective JavaScript的读书笔记. prototype,getPropertyOf和__proto__是三个用来訪问prototype的方法.它们的命名方式非常类似因此非常 ...

  5. Effective JavaScript Item 38 调用父类的构造函数在子类的构造函数

    作为这一系列Effective JavaScript的读书笔记. 在一个游戏或者图形模拟的应用中.都会有场景(Scene)这一概念.在一个场景中会包括一个对象集合,这些对象被称为角色(Actor). ...

  6. Effective JavaScript Item 21 使用apply方法调用函数以传入可变參数列表

    本系列作为Effective JavaScript的读书笔记. 以下是一个拥有可变參数列表的方法的典型样例: average(1, 2, 3); // 2 average(1); // 1 avera ...

  7. Effective JavaScript Item 31 优先使用Object.getPrototypeOf,而不是__proto__

    本系列作为Effective JavaScript的读书笔记. 在ES5中引入了Object.getPrototypeOf作为获取对象原型对象的标准API.可是在非常多运行环境中.也提供了一个特殊的_ ...

  8. Effective JavaScript Item 49 对于数组遍历,优先使用for循环,而不是for..in循环

    本系列作为Effective JavaScript的读书笔记. 对于以下这段代码,能看出最后的平均数是多少吗? var scores = [98, 74, 85, 77, 93, 100, 89]; ...

  9. Effective JavaScript Item 37 认识this的隐式指向

    本系列作为Effective JavaScript的读书笔记. CSV数据通常都会被某种分隔符进行分隔.所以在实现CSV Reader时,须要支持不同的分隔符.那么,非常自然的一种实现就是将分隔符作为 ...

随机推荐

  1. 关于wdsl

    WSDL元素 WSDL元素基于XML语法描述了与服务进行交互的基本元素: Type(消息类型):数据类型定义的容器,它使用某种类型系统(如XSD). Message(消息):通信数据的抽象类型化定义, ...

  2. [agc008d]kth-k

    题意: 给你一个长度为N的整数序列X,构造一个整数序列a满足: 1.a的长度为$N^2$,且1~N中每个数字恰好出现N次: 2.数字i在a中第i次出现的位置为$X_i$: 如果不能构造输出“No”,否 ...

  3. HDU 6051 If the starlight never fade(原根+推式子)

    题目大意: 设\(f(i)\)为使\((x+y)^i \equiv x^i (mod\ p)\)成立的(x,y)的对数.其中\(1 \leq x \leq p-1 , 1\leq y\leq m\), ...

  4. BZOJ 4896 [Thusc2016]补退选 (Trie树维护vector)

    题目大意:略 这竟然是$thusc$的题... 先把询问里加入的串全拎出来,建出$Trie$树,$Trie$里每个节点都开一个$vector$记录操作标号,再记录操作数量$sum$ 然后瞎**搞搞就行 ...

  5. Python 中多线程之 _thread

    _thread模块是python 中多线程操作的一种模块方式,主要的原理是派生出多线程,然后给线程加锁,当线程结束的 时候取消锁,然后执行主程序 thread 模块和锁对象的说明 start_new_ ...

  6. 紫书 例题 11-14 UVa 1279 (动点最小生成树)(详细解释)

    这道题写了好久-- 在三维空间里面有动的点, 然后求有几次最小生成树. 其实很容易发现, 在最小生成树切换的时候,在这个时候一定有两条边相等, 而且等一下更大的那条边在最小生成树中,等一下更小的边不在 ...

  7. 【codeforces 22C】 System Administrator

    [题目链接]:http://codeforces.com/problemset/problem/22/C [题意] 给你n个点; 要求你构造一个含m条边的无向图; 使得任意两点之间都联通; 同时,要求 ...

  8. 洛谷—— P2904 [USACO08MAR]跨河River Crossing

    https://www.luogu.org/problem/show?pid=2904 题目描述 Farmer John is herding his N cows (1 <= N <= ...

  9. Mock+Proxy在SDK项目的自己主动化測试实战

    项目背景 广告SDK项目是为应用程序APP开发者提供移动广告平台接入的API程序集合,其形态就是一个植入宿主APP的jar包.提供的功能主要有以下几点: - 为APP请求广告内容 - 用户行为打点 - ...

  10. [Angular + TsLint] Disable directive selector tslint error

    @Directive({ // tslint:disable-next-line:directive-selector selector: '[scrollable]' })