Effective JavaScript Item 40 avoids inheriting standard types

this series as effective JavaScript 's reading notes.

ECMAScript The standard library is small. However, some important types such as Array,Function , and Dateare provided. On some occasions. You might consider inheriting one of the types to implement a particular function. But that is not encouraging.

For example, to manipulate a folder. The ability to have folder types inherit the Array type such as the following:

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 Arrayvar dir = new Dir ("/tmp/mysite", ["index.html", " Script.js "," Style.css "]);d ir.length; 0

but to find out. The value of the dir.length is 0, not the expected 3.

The reason for this happening is that only when the object is real Array type, length property does not work.

in theECMAScriptthe standard. Defines an invisible intrinsic property that is called[[Class]]. The value of this property is just a string, so don't be misled to thinkJavaScriptIt also implements its own type system. So, forArraytype, the value of this property is "Array". ForFunctiontype. The value of this property is "Function". The following table isECMAScriptall of the definitions[[Class]]values:

So when the object type is reallyArraywhen thelengthThe special thing about attributes is that:lengthvalues are consistent with the number of indexed properties in the object. For example, for an array objectarr. Arr[0]and theArr[1]indicates that the object has two indexed properties. Solengththe value is2. When you join theArr[2]the time. lengthwill be actively synchronized to the3.

Similarly, when the length value is set to 2 . arr[2] will be voluntarily set to undefined.

But when the inheritance Array type and creates an instance, the instance's [[Class]] property is not Array . But Object. Therefore the length property does not work correctly.

in the JavaScript is also available for querying [[Class]] property, that is, by using the Object.prototype.toString Method:

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

Therefore, a better approach is to use composition rather than inheritance:

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);};

the above code will no longer use inheritance. Instead, a subset of the functionality is delegated to the internal entries property. The value of this property is an Array type Object.

ECMAScript in the standard library, most constructors rely on intrinsic property values such as [[Class]] to achieve the right behavior. For subtypes that inherit these standard types. There is no guarantee that they will behave correctly.

So. Do not inherit types from the ECMAScript standard library such as:

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

Summarize

1. inheriting a standard type may cause the child class to behave wrong, because the standard type relies on internal properties such as [[Class]]
2. Prioritize the use of a combination of methods to implement functionality. Instead of using inheritance.

Effective JavaScript Item 40 avoids inheriting standard types