The relationship between property and prototype of javascript objects

ECMAScript can recognize two types of objects, one is called Native Object and belongs to the language category; the other is called Host Object, which is provided by the running environment such as document object, Dom Node, etc.
Native objects are a loose structure and can be added dynamically Properties, all properties have a name and a value. This value can be a reference to another object or a built-in data type (String, Number, Boolean, Null or Undefined)
The following simple example Describes how a JavaScript object sets the value of a property and how to read the value of the property.

Assignment operation
Creating the attributes of an object is very simple. The creation of attributes can be completed directly through the assignment operation.

Code
var objectRef = new Object(); //create a generic javascript object.

A property named testNumber can be created like this.

Code
objectRef.testNumber = 5;
/* - or:- */
objectRef["testNumber"] = 5;

If the copied attribute name already exists, the attribute will not be created again, and the assignment operation is just Reset the value of the attribute

Code
objectRef.testNumber = 8;
/* - or:- */
objectRef["testNumber"] = 8;

The prototype of a js object can itself be an object , it can also have attributes (property). The assignment operation of js object (prototype) is no different from the creation of ordinary object properties
.

Value operation
In the value operation, property and prototype are different. Let’s look at the simplest property value operation first.

Code
/*Assign a value to the attribute of an object. If the object does not have this attribute, then after the assignment operation, the object will have this attribute*/
objectRef.testNumber = 8;
/* Read out the attribute Value*/
var val = objectRef.testNumber;

/* Now val has the value 8 just assigned to objectRef*/

prototype revealed

But all objects can have prototypes, and prototypes themselves are also objects. Then he can also have prototypes, and a prototype chain will be formed by looping in this way.
This chain will terminate when it encounters that the prototype of the formation in the chain is null. (The default prototype of Object is null)

Code
var objectRef = new Object(); //create a generic javascript object.

Create a new js object. At this time, the prototype of this object is Null, so the objectRef The prototype chain only contains one object Object.prototype
We are looking at the following code

Code
/* Construct the constructor of the type MyObject1 ​
MyObject1 - type.
*/
function MyObject1(formalParameter){ ​
​ /* For the object Create a property named testNumber
*/
this.testNumber = formalParameter;
}

/* Construct the constructor of the MyObject2 type
MyObject2 - type:-
*/
function MyObject2(formalParameter){
/* The one who does it The object creates a property named testString*/
this.testString = formalParameter;
}

/* The next step will replace the default prototype property of MyObject2 with the MyObject1 object*/
MyObject2.prototype = new MyObject1(8);

/* Finally we create an object of type MyObject2*/

var objectRef = new MyObject2( "String_Value" );

objectRef This object of type MyObject2 has a prototype chain, and the first object in the chain is MyObject1 Object, MyObject1 object also has a prototype,
This prototype is the default prototype of Object, the prototype of Object.prototype is null, and this prototype chain ends.
When a value operation occurs, the entire prototype chain of objectRef starts to work

Code
var val = objectRef.testString;

objectRef has an attribute called testString, then this code will assign the value of testString Give val

code
var val = objectRef.testNumber;

There is no attribute testNumber in the objectRef object, but val has reached the value 8 instead of undefine. This is because the interpreter has not found the required value in the current object. After finding the attribute of
, we will check the prototype of this object. The prototype of objectRef is the MyObject1 object. This object has the attribute testNumber, so val gets the value 8.

Code
var val = objectRef.toString;

Now val is a reference to a function. This function is a property of Object.prototype. Since neither MyObject1 nor MyObject2 defines the toString property
so Object.prototype returns.

Code
var val = objectRef.madeUpProperty;

The last val is undefined, because MyObject1, MyObject2, and Object have not defined the property madeUpProperty, so the result is undefined.

The read operation will read in obj itself and the first property value with the same name found on the prototype chain
The write operation will create a property with the same name for the obj object itself (if this property name does not exist
This means objectRef.testNumber = 3 will create a property on the objectRef object, The name is testNumber. When you want to read testNumber next time, the
propertype chain will not work. You will only get the property 3 of objectRef, and the testNumber property of MyObject1 will not be modified. The following code can be verified

code
/ * Construct the constructor of the type MyObject1
MyObject1 - type.
*/
function MyObject1(formalParameter){
/* Create a property named testNumber for the object
*/
this.testNumber = formalParameter;
}

/ * Construct the constructor of the type MyObject2
MyObject2 - type:-
*/
function MyObject2(formalParameter){
/* Create a property name for the object named testString*/
this.testString = formalParameter;
}
/ * The next operation will replace the default prototype attribute of MyObject2 with the MyObject1 object*/
var obj1 = new MyObject1(8);
MyObject2.prototype = obj1;

/* Finally we create an object of type MyObject2*/

var objectRef = new MyObject2( "String_Value" );

alert(objectRef.testNumber);
objectRef.testNumber = 5;
alert(objectRef.testNumber);
alert(obj1.testNumber); More related articles Please pay attention to the PHP Chinese website (www.php.cn)!