本系列作为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. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

  2. NodeJS 第一天学习

    NodeJS 第一天学习 严格模式 ECMAScript 5的严格模式是采用具有限制性JavaScript变体的一种方式,从而使代码显示地 脱离"马虎模式/稀松模式/懒散模式"(s ...

  3. 解决new Date的值为Invalid Date、NaN-NaN的问题

    错误代码: let timespan = 1515239514230; let dateTime = new Date(timespan); console.log(dateTime) // 返回 I ...

  4. weak和alias

    一.强符号和弱符号 在C语言中,如果多个模块定义同名全局符号时,链接器认为函数和已初始化的全局变量(包括显示初始化为0)是强符号,未初始化的全局变量是弱符号. 根据这个定义,Linux链接器使用下面的 ...

  5. oracle树操作(select .. start with .. connect by .. prior)

    oracle中的递归查询能够使用:select .. start with .. connect by .. prior 以下将会讲述oracle中树形查询的经常使用方式.仅仅涉及到一张表. star ...

  6. javascript jquery 推断对象为空的方式

    java中存在非常多空指针的问题,须要常常做预防和推断,如若不然,控制台出现恼人的异常,让人信心备受打击,早期敲代码的时候没有经验,不能依据异常信息找到问题的根源,唯一做的事情就是祈祷,千万别出现什么 ...

  7. SqlServer 错误日志切换和查看

    Sql Server 日志 和 代理错误日一般在实例重新启动后自己主动切换,假设实例久未重新启动,将可能积累太多的日志,不方便查看. 查看错误日志大小: --查看日志大小 EXEC xp_enumer ...

  8. angularjs作用域和函数调用

    <!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" ...

  9. ES cross cluster search跨集群查询

    ES 5.3以后出的新功能.测试demo如下: 下载ES 5.5版本,然后分别本机创建2个实例,配置如下: cluster.name: xx1 network.host: 127.0.0.1 http ...

  10. 【深入篇】自定义ExpandableListView,实现二级列表效果

    先看效果图: 上图是我们要实现的效果,那么现在我们开始着手去做,主要分为以下几步: 一丶我们需要根据效果图去思考该如何动手,从上图分析看,我们可以用一个相对布局RelativeLayout来完成gro ...