Home > Developer > JavaScript
var o1 = { name:' O1 '};var function (name) { this. Name = name;}; var New M (' O2 ');Object.create()The __proto__ method creates a new object that uses an existing object to provide the newly created object. ）
var P = {name: ' O3 '}; var o3 = Object.create (P);Second, the prototype chain
JAVASCRIPT specifies that all objects have their own prototype objects (prototype). On the one hand, any object can act as a prototype for other objects, and on the other hand, because the prototype object is also an object, it also has its own prototype. As a result, a "prototype chain" (prototype chain) is formed: the object to the prototype, then to the prototype ... So, does the Object.prototype object have its prototype? The answer is Object.prototype's prototype is null. Null does not have any properties and methods, nor does it have its own prototype. Therefore, the end of the prototype chain is null.// NULL
5 prototype Rule 1, all reference types (arrays, objects, functions), have an object attribute, you can freely extend the property 2, all reference types (arrays, objects, functions), have a __proto__ property (implicit prototype), the property value is a normal object 3, all functions, Has a prototype property (explicit prototype), the property value is also a normal object 4, all reference types (arrays, objects, functions) __proto__ The property value points to its constructor's prototype property value 5, when trying to get a reference type (array, object, function), if the reference type itself does not have this property, it will go to its __proto__ (that is, its constructor's prototype) to find// true
See
Three, instanceof principle
Determine if a function is a constructor of a variable How it works: Determine if the __proto__ property of the instance object and the prototype of the constructor are the same address, as long as the constructors on the prototype chain are instanceof considered to be the constructor of the instance. //determines whether the proto property of an instance object and the prototype of the constructor are the same address //as long as the constructor on the prototype chain is instanceof considered to be the constructor of the instance varM =function(name) { This. Name =name;}; varO2 =NewM (' O2 '); o2.__proto__= = = M.prototype//truem.prototype.__proto__ = = = Object.prototype//trueo2.__proto__.__proto__ = = = Object.prototype//trueO2instanceofM//trueO2instanceofObject//true //use constructor attribute to judge more rigorousO2.__proto__.constructor = = = M//trueO2.__proto__.constructor = = = Object//false
Four, how the new operator works
//new operator and how it works new followed by constructor //1, a new object is created, it inherits from Func.prototype (prototype object of constructor) //2, the constructor func is executed, when executed, the corresponding delegate is passed in, and the context (this) is specified as the new instance //3, if the constructor returns an "object", then this object will replace the entire new result, if the constructor does not return the object, then the result of new is the object created by step 1 varNew2 =function(func) {varo =object.create (Func.prototype); varK =Func.call (o); if(typeofK = = = ' object ' && k! =NULL) { returnK; } Else { returno; } };
Five, example of prototype chain inheritance
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Proto</title></Head><Body> <DivID= "Div1">123</Div> <Script> //Encapsulating DOM Queries functionElem (ID) { This. Elem=document.getElementById (ID); } Elem.prototype.html= function(val) {varElem= This. Elem; if(val) {elem.innerhtml=Val; return This;//easy-to-chain Operation } Else { returnelem.innerhtml; }} Elem.prototype.on= function(Type, fn) {varElem= This. Elem; Elem.addeventlistener (type, FN); return This;//easy-to-chain Operation } varDiv1= NewElem ('Div1'); Console.log (div1.html ()); Div1.html ('<p>234p</p>'). On ('Click', function() {alert ('1'); }). html ('<p>js</p>'); </Script></Body></HTML>
JavaScript prototypes and prototype chains
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
