In-depth understanding of JavaScript series (18): ECMAScript implementation of object-oriented programming

Introduction

This chapter is the second part about the object-oriented implementation of ECMAScript. In the first part, we discussed the introduction and comparison of CEMAScript. If you have not read the first part, before proceeding with this chapter, I strongly recommend that you read the first part. 1 article, because this article is too long (35 pages).

English original text:http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/
Note: Due to the length of this article, errors are inevitable and are constantly being revised.

In the introduction, we extended to ECMAScript. Now, when we know its OOP implementation, let’s define it accurately:

Copy code The code is as follows:

ECMAScript is an object-oriented programming language supporting delegating inheritance based on prototypes.

ECMAScript is an object-oriented language that supports prototype-based delegated inheritance.
We will analyze it from the most basic data types. The first thing to understand is that ECMAScript uses primitive values and objects to distinguish entities. Therefore, what some articles say "In JavaScript, everything is an object" is Wrong (not quite right), primitive values are some of the data types we are going to discuss here.

Data Type

Although ECMAScript is a dynamically weakly typed language that can dynamically convert types, it still has data types. In other words, an object must belong to a real type.
There are 9 data types defined in the standard specification, but only 6 can be directly accessed in ECMAScript programs. They are: Undefined, Null, Boolean, String, Number, and Object.

The other three types can only be accessed at the implementation level (ECMAScript objects cannot use these types) and are used in specifications to explain some operational behaviors and save intermediate values. These 3 types are: Reference, List and Completion.

Therefore, Reference is used to explain operators such as delete, typeof, and this, and contains a base object and a property name; List describes the behavior of the parameter list (in new expressions and function calls); Completion is used to explain the behavior of break, continue, return and throw statements.

Primitive value types
Looking back at the 6 data types used in ECMAScript programs, the first 5 are primitive value types, including Undefined, Null, Boolean, String, Number, and Object.
Primitive value type example:

Copy code The code is as follows:

var a = undefined;

var b = null;

var c = true;

var d = 'test';

var e = 10;

These values are implemented directly on the bottom layer. They are not objects, so there is no prototype or constructor.

Uncle’s note: Although these native values are similar in name to the ones we usually use (Boolean, String, Number, Object), they are not the same thing. Therefore, the results of typeof(true) and typeof(Boolean) are different, because the result of typeof(Boolean) is function, so functions Boolean, String, and Number have prototypes (also mentioned in the reading and writing attributes chapter below).

If you want to know what type of data it is, it is best to use typeof. There is an example that you need to pay attention to. If you use typeof to determine the type of null, the result is object. Why? Because the type of null is defined as Null.

Copy code The code is as follows:

alert(typeof null); // "object"

The reason "object" is displayed is because the specification stipulates that typeof string value returns "object" for a Null value.

The specification doesn't imagine explaining this, but Brendan Eich (the inventor of JavaScript) noticed that null is mostly used in places where objects appear, as opposed to undefined, such as setting an object to a null reference. However, some people in some documents attributed it to a bug, and put the bug in the bug list that Brendan Eich also participated in the discussion. The result was that the result of typeof null was set to object (despite the 262-3 The standard defines that the type of null is Null, and 262-5 has modified the standard to say that the type of null is object).

Object type

Next, the Object type (not to be confused with the Object constructor, we are only discussing abstract types now) is the only data type that describes ECMAScript objects.

Object is an unordered collection of key-value pairs.
An object is an unordered collection of key-value pairs

The key value of an object is called an attribute, and an attribute is a container for primitive values and other objects. If the value of an attribute is a function we call it a method.

For example:

Copy code The code is as follows:

var x = { // Object "x" has 3 attributes: a, b, c

a: 10, // original value

b: {z: 100}, // Object "b" has an attribute z

c: function () { // function (method)

alert('method x.c');

}

};

alert(x.a); // 10

alert(x.b); // [object Object]

alert(x.b.z); // 100

x.c(); // 'method x.c'

Dynamic

As we pointed out in Chapter 17, objects in ES are completely dynamic. This means that we can add, modify or delete the properties of the object at will while the program is executing.

For example:

Copy code The code is as follows:

var foo = {x: 10};

//Add new attribute

foo.y = 20;

console.log(foo); // {x: 10, y: 20}

// Modify attribute value to function 

foo.x = function () {

console.log('foo.x');

};

foo.x(); // 'foo.x'

// Delete attribute 

delete foo.x;

console.log(foo); // {y: 20}

Some properties cannot be modified - (read-only properties, deleted properties or non-configurable properties). We will explain it later in the attribute properties.

In addition, the ES5 specification stipulates that static objects cannot be extended with new properties, and its property pages cannot be deleted or modified. They are so-called frozen objects, which can be obtained by applying the Object.freeze(o) method.

Copy code The code is as follows:

var foo = {x: 10};

// Freeze object

Object.freeze(foo);

console.log(Object.isFrozen(foo)); // true

// Cannot be modified 

foo.x = 100;

// Cannot be expanded 

foo.y = 200;

// Cannot delete 

delete foo.x;

console.log(foo); // {x: 10}

In the ES5 specification, the Object.preventExtensions(o) method is also used to prevent extensions, or the Object.defineProperty(o) method is used to define properties:

Copy code The code is as follows:

var foo = {x : 10};

Object.defineProperty(foo, "y", {

value: 20,

writable: false, // read-only

configurable: false // Not configurable

});

// Cannot be modified 

foo.y = 200;

// Cannot delete 

delete foo.y; // false

// Prevention and Control Extension

Object.preventExtensions(foo);

console.log(Object.isExtensible(foo)); // false

//Cannot add new attributes

foo.z = 30;

console.log(foo); {x: 10, y: 20}

Built-in objects, native objects and host objects

It is necessary to note that the specification also distinguishes between built-in objects, element objects and host objects.

Built-in objects and element objects are defined and implemented by the ECMAScript specification, and the differences between the two are insignificant. All objects implemented by ECMAScript are native objects (some of them are built-in objects, some are created when the program is executed, such as user-defined objects). Built-in objects are a subset of native objects that are built into ECMAScript before the program starts (for example, parseInt, Match, etc.). All host objects are provided by the host environment, usually the browser, and may include window, alert, etc.

Note that the host object may be implemented by ES itself, fully complying with the semantics of the specification. From this point of view, they can be called "native host" objects (as soon as possible theoretically), but the specification does not define the concept of "native host" objects.

Boolean, String and Number objects

In addition, the specification also defines some native special packaging classes. These objects are:

1. Boolean object
2. String object
3. Digital objects

These objects are created through the corresponding built-in constructors and contain native values as their internal properties. These objects can convert primitive values and vice versa.

Copy code The code is as follows:

var c = new Boolean(true);

var d = new String('test');

var e = new Number(10);

//Convert to original value

// Use function without new keyword 

с = Boolean(c);

d = String(d);

e = Number(e);

// Reconvert to object 

с = Object(c);

d = Object(d);

e = Object(e);

In addition, there are objects created by special built-in constructors: Function (function object constructor), Array (array constructor) RegExp (regular expression constructor), Math (math module), Date (date constructor) (container), etc. These objects are also values of the Object object type. Their differences from each other are managed by internal properties, which we discuss below.

Literal

For the values of three objects: object, array and regular expression, they have abbreviated identifiers called: object initializer, array initializer, and regular expression. Initializer:

Copy code The code is as follows:

// Equivalent to new Array(1, 2, 3);

// Or array = new Array();

// array[0] = 1;

// array[1] = 2;

// array[2] = 3;

var array = [1, 2, 3];

// Equivalent to 

// var object = new Object();

// object.a = 1;

// object.b = 2;

// object.c = 3;

var object = {a: 1, b: 2, c: 3};

// Equivalent to new RegExp("^\d $", "g")

var re = /^d $/g;

Note that if the above three objects are reassigned to new types, then the subsequent implementation semantics will be used according to the newly assigned types. For example, in the current implementation of Rhino and the old version of SpiderMonkey 1.7, it will The object is successfully created using the constructor of the new keyword, but in some implementations (currently Spider/TraceMonkey) the semantics of literals do not necessarily change after the type is changed.

Copy code The code is as follows:

var getClass = Object.prototype.toString;

Object = Number;

var foo = new Object;

alert([foo, getClass.call(foo)]); // 0, "[object Number]"

var bar = {};

// Rhino, SpiderMonkey 1.7 - 0, "[object Number]"

// Others: still "[object Object]", "[object Object]"

alert([bar, getClass.call(bar)]);

//Array has the same effect

Array = Number;

foo = new Array;

alert([foo, getClass.call(foo)]); // 0, "[object Number]"

bar = [];

// Rhino, SpiderMonkey 1.7 - 0, "[object Number]"

// Others: still "", "[object Object]"

alert([bar, getClass.call(bar)]);

// But for RegExp, the semantics of the literal are not changed. semantics of the literal

// isn't being changed in all tested implementations

RegExp = Number;

foo = new RegExp;

alert([foo, getClass.call(foo)]); // 0, "[object Number]"

bar = /(?!)/g;

alert([bar, getClass.call(bar)]); // /(?!)/g, "[object RegExp]"

Regular expression literals and RegExp objects

Note that in the following two examples, the semantics of regular expressions are equivalent in the third edition of the specification. The regexp literal only exists in one sentence and is created in the parsing stage, but the one created by the RegExp constructor is It is a new object, so this may cause some problems. For example, the value of lastIndex is wrong during testing:

Copy code The code is as follows:

for (var k = 0; k < 4; k ) {

var re = /ecma/g;

alert(re.lastIndex); // 0, 4, 0, 4

alert(re.test("ecmascript")); // true, false, true, false

}

// Compare

for (var k = 0; k < 4; k ) {

var re = new RegExp("ecma", "g");

alert(re.lastIndex); // 0, 0, 0, 0

alert(re.test("ecmascript")); // true, true, true, true

}

Note: However, these problems have been corrected in the 5th edition of the ES specification. Whether it is based on literals or constructors, the regular rules create new objects.

Associative array

Various textual static discussions, JavaScript objects (often created using object initializer {}) are called hash tables, hash tables, or other simple names: hash (a concept in Ruby or Perl), management Array (a concept in PHP), dictionary (a concept in Python), etc.

There are only such terms, mainly because their structures are similar, that is, using "key-value" pairs to store objects, which is completely consistent with the data structure defined by the theory of "associative array" or "hash table". In addition, the hash table abstract data type is usually used at the implementation level.

However, although the terminology describes this concept, it is actually a mistake. From the perspective of ECMAScript: ECMAScript has only one object and type and its subtypes, which is no different from "key-value" pair storage, so There is no special concept on this. Because the internal properties of any object can be stored as key-value pairs:

Copy code The code is as follows:

var a = {x: 10};

a['y'] = 20;

a.z = 30;

var b = new Number(1);

b.x = 10;

b.y = 20;

b['z'] = 30;

var c = new Function('');

c.x = 10;

c.y = 20;

c['z'] = 30;

// Wait, a subtype of any object "subtype"

Also, since objects can be empty in ECMAScript, the concept of "hash" is also incorrect here:

Copy code The code is as follows:

Object.prototype.x = 10;

var a = {}; // Create empty "hash"

alert(a["x"]); // 10, but not empty

alert(a.toString); // function

a["y"] = 20; // Add new key-value pair to "hash"

alert(a["y"]); // 20

Object.prototype.y = 20; // Add prototype attributes 

delete a["y"]; // Delete

alert(a["y"]); // But the key and value here still have values ​​- 20

Please note that the ES5 standard allows us to create objects without prototypes (implemented using the Object.create(null) method). From this perspective, such objects can be called hash tables:

Copy code The code is as follows:

var aHashTable = Object.create(null);

console.log(aHashTable.toString); // Undefined

Additionally, some properties have specific getter/setter methods, so that can also lead to confusion about this concept:

Copy code The code is as follows:

var a = new String("foo");

a['length'] = 10;

alert(a['length']); // 3

However, even if it is considered that "hash" may have a "prototype" (e.g., a class that delegates hash objects in Ruby or Python), in ECMAScript, this terminology is incorrect because there is a gap between the two representations. There is no semantic difference (i.e. using dot notation a.b and a["b"] notation).

The concept and semantics of "property attribute" in ECMAScript are not separated from "key", array index, and method. The reading and writing of properties of all objects here must follow the same rules: check the prototype chain.

In the following Ruby example, we can see the semantic difference:

Copy code The code is as follows:

a = {}

a.class # Hash

a.length # 0

# new "key-value" pair

a['length'] = 10;

# Semantically, dots are used to access properties or methods, not key

a.length # 1

#The indexer accesses the key in the hash

a['length'] # 10

# It is similar to dynamically declaring a Hash class on an existing object 

# Then declare new properties or methods 

class Hash

def z

100

end

end

# New attributes can be accessed 

a.z # 100

# But not "key"

a['z'] # nil

The ECMA-262-3 standard does not define the concept of "hashes" (and similar). However, if there is such a structural theory, it is possible to name the object after it.

Object conversion

To convert an object into a primitive value, you can use the valueOf method. As we said, when the constructor of the function is called as a function (for some types), but if the new keyword is not used, the object is converted into a primitive value. , which is equivalent to the implicit valueOf method call:

Copy code The code is as follows:

var a = new Number(1);

var primitiveA = Number(a); // Implicit "valueOf" call

var alsoPrimitiveA = a.valueOf(); // Explicit call

alert([

typeof a, // "object"

typeof primitiveA, // "number"

typeof alsoPrimitiveA // "number"

]);

This approach allows objects to participate in various operations, such as:

Copy code The code is as follows:

var a = new Number(1);

var b = new Number(2);

alert(a b); // 3

// Even 

var c = {

x: 10,

y: 20,

valueOf: function () {

Return this.x this.y;

}

};

var d = {

x: 30,

y: 40,

//Same as the valueOf function of c

valueOf: c.valueOf

};

alert(c d); // 100

The default value of valueOf will change according to the type of the object (if not overridden). For some objects, it returns this - for example: Object.prototype.valueOf(), and calculated values. : Date.prototype.valueOf() returns the date and time:

Copy code The code is as follows:

var a = {};

alert(a.valueOf() === a); // true, "valueOf" returns this

var d = new Date();

alert(d.valueOf()); // time

alert(d.valueOf() === d.getTime()); // true

In addition, objects have a more primitive representation - a string representation. This toString method is reliable and is used automatically for certain operations:

Copy code The code is as follows:

var a = {

valueOf: function () {

Return 100;

},

toString: function () {

Return '__test';

}

};

// In this operation, the toString method is automatically called 

alert(a); // "__test"

// But here, the valueOf() method is called

alert(a 10); // 110

// But, once valueOf is deleted 

// toString can be called automatically again 

delete a.valueOf;

alert(a 10); // "_test10"

The toString method defined on Object.prototype has a special meaning. It returns the internal [[Class]] attribute value that we will discuss below.

Compared with converting to primitive values (ToPrimitive), converting values into object types also has a conversion specification (ToObject).

An explicit method is to use the built-in Object constructor as a function to call ToObject (somewhat similar to the new keyword):

Copy code The code is as follows:

var n = Object(1); // [object Number]

var s = Object('test'); // [object String]

//Something similar, you can also use the new operator

var b = new Object(true); // [object Boolean]

// If the parameter new Object is used, a simple object is created 

var o = new Object(); // [object Object]

// If the parameter is an existing object 

// The result of creation is to simply return the object 

var a = [];

alert(a === new Object(a)); // true

alert(a === Object(a)); // true

There are no general rules about calling built-in constructors, whether to use the new operator or not, it depends on the constructor. For example, Array or Function produce the same result when used as a constructor using the new operator or a simple function that does not use the new operator:

Copy code The code is as follows:

var a = Array(1, 2, 3); // [object Array]

var b = new Array(1, 2, 3); // [object Array]

var c = [1, 2, 3]; // [object Array]

var d = Function(''); // [object Function]

var e = new Function(''); // [object Function]

When some operators are used, there are also some explicit and implicit conversions:

Copy code The code is as follows:

var a = 1;

var b = 2;

// Implicit

var c = a b; // 3, number

var d = a b '5' // "35", string

// explicit

var e = '10'; // "10", string

var f = e; // 10, number

var g = parseInt(e, 10); // 10, number

// Wait

Characteristics of attributes

All properties can have many attributes.

1.{ReadOnly} - Ignore the write operation of assigning a value to the property, but the read-only property can be changed by the behavior of the host environment - that is, it is not a "constant value";
2.{DontEnum}——Attributes cannot be enumerated by for..in loop
3.{DontDelete}——The behavior of the delete operator is ignored (that is, it cannot be deleted);
4. {Internal} - Internal attribute, no name (only used at the implementation level), such attributes cannot be accessed in ECMAScript.

Note that in ES5 {ReadOnly}, {DontEnum} and {DontDelete} are renamed to [[Writable]], [[Enumerable]] and [[Configurable]], which can be manually passed through Object.defineProperty or similar methods to manage these properties.

Copy code The code is as follows:

var foo = {};

Object.defineProperty(foo, "x", {

value: 10,

writable: true, // that is {ReadOnly} = false

enumerable: false, // that is {DontEnum} = true

configurable: true // i.e. {DontDelete} = false

});

console.log(foo.x); // 10

// Get the feature set attributes
 through descriptor
var desc = Object.getOwnPropertyDescriptor(foo, "x");

console.log(desc.enumerable); // false

console.log(desc.writable); // true

// Wait

Internal properties and methods

Objects can also have internal properties (part of the implementation level) that are not directly accessible to ECMAScript programs (but as we will see below, some implementations allow access to some such properties). These properties are accessed through nested square brackets [[ ]]. Let's take a look at some of them. The description of these properties can be found in the specification.

Every object should implement the following internal properties and methods:

1.[[Prototype]] - the prototype of the object (will be introduced in detail below)
2.[[Class]] - a representation of a string object (for example, Object Array, Function Object, Function, etc.); used to distinguish objects
3.[[Get]]——Method to obtain attribute value
4.[[Put]]——Method to set attribute value
5.[[CanPut]]——Check whether the attribute is writable
6.[[HasProperty]]——Check whether the object already has this property
7.[[Delete]]——Delete the attribute from the object
8.[[DefaultValue]] returns the original value of the object (calling the valueOf method, some objects may throw a TypeError exception).
The value of the internal property [[Class]] can be obtained indirectly through the Object.prototype.toString() method, which should return the following string: "[object " [[Class]] "]" . For example:

Copy code The code is as follows:

var getClass = Object.prototype.toString;

getClass.call({}); // [object Object]

getClass.call([]); // [object Array]

getClass.call(new Number(1)); // [object Number]

// Wait

This function is usually used to check objects, but the specification says that the [[Class]] of the host object can be any value, including the value of the [[Class]] attribute of the built-in object, so theoretically it cannot be 100% guaranteed. Guaranteed to be accurate. For example, the [[Class]] attribute of the document.childNodes.item(...) method returns "String" in IE, but it does return "Function" in other implementations.

Copy code The code is as follows:

// in IE - "String", in other - "Function"

alert(getClass.call(document.childNodes.item));

Constructor

So, as we mentioned above, objects in ECMAScript are created through so-called constructors.

Constructor is a function that creates and initializes the newly created object.
A constructor is a function that creates and initializes a newly created object.
Object creation (memory allocation) is taken care of by the constructor's internal method [[Construct]]. The behavior of this internal method is well defined, and all constructors use this method to allocate memory for new objects.

The initialization is managed by calling this function up and down the new object, which is responsible for the internal method [[Call]] of the constructor.

Note that user code can only be accessed during the initialization phase, although during the initialization phase we can return a different object (ignoring the tihs object created in the first phase):

Copy code The code is as follows:

function A() {

// Update the newly created object

this.x = 10;

// But it returns a different object

return [1, 2, 3];

}

var a = new A();

console.log(a.x, a); undefined, [1, 2, 3]

Referring to Chapter 15 Function - Algorithm for Creating Functions, we can see that the function is a native object, including [[Construct]] ] and [[Call]] ] attributes as well as the displayed prototype prototype attribute - the future The prototype of the object (Note: NativeObject is a convention for native objects and is used in the pseudocode below).

Copy code The code is as follows:

F = new NativeObject();

F.[[Class]] = "Function"

.... // Other attributes

F.[[Call]] =  // function itself

F.[[Construct]] = internalConstructor // Ordinary internal constructor

.... // Other attributes

// Object prototype created by F constructor 

__objectPrototype = {};

__objectPrototype.constructor = F // {DontEnum}

F.prototype = __objectPrototype

[[Call]] ] is the main way to distinguish objects other than the [[Class]] attribute (here equivalent to "Function"), so the internal [[Call]] attribute of the object is called as a function. Using the typeof operator on such an object returns "function". However, it is mainly related to native objects. In some cases, the implementation of using typeof to obtain the value is different. For example: the effect of window.alert (...) in IE:

Copy code The code is as follows:

// In IE browser - "Object", "object", other browsers - "Function", "function"

alert(Object.prototype.toString.call(window.alert));

alert(typeof window.alert); // "Object"

The internal method [[Construct]] is activated by using the constructor with the new operator. As we said, this method is responsible for memory allocation and object creation. If there are no parameters, the parentheses for calling the constructor can also be omitted:

Copy code The code is as follows:

function A(x) { // constructor А

this.x = x || 10;

}

// If no parameters are passed, the brackets can be omitted 

var a = new A; // or new A();

alert(a.x); // 10

//Explicitly pass in parameter x

var b = new A(20);

alert(b.x); // 20

We also know that shis in the constructor (initialization phase) is set to the newly created object.

Let’s study the object creation algorithm.

Algorithm for object creation

The behavior of the internal method [[Construct]] can be described as follows:

Copy code The code is as follows:

F.[[Construct]](initialParameters):

O = new NativeObject();

// Property [[Class]] is set to "Object"

O.[[Class]] = "Object"

// Get the object g
 when referencing F.prototype
var __objectPrototype = F.prototype;

// If __objectPrototype is an object, then:

O.[[Prototype]] = __objectPrototype

// Otherwise:

O.[[Prototype]] = Object.prototype;

// Here O.[[Prototype]] is the prototype of the Object object

// F.[[Call]]
 is applied when initializing the newly created object.
// Set this to the newly created object O

//The parameters are the same as the initialParameters in F

R = F.[[Call]](initialParameters); this === O;

// Here R is the return value of [[Call]]

// View it in JS, like this: 

// R = F.apply(O, initialParameters);

// If R is an object 

return R

// Otherwise 

return O

Please note two main features:

1. First, the prototype of the newly created object is obtained from the prototype attribute of the function at the current moment (this means that the prototypes of two created objects created by the same constructor can be different because the prototype attribute of the function can also be different) .
2. Secondly, as we mentioned above, if [[Call]] returns an object when the object is initialized, this is exactly the result used for the entire new operator:

Copy code The code is as follows:

function A() {}

A.prototype.x = 10;

var a = new A();

alert(a.x); // 10 – get 
 from prototype

// Set the .prototype property to the new object 

// Why explicitly declare the .constructor property is explained below 

A.prototype = {

constructor: A,

y: 100

};

var b = new A();

// Object "b" has new properties

alert(b.x); // undefined

alert(b.y); // 100 – get 
 from prototype

// But the prototype of a object can still get the original result

alert(a.x); // 10 - get 
 from prototype

function B() {

this.x = 10;

return new Array();

}

// If the "B" constructor does not return (or returns this) 

// Then this object can be used, but in the following case, array
 is returned
var b = new B();

alert(b.x); // undefined

alert(Object.prototype.toString.call(b)); // [object Array]

Let’s take a closer look at the prototype

Prototype

Every object has a prototype (except some system objects). Prototype communication is carried out through the internal, implicit, and not directly accessible [[Prototype]] prototype property. The prototype can be an object or a null value.

Property constructor

There are two important knowledge points in the above example. The first one is about the prototype attribute of the constructor attribute of the function. In the function creation algorithm, we know that the constructor attribute is set to the prototype attribute of the function during the function creation phase. , the value of the constructor attribute is an important reference to the function itself:

Copy code The code is as follows:

function A() {}

var a = new A();

alert(a.constructor); // function A() {}, by delegation

alert(a.constructor === A); // true

Usually in this case, there is a misunderstanding: the constructor constructor property is wrong as a property of the newly created object itself, but, as we can see, this property belongs to the prototype and is accessed through inheritance.

By inheriting the instance of the constructor attribute, you can indirectly obtain a reference to the prototype object:

Copy code The code is as follows:

function A() {}

A.prototype.x = new Number(10);

var a = new A();

alert(a.constructor.prototype); // [object Object]

alert(a.x); // 10, via prototype

// Same effect as a.[[Prototype]].x

alert(a.constructor.prototype.x); // 10

alert(a.constructor.prototype.x === a.x); // true

But please note that the constructor and prototype attributes of the function can be redefined after the object is created. In this case, the object loses the mechanism described above. If you edit the element's prototype through the function's prototype attribute (adding a new object or modifying an existing object), you will see the newly added attributes on the instance.

However, if we completely change the prototype property of the function (by allocating a new object), the reference to the original constructor is lost, because the object we create does not include the constructor property:

Copy code The code is as follows:

function A() {}

A.prototype = {

x: 10

};

var a = new A();

alert(a.x); // 10

alert(a.constructor === A); // false!

Therefore, the prototype reference to the function needs to be restored manually:

Copy code The code is as follows:

function A() {}

A.prototype = {

constructor: A,

x: 10

};

var a = new A();

alert(a.x); // 10

alert(a.constructor === A); // true

Note that although the constructor attribute has been restored manually, compared with the original lost prototype, the {DontEnum} feature is no longer available, which means that the for..in loop statement in A.prototype is not supported, but in the 5th edition of the specification , provides the ability to control the enumerable state enumerable through the [[Enumerable]] attribute.

Copy code The code is as follows:

var foo = {x: 10};

Object.defineProperty(foo, "y", {

value: 20,

enumerable: false // aka {DontEnum} = true

});

console.log(foo.x, foo.y); // 10, 20

for (var k in foo) {

console.log(k); // only "x"

}

var xDesc = Object.getOwnPropertyDescriptor(foo, "x");

var yDesc = Object.getOwnPropertyDescriptor(foo, "y");

console.log(

xDesc.enumerable, // true

yDesc.enumerable // false

);

Explicit prototype and implicit [[Prototype]] attributes

Generally, it is incorrect to explicitly reference the prototype of an object through the function's prototype attribute. It refers to the same object, the object's [[Prototype]] attribute:

a.[[Prototype]] ----> Prototype <---- A.prototype

In addition, the [[Prototype]] value of the instance is indeed obtained from the prototype attribute of the constructor.

However, submitting the prototype attribute will not affect the prototype of the already created object (it will only be affected when the prototype attribute of the constructor changes). That is to say, only newly created objects will have new prototypes, and already created objects will still have new prototypes. Reference to the original old prototype (this prototype can no longer be modified).

Copy code The code is as follows:

// The situation before modifying the A.prototype prototype
a.[[Prototype]] ----> Prototype <---- A.prototype

// After modification
A.prototype ----> New prototype // New objects will have this prototype
a.[[Prototype]] ----> Prototype // Boot the original prototype

For example:

Copy code The code is as follows:

function A() {}

A.prototype.x = 10;

var a = new A();

alert(a.x); // 10

A.prototype = {

constructor: A,

x: 20

y: 30

};

// Object a is a value obtained from the prototype of crude oil through the implicit [[Prototype]] reference 

alert(a.x); // 10

alert(a.y) // undefined

var b = new A();

// But the new object is the value obtained from the new prototype 

alert(b.x); // 20

alert(b.y) // 30

Therefore, some articles say that "dynamically modifying the prototype will affect all objects and all objects will have new prototypes" which is wrong. The new prototype will only take effect on newly created objects after the prototype is modified.

The main rule here is: the prototype of an object is created when the object is created, and cannot be modified to a new object after that. If it still refers to the same object, it can be referenced through the explicit prototype of the constructor. After the object is created, only the properties of the prototype can be added or modified.

Non-standard __proto__ attribute

However, some implementations, such as SpiderMonkey, provide the non-standard __proto__ explicit attribute to reference the object's prototype:

Copy code The code is as follows:

function A() {}

A.prototype.x = 10;

var a = new A();

alert(a.x); // 10

var __newPrototype = {

constructor: A,

x: 20,

y: 30

};

//Reference to new object

A.prototype = __newPrototype;

var b = new A();

alert(b.x); // 20

alert(b.y); // 30

// The "a" object still uses the old prototype 

alert(a.x); // 10

alert(a.y); // undefined

// Explicitly modify the prototype

a.__proto__ = __newPrototype;

// Now the "а" object refers to the new object 

alert(a.x); // 20

alert(a.y); // 30

Note that ES5 provides the Object.getPrototypeOf(O) method, which directly returns the [[Prototype]] property of the object - the initial prototype of the instance. However, compared to __proto__, it is only a getter and does not allow set values.

Copy code The code is as follows:

var foo = {};

Object.getPrototypeOf(foo) == Object.prototype; // true

Object independent of constructor
Because the prototype of the instance is independent of the constructor and the prototype attribute of the constructor, the constructor can be deleted after completing its main work (creating the object). Prototype objects continue to exist by referencing the [[Prototype]] attribute:

Copy code The code is as follows:

function A() {}

A.prototype.x = 10;

var a = new A();

alert(a.x); // 10

// Set A to null - show reference constructor 

A = null;

// But if the .constructor property has not changed, 

// You can still create objects through it 

var b = new a.constructor();

alert(b.x); // 10

// Implicit references are also deleted 

delete a.constructor.prototype.constructor;

delete b.constructor.prototype.constructor;

// Objects can no longer be created through the constructor of A 

// But these two objects still have their own prototypes 

alert(a.x); // 10

alert(b.x); // 10

Characteristics of instanceof operator
We display the reference prototype through the prototype attribute of the constructor, which is related to the instanceof operator. This operator works with the prototype chain, not the constructor. With this in mind, there are often misunderstandings when detecting objects:

Copy code The code is as follows:

if (foo instanceof Foo) {

...

}

This is not used to detect whether object foo was created using the Foo constructor. All instanceof operators require only one object property - foo.[[Prototype]], and check its existence starting from Foo.prototype in the prototype chain. The instanceof operator is activated through the internal method [[HasInstance]] in the constructor.

Let’s take a look at this example:

Copy code The code is as follows:

function A() {}

A.prototype.x = 10;

var a = new A();

alert(a.x); // 10

alert(a instanceof A); // true

// If the prototype is set to null

A.prototype = null;

// ..."a" can still access the prototype through a.[[Prototype]]

alert(a.x); // 10

// However, the instanceof operator can no longer be used normally 

// Because it is implemented from the prototype attribute of the constructor 

alert(a instanceof A); // Error, A.prototype is not an object

On the other hand, an object can be created by a constructor, but if the [[Prototype]] attribute of the object and the value of the prototype attribute of the constructor are set to the same value, instanceof will return true when checked:

Copy code The code is as follows:

function B() {}

var b = new B();

alert(b instanceof B); // true

function C() {}

var __proto = {

constructor: C

};

C.prototype = __proto;

b.__proto__ = __proto;

alert(b instanceof C); // true

alert(b instanceof B); // false

Prototypes can store methods and share properties
Prototypes are used in most programs to store object methods, default states, and shared object properties.

In fact, objects can have their own state, but the methods are usually the same. Therefore, methods are usually defined in prototypes for memory optimization. This means that all instances created by this constructor can share this method.

Copy code The code is as follows:

function A(x) {

this.x = x || 100;

}

A.prototype = (function () {

// Initialize context

// Use additional objects

var _someSharedVar = 500;

function _someHelper() {

alert('internal helper: ' _someSharedVar);

}

function method1() {

alert('method1: ' this.x);

}

function method2() {

alert('method2: ' this.x);

_someHelper();

}

// Prototype itself

Return {

​ constructor: A,

Method1: method1,

Method2: method2

};

})();

var a = new A(10);

var b = new A(20);

a.method1(); // method1: 10

a.method2(); // method2: 10, internal helper: 500

b.method1(); // method1: 20

b.method2(); // method2: 20, internal helper: 500

// The two objects use the same method in the prototype 

alert(a.method1 === b.method1); // true

alert(a.method2 === b.method2); // true

Read and write attributes

As we mentioned, reading and writing property values is through the internal [[Get]] and [[Put]] methods. These internal methods are activated through property accessors: dot notation or index notation:

Copy code The code is as follows:

// write 

foo.bar = 10; // Called [[Put]]

console.log(foo.bar); // 10, called [[Get]]

console.log(foo['bar']); // Same effect

Let’s see how these methods work in pseudocode:

[[Get]] method

[[Get]] will also query properties from the prototype chain, so properties in the prototype can also be accessed through the object.

O.[[Get]](P):

Copy code The code is as follows:

 
// If it is your own attribute, return 

if (O.hasOwnProperty(P)) {

Return O.P;

}

// Otherwise, continue analyzing the prototype 

var __proto = O.[[Prototype]];

// If the prototype is null, return undefined

// This is possible: the top-level Object.prototype.[[Prototype]] is null

if (__proto === null) {

Return undefined;

}

// Otherwise, call [[Get]] recursively on the prototype chain and search for attributes in the prototypes of each layer 

// Until the prototype is null

return __proto.[[Get]](P)

Please note that [[Get]] will also return undefined in the following situations:

Copy code The code is as follows:

if (window.someObject) {

...

}

Here, if the someObject property is not found in the window, it will be searched in the prototype, then in the prototype of the prototype, and so on. If it cannot be found, undefined will be returned according to the definition.

Note: The in operator can also be responsible for looking up properties (it will also look up the prototype chain):

Copy code The code is as follows:

if ('someObject' in window) {

...

}

This helps avoid some special problems: for example, even if someObject exists, when someObject is equal to false, the first round of detection will fail.

[[Put]] method

The

[[Put]] method can create and update the properties of the object itself, and mask the properties of the same name in the prototype.

O.[[Put]](P, V):

Copy code The code is as follows:

 
// If the value cannot be written to the attribute, exit 

if (!O.[[CanPut]](P)) {

Return;

}

// If the object does not have its own properties, create it 

// All attributes are false

if (!O.hasOwnProperty(P)) {

createNewProperty(O, P, attributes: {

ReadOnly: false,

DontEnum: false,

DontDelete: false,

Internal: false

});

}

// Set the value if the attribute exists, but do not change the attributes property 

O.P = V

return;

For example:

Copy code The code is as follows:

Object.prototype.x = 100;

var foo = {};
console.log(foo.x); // 100, inherited properties

foo.x = 10; // [[Put]]
console.log(foo.x); // 10, own attributes

delete foo.x;
console.log(foo.x); //reset to 100, inherit properties
Please note that read-only properties in the prototype cannot be masked, and the assignment results will be ignored. This is controlled by the internal method [[CanPut]].

// For example, the attribute length is read-only, let’s try to mask the length

function SuperString() {
/* nothing */
}

SuperString.prototype = new String("abc");

var foo = new SuperString();

console.log(foo.length); // 3, the length of "abc"

// Attempt to mask
foo.length = 5;
console.log(foo.length); // Still 3

But in ES5's strict mode, if the read-only attribute is masked, a TypeError will be saved.

Property accessor

The internal methods [[Get]] and [[Put]] are activated through dot notation or indexing in ECMAScript. If the attribute identifier is a legal name, it can be accessed through ".", and indexing Party runs dynamically defined names.

Copy code The code is as follows:

var a = {testProperty: 10};

alert(a.testProperty); // 10, click 

alert(a['testProperty']); // 10, index

var propertyName = 'Property';

alert(a['test' propertyName]); // 10, dynamic properties are indexed

There is a very important feature here - property accessors always use the ToObject specification to treat the value to the left of "." This implicit conversion is related to the saying "everything in JavaScript is an object" (however, as we already know, not all values in JavaScript are objects).

If the attribute accessor is used to access the original value, the original value will be wrapped by the object (including the original value) before accessing, and then the attribute will be accessed through the wrapped object. After the attribute is accessed, the wrapped object will be deleted.

For example:

Copy code The code is as follows:

var a = 10; // Original value

// But methods can be accessed (just like objects) 

alert(a.toString()); // "10"

// Additionally, we can create a heart attribute on a 

a.test = 100; // It seems to be no problem

// However, the [[Get]] method does not return the value of the property, but returns undefined

alert(a.test); // undefined

So, why can the original value in the entire example have access to the toString method, but not the newly created test property?

The answer is simple:

First of all, as we said, after using the property accessor, it is no longer the original value, but a wrapped intermediate object (the entire example uses new Number(a)), and the toString method is passed at this time Found in the prototype chain:

Copy code The code is as follows:

//Principle of executing a.toString():

wrapper = new Number(a);

wrapper.toString(); // "10"

delete wrapper;

Next, when the [[Put]] method creates new attributes, it is also done through the packaged object:

Copy code The code is as follows:

//The principle of executing a.test = 100: 

wrapper = new Number(a);

wrapper.test = 100;

delete wrapper;

We see that in step 3, the wrapped object is deleted, and the newly created property page is deleted - deleting the wrapping object itself.

When using [[Get]] to get the test value, the packaging object is created again, but this time the wrapped object no longer has the test attribute, so undefined is returned:

Copy code The code is as follows:

//Principle of executing a.test:

1. wrapper = new Number(a);

2. wrapper.test; // undefined

This method explains how the original value is read. In addition, if any original value is often used to access attributes, time efficiency considerations will directly replace it with an object; on the contrary, if it is not accessed frequently, or just used For calculation purposes, this form can be retained.

Inherit

We know that ECMAScript uses prototype-based delegated inheritance. Chains and prototypes have already been mentioned in the prototype chain. In fact, all the implementation of delegation and the search and analysis of the prototype chain are condensed into the [[Get]] method.

If you fully understand the [[Get]] method, then the question of inheritance in JavaScript will be self-explanatory.

When I often talk about inheritance in JavaScript on forums, I always use one line of code to show it. In fact, we don’t need to create any objects or functions because the language is already based on inheritance. The code is as follows:

Copy code The code is as follows:

alert(1..toString()); // "1"

We already know how the [[Get]] method and property accessors work, let’s see what happens:

1. First, create a packaging object from the original value 1 through new Number(1)
2. Then the toString method is inherited from this packaging object

Why is it inherited? Because objects in ECMAScript can have their own properties, the wrapper object in this case does not have a toString method. So it inherits from the principle, which is Number.prototype.

Note there is a subtlety, the two dots in the above example are not an error. The first point represents the decimal part, and the second point is an attribute accessor:

Copy code The code is as follows:

1.toString(); // Syntax error! 

(1).toString(); // OK

1..toString(); // OK

1['toString'](); // OK

Prototype Chain

Let's show how to create a prototype chain for a user-defined object, it's very simple:

Copy code The code is as follows:

function A() {

alert('A.[[Call]] activated');

this.x = 10;

}

A.prototype.y = 20;

var a = new A();

alert([a.x, a.y]); // 10 (self), 20 (inherited)

function B() {}

// The most recent prototype chain method is to set the prototype of the object to another new object 

B.prototype = new A();

// Repair the constructor property of the prototype, otherwise it would be A 

B.prototype.constructor = B;

var b = new B();

alert([b.x, b.y]); // 10, 20, 2 are inherited 

// [[Get]] b.x:

// b.x (no) -->

// b.[[Prototype]].x (yes) - 10

// [[Get]] b.y

// b.y (no) -->

// b.[[Prototype]].y (no) -->

// b.[[Prototype]].[[Prototype]].y (yes) - 20

// where b.[[Prototype]] === B.prototype,

// and b.[[Prototype]].[[Prototype]] === A.prototype

This method has two characteristics:

First, B.prototype will contain the x attribute. At first glance this may not seem right, you might think that the x property is defined in A and that the B constructor expects it as well. Although prototypal inheritance is no problem under normal circumstances, the B constructor may sometimes not need the x attribute. Compared with class-based inheritance, all attributes are copied to descendant subclasses.

However, if there is a need (to simulate class-based inheritance) to assign the x attribute to the object created by the B constructor, there are some ways, one of which we will show later.

Secondly, this is not a feature but a disadvantage - when the subclass prototype is created, the code of the constructor is also executed, and we can see that the message "A.[[Call]] activated" is displayed twice - When using the A constructor to create an object and assign it to the B.prototype property, the other scene is when the a object creates itself!

The following example is more critical, the exception thrown by the constructor of the parent class: Maybe it needs to be checked when the actual object is created, but obviously, the same case, that is, when using these parent objects as prototypes Something will go wrong.

Copy code The code is as follows:

function A(param) {

if (!param) {

throw 'Param required';

}

this.param = param;

}

A.prototype.x = 10;

var a = new A(20);

alert([a.x, a.param]); // 10, 20

function B() {}

B.prototype = new A(); // Error

In addition, having too much code in the constructor of the parent class is also a disadvantage.

To solve these "functions" and problems, programmers use the standard pattern of prototype chains (shown below). The main purpose is to wrap the creation of constructors in the middle. The chains of these wrapping constructors contain the required prototypes.

Copy code The code is as follows:

function A() {

alert('A.[[Call]] activated');

this.x = 10;

}

A.prototype.y = 20;

var a = new A();

alert([a.x, a.y]); // 10 (self), 20 (integrated)

function B() {

// Or use A.apply(this, arguments)

B.superproto.constructor.apply(this, arguments);

}

// Inheritance: connect prototypes together through empty intermediate constructors 

var F = function () {};

F.prot

In-depth understanding of JavaScript series (18): ECMAScript implementation of object-oriented programming_Basic knowledge