Understanding javascript_06_ understanding of object creation process _javascript skills

Source: Internet
Author: User
Tags inheritance object object
Simple code
Let's take a look at a simple piece of code:
Copy Code code as follows:

function humancloning () {
}
Humancloning.prototype ={
Name: ' Idiot's motto '
}
var clone01 = new humancloning ();
alert (clone01.name);//' Idiot's motto '
Alert (clone01 instanceof humancloning);//true
Humancloning.prototype = {};
alert (clone01.name);//' Idiot's motto '
Alert (clone01 instanceof humancloning);//false
var clone02 = new humancloning ();
alert (clone02.name);//undefined
Alert (clone02 instanceof humancloning);//true

a complex theory
JS only function objects (functions) have the concept of class, so create an object, you must use the function object. There is a [[construct]] method and a [[call]] method inside the function object, [[[Construct]] is used to construct the object, [[call]] is used for function calls, and only the [[construct]] logic is triggered when the new operator is used. Note: In this example humancloning this custom function is a function object, is the Object,string,number and so on the local object is the function object? The answer is yes, because the local object can be thought of as a derived type of function, in this sense, They can be equated with user-defined functions. (Echoes the "Built-in data types" section of the Understanding javascript_04_ data Model)
var obj=new Object (); is to create the instantiated object obj using the built-in object. var obj={}; and Var obj=[]; This code will trigger the construction of object and array by the JS engine. function fn () {}; var myobj=new fn (); Is the creation of an instantiated object using a user-defined type.
Note: The specific concepts of function objects will be explained in subsequent articles, and the "function object" can now be simply understood as the concept of "function" and can be.

Internal implementation
With this example, the function object is humancloning, and the object instance created by the function object is CLONE01 and CLONE02. Now let's take a look at the implementation details of the var clone01 = new Humancloning () (Note: the [[construct] method processing logic of the function object is responsible for implementing the creation of the object):
1. Create an Build-in Object object obj and initialize
2. If Humancloning.prototype is type object, the internal [[Prototype]] of CLONE01 is set to Humancloning.prototype, otherwise clone01 [[Prototype]] The value (that is, Object.prototype) is initialized for it.
3. Use CLONE01 as this to invoke the humancloning internal [[Call]] method using the args parameter
3.1 The internal [[call]] method creates the current execution context (note: For the execution context, it will be explained in the following posting, which is explained in the text "JavaScript speed _01_ reference variable optimization")
3.2 Calling the Humancloning function body
3.3 Destroying the current execution context
3.4 Returns the return value of the humancloning function body, and returns undefined if the function body of the humancloning does not have a return value
4. If the return value of [[call]] is of type object, this value is returned, otherwise the obj
Note that the following code explains the code for step 1, Step 2, and step 3:
Copy Code code as follows:

var clone01 = {};
Outside of the program is inaccessible [[prototype]], used only for understanding
Clone01. [[prototype]] = Humancloning.prototype;
Humancloning.call (CLONE01);

Note in step 2, Prototype refers to the Prototype property that the object displays, whereas [[Prototype]] represents the internal Prototype property (implicit) of the object. The Prototype chain of the constituent object is implicitly [[[Prototype]], not the Prototype property that the object displays. The displayed Prototype only makes sense on the function object, as you can see from the creation process above that the Prototype of the function is assigned to the derived object implicit [[Prototype]] property, so that according to the Prototype rule, The inheritance/sharing relationship of attributes, methods exists between the prototype objects of the derived object and the function. (that is, prototype inheritance implementation principle, is "understanding javascript_05_ Prototype Inheritance principle" content)
Note in step 3.4, let's look at a question from Yu Yinfei:

I think it would be a breeze to answer that question now.

Note: Original address http://www.planabc.net/2008/02/20/javascript_new_function/

Memory Analysis

A simple memory graph, and the introduction of the concept of the function object, also explains the above code (relatively the graph is not very rigorous, but easy to understand). This also leads to a problem, instanceof the principle of implementation, presumably we have seen some of the signs, instanceof judgment depends on the prototype chain, specific implementation details, see Follow-up blog.
Local Properties and inherited properties
Objects can implement inheritance of properties and methods through an implicit prototype chain, but prototype is also a common object, which means that it is a common instantiated object rather than a purely abstract data structure description. So there is the problem with this local attribute and the inherited property.
First look at the process of setting object properties. JS defines a set of attributes that describe the properties of an object to indicate whether the property can be set in JavaScript code, in the for in enumeration, and so on.
The Obj.propname=value assignment statement processing steps are as follows:
1. If the attribute of propname is set to a value that cannot be set, return
2. If Obj.propname does not exist, create an attribute for obj, named propname
3. Set the value of the Obj.propname values to value
As you can see, the set value process does not take into account the Prototype chain, and it is clear that obj's internal [[Prototype]] is an instantiated object that not only shares attributes to obj, it may also share properties with other objects, modifying it may affect other objects.
Let's look at an example:

Copy Code code as follows:

function humancloning () {
}
Humancloning.prototype ={
Name: ' Idiot's motto '
}
var clone01 = new humancloning ();
Clone01.name = ' JXL ';
alert (clone01.name);//JXL
var clone02 = new humancloning ();
alert (clone02.name);//Fool's motto

The result is clear that an object's properties cannot modify the attributes of the same name in its prototype, but only create a property of the same name and assign a value to it.
Reference.
Http://www.jb51.net/article/25008.htm

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.