For this article on how to customize objects, and object-related property operations do not understand, you can check my two blog. Understanding this article makes it easier to understand
An object was created with a constructor function
The Obj object itself creates two properties x=1, y=2
The two properties of this object have attribute characteristics writable whether writable, enumerable whether enumerable configurable can be reset, getter, setter
The Obj object itself also has three major features Proto prototype class extensible can be extended
Foo.prototype is a prototype on an object, and Foo.prototype is an object.
Z=3 is Foo.prototype is the property of the prototype on the object.
Go up. Object.prototype is a top-level property that is a prototype of all objects.
On top, it is null and void. At this point, a prototype chain is formed.
I use the code to one by one parsing, with the demo code to explain to you in detail:
1<script>2 functionFoo () {//fame a function foo3 4 }5AlerttypeofFoo.prototype)//Foo.prototype is an object. Can also be a prototype on an Obj object6Foo.prototype.z =3//set the prototype attribute Z to 37 varobj =NewFoo ()//Create a Obj object with a build function8obj.x = 1;//X=1 is a property on the Obj object itself9OBJ.Y = 2;//y=2 is a property on the Obj object itselfTenAlert (obj.x)//=>1 The Query object, do we get this property value OneAlert (OBJ.Y)//=>1 The Query object, do we get this property value AAlert (OBJ.Z)//= "3 Z is not an attribute of obj itself, it is a property on his prototype, if not itself, can be found on the prototype chain of his prototype, get Z property -Alert (obj.tostring ())//=tostring is a property on the top-level object object, first looking for this attribute on the prototype, and if it is not found on the top-level object object on the prototype chain -</script>
Let's take a look at the priority of getting properties on an object.
If you have this property on the object itself, you get the property on the object itself.
If the object itself has this attribute on the coast, it is looked up to his prototype.
If no more lookups are made to the top-level property.
If this property is on the prototype and on the object itself, then the property of the object itself is used first
To give you a better understanding, the demo code is as follows:
1<script>2 functionFoo () {//fame a function foo3 4 }5Foo.prototype.z =3//set the prototype attribute Z to 36 varobj =NewFoo ()//Create a Obj object with a build function7Obj.z = 5//defining the properties of an object z = 58Alert (OBJ.Z)//=>5 If an attribute z is defined on the object itself, first use the property of the object itself9 DeleteObj.z;//Delete Properties on an object itselfTenalert (OBJ.Z);//=>3 Gets the z of the object again, the result is that the property of Z of the object itself is deleted, and it is automatically searched for the object's prototype to get Z=3 One DeleteFoo.prototype.z;//Delete the Z property on the object prototype AAlert (OBJ.Z)//= = undefined because the Z property of the object itself is deleted, the Z property on the prototype is also deleted, and then continues to look for the top-level object, without this property, to return undefined -</script>
Create objects from var obj = object.create ({x:1}) to parse objects, prototypes on objects
In fact, obj.create parentheses define objects and properties that are the prototype and prototype properties of the Obj object.
The demo code is as follows:
1<script>2 varobj = Object.create ({z:4})//object.create ({z:4}) is a prototype on an object, and Z is a property on the prototype3obj.x = 1//x is the property of the object itself4OBJ.Z = 3//Z is the property of the object itself5Alert (obj.x)//=>1 Output is the X of the object itself6Alert (OBJ.Z)//=>3 output is the z of the object itself7 DeleteObj.z;//when we delete the object of the Z8Alert (OBJ.Z)//It 's going to look up to the prototype. There is no such attribute on the prototype, and if so, z refers to the property on the prototype.9</script>
Use in to explain whether an object has this property on it:
The demo code is as follows:
1<script>2 //use the property in object to detect whether the property is on an object, return True no Yes, return false is not3 functionFoo () {4 5 }6Foo.prototype.z = 57 varobj =NewFoo ()8obj.x = 1 ;9OBJ.Y = 2;TenAlert ("X"inchMB ()//=>true x is a property defined on the object itself OneAlert ("Y"inchMB ()//=>true y is also a property defined on the object itself AAlert ("Z"inchObj//=>true Z is a property inherited from an object prototype -Alert ("ToString"inchObj//=>true ToString is a property inherited from a top-level object -Alert ("No"inchObj//=>false object is not present, find the entire prototype chain does not have this property until Null returns FALSE, the</script>
To find out whether the property of the object itself, rather than the inherited property, is by hasOwnProperty
1<script>2 //use the object. hasOwnProperty ("attribute") to detect whether the property of the object itself, not the inherited3 functionFoo () {4 5 }6Foo.prototype.z = 57 varobj =NewFoo ()8obj.x = 1 ;9OBJ.Y = 2;TenAlert (Obj.hasownproperty ("X"))//=>true x is the property defined by the object itself, so returns True OneAlert (Obj.hasownproperty ("Z"))//=>false Z is an inherited property on an object prototype, so returns false AAlert (Obj.hasownproperty ("toString"))//=>false ToString is an inherited property on a top-level object, so returns false -</script>
We later looked at how an object created with var obj = Objcet.create () could detect his properties.
You can write var obj = object.create (null) without inheriting any attributes if you want to have no further attributes
Demo Code:
1<script>2 varobj = object.create ({x:1})3OBJ.Y = 24Alert ("Y"inchObj//=>true5Alert ("X"inchObj//=>true6Alert ("ToString"inchObj//=>true7Alert (Obj.hasownproperty ("X"))//=>false8Alert (Obj.hasownproperty ("Y"))//=>true9 varObj1 = Object.create (NULL)TenAlert ("ToString"inchOBJ1)//=>false creates an object that does not inherit any properties obj1 until the top-level object object is not inherited One</script>
Object-Object structure in JS--basic analysis of prototype chain