Original Address: . For object creation and inheritance make a detailed description of
In-depth detail, there are a few points need to be clear about
1, JavaScript is not the concept of category. Since the definition of all categories are simulated through the function, including its primary object, Number, String, Array and so on. So create a custom category of examples, it was also in the implementation of a function, but implemented in different ways. Reprint article has details.
2, object prototype and function within the public prototype. In the use of new ways to invoke a function when they are through a process of how the corresponding properties and methods attached to the newly created object.
3, each object has construct property, the preservation of the property used to create the function object references. For example, var objA = new FnA (); then objA.construct on equal FnA.
Build-in *** data structure: means for implementation *** JS internal types of data structures, these structures we basically can not directly operate.
Build-in *** object: refers to JS built-in Number, String, Boolean, etc. These objects, which are internal implementation JS data types exposed to the developers to use interface.
Build-in *** constructor: refers to a number of built-in JS constructor, used to construct the corresponding type of object instance. They are packaged into a function object is exposed, for example, we can use the following methods of access to these function objects:
Each object has a [[Prototype]] internal property, its value is null or another object. Function objects have a prototype display property, it is not internal [[Prototype]] property. Different JS engine should be able to achieve the internal [[Prototype]] property name any names, and set its visibility, only for internal use at JS engine. Although it is impossible to visit in the JS code to the internal [[Prototype]] (FireFox can be named for __proto__, because it disclosed Mozilla), but can use the object isPrototypeOf () method to test, pay attention to such a measure will be in the entire Prototype chain judge.
Obj.propName visit to an object the use of the property, in accordance with the following steps to deal with (assuming obj internal [[Prototype]] property called __proto__):
1. If the obj property PropName exist, return the property value, otherwise
2. Obj.__proto__ as if null, return undefined, otherwise
3. Obj.__proto__.propName back
Ways to call the object with the property search process to visit the same method because the function object is an object property value.
NOTE: the above steps to be implied in a recursive process, step 3 obj.__proto__ is another object, the same will be used 1, 2, 3 such a step to search PropName property.
object1 will have the property prop1, prop2, prop3 and Ways fn1, fn2, fn3. Map dotted arrow indicates the prototype chain
This is the Prototype-based inheritance and shared. Object1 one of the methods fn2 from object2, the concept that is on object2 rewritten object3 method fn2.
JavaScript object should be linked through the prototype chain, and are the most top-level Object, object that is derived from the Object type.
Object creation process
JS function objects only with the concept of categories, thus enabling us to create an object, you must use the function object. Function objects have an internal [[Construct]] method and [[Call]] method, [[Construct]] is used to construct the object, [[Call]] for the function call, only use the new operator when the trigger [[Construct] ] logic.
var obj = new Object (); are using the built-in Object object to create instances of this function object obj. var obj = (); and var obj = []; this code will be triggered JS engine Object and Array tectonic process. function fn (){}; var myObj = new fn (); are used to create user-defined types to instantiate the object.
new Fn (args) The creation process is as follows (that is, the object function [[Construct]] method of dealing with logic, object creation process). Another function of the object creation process itself (referring to the definition of function or function to create a Function object, etc.) While also used in treatment following the logic, but has a special place, followed by a further description.
1. To create a build-in object object obj and initializes
2. If Fn.prototype types are Object, obj will be the internal [[Prototype]] is set to Fn.prototype, otherwise obj the [[Prototype]] will be initialized to its value (that is, Object.prototype)
3. To obj as this, using the args parameter called Fn internal [[Call]] method of 3.1 internal [[Call]] method to create the current implementation of the context of 3.2 calls a function of F body 3.3 implementation of the destruction of the current context return 3.4 body function F return value, if the body does not function F return value return undefined
4. If the [[Call]] the return value is the Object type, then return this value, otherwise return obj
Note in step 2, prototype refers to the object shown in prototype property, and the [[Prototype]] internal Prototype represents the object property (implicit).
Constitute the object Prototype chain are implicit internal [[Prototype]], rather than the object shown in prototype property. Displayed only in the function prototype object only on the significance of the creation process from the above we can see that function has been assigned to the prototype object implicit derivative [[Prototype]] property, so that under the Prototype rules, derivative of the prototype objects and function objects only exist between the properties, methods, inheritance / sharing relationship.
Return the value creation process regarding verification
Local property and inherit property
Object through the implicit chain Prototype implementation can inherit properties and methods, but the prototype is an ordinary object, that is to say it is an example of an ordinary object, rather than a purely abstract description of data structure. So there will be a property of the local property and inheritance issues.
First of all, look at the property at the time of setting the target process. JS defines a set of attribute, used to describe the object-property property, property in order to demonstrate whether the property can be located at JavaScript code value, such as being for in enumeration.
obj.propName = value of the treatment assignment, follow these steps:
1. If the attribute is set to PropName Can not set value, return
2. If obj.propName does not exist, create a property for obj, name PropName
3. Obj.propName value will be set to value
Can see that the set value of the process will not be considered Prototype chain, The reason is obvious, obj internal [[Prototype]] is an instantiation of the object, it not only to the obj property sharing may also object to other shared property , modify it may affect other objects.
With the above CF, Cfp example to illustrate examples of objects with local cf1 property q1, q2, and the succession of property CFP1, if the cf1.CFP1 = "", then cf1 on a local CFP1 property, the test results are as follows:
Object Model
1. Learn the JavaScript data type, clear as the Number of such a system with multiple built-in object identity: a) they are a function object itself, but only by the engine-house implementation, b) they represent a data type, we can with their definition of the corresponding types of data operations, c) at which the engine behind the internal implementation mechanisms, such as the internal data structure, JavaScript has become a variety of packaged objects, such as constructor.
2. Learn the Prototype mechanism, to know how objects are inherited through their properties and methods that create objects in the course of JS engines are how to set up Prototype internal relations.
JavaScript code defined function, or call Function create function, will eventually be a similar form of this function Function call: var newFun = Function (funArgs, funBody);. Create function objects of the main steps are as follows:
1. To create a build-in object object fn
2. Will fn the internal [[Prototype]] is set to Function.prototype
3. Set the internal [[Call]] property, it is an internal implementation methods, deal with the logic of a reference object creation process step 3
4. Set the internal [[Construct]] property, it is an internal implementation methods, deal with the logic of a reference object creation process steps 1,2,3,4
5. Fn.length set for funArgs.length, if the function without parameters, it will fn.length set to 0
6. The use of new Object () the same logic to create a Object object fnProto
7. FnProto.constructor set to fn
8. FnProto will fn.prototype Set
9. Return fn
Step 1 Step 6 with the difference that the steps to create one just for the implementation of internal data structures Object object (build-in object structure), and completed the necessary internal initialization job, but it's [[Prototype]], [ [Call ]],[[ Construct]] property should be null, such as internal initialization value or that we can be understood as not point to any object (of the [[Prototype]] property such terms), or does not contain any treatment (on the [[Call ]],[[ Construct]] such an approach is concerned). Step 6 will be described in accordance with the previous object creation process to create a new object, its [[Prototype]] and so on were set up.
From the above processing steps can know at any time, we define a function, its prototype is an instance of Object, so by default we create a custom function examples of objects, they will point to the Prototype chain Object.prototype.
In addition, Function a special place is that it's [[Call]] and [[Construct]] deal with the same logic.
Red dotted line express implicit Prototype chain.
This object model contains too many things that need to be carefully places a lot of experience, you can write test code to verify. Thorough understanding of this chart, the JavaScript language almost know it. Here are some additional information:
1. Chart has several places referred to build-in Function constructor, This is with an object, you can test to verify:
This shows that a number of questions: Function point to the system's built-in function Constructor (build-in Function constructor); Function with bootstrap sexual; system all functions are constructed by the Function.
2. The lower-left corner obj1, obj2 ... objn Fan said that by using similar code to create the object: function fn1 (){}; var obj1 = new fn1 ();
These objects do not have local constructor methods, but they will get a Prototype chain inherited constructor method, that is, fn.prototype.constructor, from the structure of the process of function objects can know that it is fn itself.
The lower right corner of obj1, obj2 ... objn Fan said that by using similar code to create the object: var obj1 = new Object (); or var obj1 = (); or var obj1 = new Number (123); or obj1 = / \ w + /; and so on. So these objects point Prototype chain, from the Prototype chain inherited constructor values (referring to their constructor are build-in Number constructor or build-in Object constructor, etc.) depend on the specific object type. Also note that, var obj = new Object (123); this created object, its type is still the Number, that is, under the same parameter values necessary to determine the type.
They also do not have local same constructor, but inherit Prototype chain was on the constructor method, that is build-in *** constructor, which are a specific type of data to determine.
3. On the map to add Prototype chain Description:
Object.prototype are the end point of the entire chain, its internal [[Prototype]] is null.
Prototype all functions of the chain all point to Function.prototype.
Function of Prototype chain point Function.prototype, regulatory requirements This is because the designers will be designed to have a Function of bootstrap. Function of Prototype chain after this design, Function.constructor == Function, Function instanceOf Function are true. Function is another top-level constructor, but the Function object itself is a function, it must be created by something, so that bootstrap semantically reasonable.
The Prototype Chain Function.prototype point Object.prototype, this is a mandatory specification requirements. Function First Function.prototype are an instance of the object (typeof Function.prototype know it is a Function, instanceOf can not pass the test because Prototype chain in-house by an additional set), so in accordance with the Prototype rules, Function.prototype internal [ [Prototype]] value of this object should be Function.prototype, that is, its own point Prototype chain. Prototype This on the one hand at creating a chain of die cycle, on the other hand, it has become an end in itself, the result is that all function objects will not be derived from the Object. Coupled with this injunction request, Prototype chain has a single end point.
4. Function.prototype is because a function object, so it should have displayed the prototype property, that is, Function.prototype.prototype, but only FireFox can be accessed, IE, Opera, Safari can not access. So plan to use a symbol that does not exist.
5. User-defined functions (user defined functions) by default [[Prototype]] values are Object.prototype, that it's implicit point Prototype chain Object.prototype, so plan on the express way, but do not represent the total this is the case, when a user set a custom function prototype property, the situation is different.
There are articles sp42's JavaScript "type of" inheritance horizontal comparison, which cited Kevin Lindsey That's good.
Execution Model
Implementation of the context (Execution context) chain scope (scope chain) this keyword ....
In-depth detail, there are a few points need to be clear about
1, JavaScript is not the concept of category. Since the definition of all categories are simulated through the function, including its primary object, Number, String, Array and so on. So create a custom category of examples, it was also in the implementation of a function, but implemented in different ways. Reprint article has details.
2, object prototype and function within the public prototype. In the use of new ways to invoke a function when they are through a process of how the corresponding properties and methods attached to the newly created object.
3, each object has construct property, the preservation of the property used to create the function object references. For example, var objA = new FnA (); then objA.construct on equal FnA.
Build-in *** data structure: means for implementation *** JS internal types of data structures, these structures we basically can not directly operate.
Build-in *** object: refers to JS built-in Number, String, Boolean, etc. These objects, which are internal implementation JS data types exposed to the developers to use interface.
Build-in *** constructor: refers to a number of built-in JS constructor, used to construct the corresponding type of object instance. They are packaged into a function object is exposed, for example, we can use the following methods of access to these function objects:
//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
//access the build-in number constructor
var number = new Number(123);
var numConstructor1 = number.constructor; //or
var numConstructor2 = new Object(123).constructor;
//both numConstructor1 and numConstructor2 are the build-in Number constructor
numConstructor1 == numConstructor2 //result: true
//access the build-in object constructor
var objConstructor1 = {}.constructor; //or
var objConstructor2 = new Object().constructor;
//both objConstructor1 and objConstructor2 are the build-in Object constructor
objConstructor1==objConstructor2 //result: true Each object has a [[Prototype]] internal property, its value is null or another object. Function objects have a prototype display property, it is not internal [[Prototype]] property. Different JS engine should be able to achieve the internal [[Prototype]] property name any names, and set its visibility, only for internal use at JS engine. Although it is impossible to visit in the JS code to the internal [[Prototype]] (FireFox can be named for __proto__, because it disclosed Mozilla), but can use the object isPrototypeOf () method to test, pay attention to such a measure will be in the entire Prototype chain judge.
Obj.propName visit to an object the use of the property, in accordance with the following steps to deal with (assuming obj internal [[Prototype]] property called __proto__):
1. If the obj property PropName exist, return the property value, otherwise
2. Obj.__proto__ as if null, return undefined, otherwise
3. Obj.__proto__.propName back
Ways to call the object with the property search process to visit the same method because the function object is an object property value.
NOTE: the above steps to be implied in a recursive process, step 3 obj.__proto__ is another object, the same will be used 1, 2, 3 such a step to search PropName property.
object1 will have the property prop1, prop2, prop3 and Ways fn1, fn2, fn3. Map dotted arrow indicates the prototype chain
This is the Prototype-based inheritance and shared. Object1 one of the methods fn2 from object2, the concept that is on object2 rewritten object3 method fn2.
JavaScript object should be linked through the prototype chain, and are the most top-level Object, object that is derived from the Object type.
Object creation process
JS function objects only with the concept of categories, thus enabling us to create an object, you must use the function object. Function objects have an internal [[Construct]] method and [[Call]] method, [[Construct]] is used to construct the object, [[Call]] for the function call, only use the new operator when the trigger [[Construct] ] logic.
var obj = new Object (); are using the built-in Object object to create instances of this function object obj. var obj = (); and var obj = []; this code will be triggered JS engine Object and Array tectonic process. function fn (){}; var myObj = new fn (); are used to create user-defined types to instantiate the object.
new Fn (args) The creation process is as follows (that is, the object function [[Construct]] method of dealing with logic, object creation process). Another function of the object creation process itself (referring to the definition of function or function to create a Function object, etc.) While also used in treatment following the logic, but has a special place, followed by a further description.
1. To create a build-in object object obj and initializes
2. If Fn.prototype types are Object, obj will be the internal [[Prototype]] is set to Fn.prototype, otherwise obj the [[Prototype]] will be initialized to its value (that is, Object.prototype)
3. To obj as this, using the args parameter called Fn internal [[Call]] method of 3.1 internal [[Call]] method to create the current implementation of the context of 3.2 calls a function of F body 3.3 implementation of the destruction of the current context return 3.4 body function F return value, if the body does not function F return value return undefined
4. If the [[Call]] the return value is the Object type, then return this value, otherwise return obj
Note in step 2, prototype refers to the object shown in prototype property, and the [[Prototype]] internal Prototype represents the object property (implicit).
Constitute the object Prototype chain are implicit internal [[Prototype]], rather than the object shown in prototype property. Displayed only in the function prototype object only on the significance of the creation process from the above we can see that function has been assigned to the prototype object implicit derivative [[Prototype]] property, so that under the Prototype rules, derivative of the prototype objects and function objects only exist between the properties, methods, inheritance / sharing relationship.
//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
function fn(){}
//the value of implicit [[Prototype]] property of those objects derived from fn will be assigned to fn.prototype
fn.prototype={ attr1:"aaa", attr2:"bbb"};
var obj=new fn();
document.write(obj.attr1 + "<br />"); //result: aaa
document.write(obj.attr2 + "<br />"); //result: bbb
document.write(obj instanceof fn); //result: true
document.write("<br />");
//I change the prototype of fn here, so by the algorithm of Prototype the obj is no longer the instance of fn,
//but this won't affect the obj and its [[Prototype]] property, and the obj still has attr1 and attr2 properties
fn.prototype={};
document.write(obj.attr1 + "<br />"); //result: aaa
document.write(obj.attr2 + "<br />"); //result: bbb
document.write(obj instanceof fn); //result: false Return the value creation process regarding verification
//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
function fn(){
//according to step 4 described above,
//the new fn() operation will return the object { attr1: 111, attr2: 222 }, it's not an instance of fn!
return { attr1: 111, attr2: 222 };
}
fn.prototype={ attr1:"aaa", attr2:"bbb"};
var obj=new fn();
document.write(obj.attr1 + "<br />"); //result: 111
document.write(obj.attr2 + "<br />"); //result: 222
document.write(obj instanceof fn); //result: false Local property and inherit property
Object through the implicit chain Prototype implementation can inherit properties and methods, but the prototype is an ordinary object, that is to say it is an example of an ordinary object, rather than a purely abstract description of data structure. So there will be a property of the local property and inheritance issues.
First of all, look at the property at the time of setting the target process. JS defines a set of attribute, used to describe the object-property property, property in order to demonstrate whether the property can be located at JavaScript code value, such as being for in enumeration.
obj.propName = value of the treatment assignment, follow these steps:
1. If the attribute is set to PropName Can not set value, return
2. If obj.propName does not exist, create a property for obj, name PropName
3. Obj.propName value will be set to value
Can see that the set value of the process will not be considered Prototype chain, The reason is obvious, obj internal [[Prototype]] is an instantiation of the object, it not only to the obj property sharing may also object to other shared property , modify it may affect other objects.
With the above CF, Cfp example to illustrate examples of objects with local cf1 property q1, q2, and the succession of property CFP1, if the cf1.CFP1 = "", then cf1 on a local CFP1 property, the test results are as follows:
//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
var cf1=new CF("aaa", "bbb");
var cf2=new CF(111, 222);
document.write(cf1.CFP1 + "<br />"); //result: CFP1 in Cfp
document.write(cf2.CFP1 + "<br />"); //result: CFP1 in Cfp
//it will result in a local property in cf1
cf1.CFP1="new value for cf1";
//changes on CF.prototype.CFP1 will affect cf2 but not cf1, because there's already a local property with
//the name CFP1 in cf1, but no such one in cf2
CF.prototype.CFP1="new value for Cfp";
document.write(cf1.CFP1 + "<br />"); //result: new value for cf1
document.write(cf2.CFP1 + "<br />"); //result: new value for Cfp Object Model
1. Learn the JavaScript data type, clear as the Number of such a system with multiple built-in object identity: a) they are a function object itself, but only by the engine-house implementation, b) they represent a data type, we can with their definition of the corresponding types of data operations, c) at which the engine behind the internal implementation mechanisms, such as the internal data structure, JavaScript has become a variety of packaged objects, such as constructor.
2. Learn the Prototype mechanism, to know how objects are inherited through their properties and methods that create objects in the course of JS engines are how to set up Prototype internal relations.
JavaScript code defined function, or call Function create function, will eventually be a similar form of this function Function call: var newFun = Function (funArgs, funBody);. Create function objects of the main steps are as follows:
1. To create a build-in object object fn
2. Will fn the internal [[Prototype]] is set to Function.prototype
3. Set the internal [[Call]] property, it is an internal implementation methods, deal with the logic of a reference object creation process step 3
4. Set the internal [[Construct]] property, it is an internal implementation methods, deal with the logic of a reference object creation process steps 1,2,3,4
5. Fn.length set for funArgs.length, if the function without parameters, it will fn.length set to 0
6. The use of new Object () the same logic to create a Object object fnProto
7. FnProto.constructor set to fn
8. FnProto will fn.prototype Set
9. Return fn
Step 1 Step 6 with the difference that the steps to create one just for the implementation of internal data structures Object object (build-in object structure), and completed the necessary internal initialization job, but it's [[Prototype]], [ [Call ]],[[ Construct]] property should be null, such as internal initialization value or that we can be understood as not point to any object (of the [[Prototype]] property such terms), or does not contain any treatment (on the [[Call ]],[[ Construct]] such an approach is concerned). Step 6 will be described in accordance with the previous object creation process to create a new object, its [[Prototype]] and so on were set up.
From the above processing steps can know at any time, we define a function, its prototype is an instance of Object, so by default we create a custom function examples of objects, they will point to the Prototype chain Object.prototype.
In addition, Function a special place is that it's [[Call]] and [[Construct]] deal with the same logic.
Red dotted line express implicit Prototype chain.
This object model contains too many things that need to be carefully places a lot of experience, you can write test code to verify. Thorough understanding of this chart, the JavaScript language almost know it. Here are some additional information:
1. Chart has several places referred to build-in Function constructor, This is with an object, you can test to verify:
//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
Function==Function.constructor //result: true
Function==Function.prototype.constructor //result: true
Function==Object.constructor //result: true
//Function also equals to Number.constructor, String.constructor, Array.constructor, RegExp.constructor, etc.
function fn(){}
Function==fn.constructor //result: true This shows that a number of questions: Function point to the system's built-in function Constructor (build-in Function constructor); Function with bootstrap sexual; system all functions are constructed by the Function.
2. The lower-left corner obj1, obj2 ... objn Fan said that by using similar code to create the object: function fn1 (){}; var obj1 = new fn1 ();
These objects do not have local constructor methods, but they will get a Prototype chain inherited constructor method, that is, fn.prototype.constructor, from the structure of the process of function objects can know that it is fn itself.
The lower right corner of obj1, obj2 ... objn Fan said that by using similar code to create the object: var obj1 = new Object (); or var obj1 = (); or var obj1 = new Number (123); or obj1 = / \ w + /; and so on. So these objects point Prototype chain, from the Prototype chain inherited constructor values (referring to their constructor are build-in Number constructor or build-in Object constructor, etc.) depend on the specific object type. Also note that, var obj = new Object (123); this created object, its type is still the Number, that is, under the same parameter values necessary to determine the type.
They also do not have local same constructor, but inherit Prototype chain was on the constructor method, that is build-in *** constructor, which are a specific type of data to determine.
3. On the map to add Prototype chain Description:
Object.prototype are the end point of the entire chain, its internal [[Prototype]] is null.
Prototype all functions of the chain all point to Function.prototype.
Function of Prototype chain point Function.prototype, regulatory requirements This is because the designers will be designed to have a Function of bootstrap. Function of Prototype chain after this design, Function.constructor == Function, Function instanceOf Function are true. Function is another top-level constructor, but the Function object itself is a function, it must be created by something, so that bootstrap semantically reasonable.
The Prototype Chain Function.prototype point Object.prototype, this is a mandatory specification requirements. Function First Function.prototype are an instance of the object (typeof Function.prototype know it is a Function, instanceOf can not pass the test because Prototype chain in-house by an additional set), so in accordance with the Prototype rules, Function.prototype internal [ [Prototype]] value of this object should be Function.prototype, that is, its own point Prototype chain. Prototype This on the one hand at creating a chain of die cycle, on the other hand, it has become an end in itself, the result is that all function objects will not be derived from the Object. Coupled with this injunction request, Prototype chain has a single end point.
4. Function.prototype is because a function object, so it should have displayed the prototype property, that is, Function.prototype.prototype, but only FireFox can be accessed, IE, Opera, Safari can not access. So plan to use a symbol that does not exist.
5. User-defined functions (user defined functions) by default [[Prototype]] values are Object.prototype, that it's implicit point Prototype chain Object.prototype, so plan on the express way, but do not represent the total this is the case, when a user set a custom function prototype property, the situation is different.
There are articles sp42's JavaScript "type of" inheritance horizontal comparison, which cited Kevin Lindsey That's good.
Execution Model
Implementation of the context (Execution context) chain scope (scope chain) this keyword ....