JS Elevation Object & Prototype Learning Notes

ECMA-262 defines an object as: "A collection of unordered attributes whose properties can contain basic values, objects, or functions." "Can putobjects of the ECMAScriptImagined asHash Table: Nothing but a groupName value pairs, wherevalues can be data or functions。6.1. Understanding ObjectsThere are two ways to create a custom object: (1) Create an instance of an object: var person = new Object ();(2) object literal (preferred): var person = {};There are two types of properties in the---------------------------------------------------------------------------------------------ECMAScript:Data PropertiesAndAccessor Properties。Data PropertiesThe location that contains a data value. To modify the property's default attributes, you must use the ECMAScript 5Object.defineproperty () method。Accessor PropertiesDoes not contain data values, they contain a pair of getter and setter functions. Accessor properties cannot be defined directly, you must use theObject.defineproperty ()To define. __year:year the preceding underscore is a common marker that is accessible only through object methods. ----------------------------------------------------------------------------------------------Define multiple properties:object.defineproperties () method, you can define both data properties and accessor properties. ----------------------------------------------------------------------------------------------properties of the Read property:Object.getownpropertydescriptor () method, you can get a descriptor for a given property.6.2. Create an Object6.2.2 Constructor ModeThe only difference between constructors and other functions is that they are called in different ways. Any function, as long as it is called by the new operator, can be used as a constructor, and any function, if not called by the new operator, is no different from the normal function.

//use as a constructor functionvarperson =NewPerson ("Nick", "Software Engineer");p erson.sayname (); //"Nick."//called as a normal functionPerson ("Greg", "Doctor"); Window.sayname (); //"Greg"//called in the scope of another objectvaro =NewObject (); Person.call (O,"Kristen", "Nurse"); O.sayname (); //"Kristen"

of the constructor function Major Issues : Each method is recreated on the instance because the function in ECMAScript is an object, so each time a function is defined, an object is instantiated.

6.2.3 Prototype ModeEach function that we create has aprototype (prototype) Properties, this property is aPointers, point to an object. The advantage of using a prototype object is that you can have all object instances share the properties and methods that it contains.(1) Understanding prototype objectsWhenever a new function is created, a specific set of rules is created for that function to create aPrototype Property, this property points to the function'sPrototype Object。 By default, all prototype objects automatically get aConstructor (constructor) propertyA property that contains a pointer to the function where the prototype property is located. After a custom constructor has been created, its prototype object defaultsonly the constructor property is obtainedAs for other methods, they are inherited from Object. When the constructor is called to create a new instance, the inside of the instance contains a pointer ([[Prototype]], internal properties), the prototype object that points to the constructor. cannot be accessed in all implementations [[Prototype]], you canisprototypeof () methodTo determine if there is an instance and prototype relationship between objects:

// true // true

ECMAScript 5 Adds a new method called object.getprototypeof (), which returns the value of [[Prototype]]:

Alert (object.getprototypeof (person1) = = = Person.prototype);    // truealert (object.getprototypeof (person1). name);    // "Nicholas"

Use the hasownproperty () method to detect whether a property exists in an instance or exists in a prototype. This method (do not forget that it is inherited from object) returns true only if the given property exists in the object instance. With this property, when the instance property is accessed, it is clear when the prototype attribute is accessed.

varPerson1 =NewPerson ();varPerson2 =NewPerson (); Alert (Person1.hasownproperty ("Name"));//falsePerson1.name= "Greg"; alert (person1.name); //"Greg"-from the exampleAlert (Person1.hasownproperty ("name"));//truealert (person2.name); //"Nicholas"-from the prototypeAlert (Person2.hasownproperty ("name"));//falseDeletePerson1.name;alert (person1.name); //"Nicholas"-from the prototypeAlert (Person1.hasownproperty ("name"));//false

ECMAScript 5 's Object.getownpropertydescriptor () method can only be used for instance properties, and to obtain a descriptor for a prototype property, it must be called directly on the prototype object. Object.getownpropertydescriptor () method.

(2) prototypes and in operatorsThere are two ways to use the In operator: use separately and in the for-in loop. When used alone, the in operator returns True when accessing a given property through an object, whether the attribute exists in an instance or in a prototype.

Alert (Person1.hasownproperty ("name"));//false;Alert ("Name"inchPerson1);//truePerson1.name= "Greg"; alert (person1.name); //"Greg"-from the exampleAlert (Person1.hasownproperty ("name"));//trueAlert ("Name"inchPerson1);//true;alert (person2.name); //"Nicholas"-from the prototypeAlert (Person2.hasownproperty ("name"));//falseAlert ("Name"inchPerson2);//true;DeletePerson1.name;alert (person1.name); //"Nicholas"-from the prototypeAlert (Person1.hasownproperty ("name"));//falseAlert ("Name"inchPerson1);//true;

using both the hasOwnProperty () method and the In operator, you can determine whether the attribute is present in the object or in the prototype.

function Hasprototypeproperty (object, name) {    return in object);}

When usingfor-in The loop, all the enumerable (enumerated) properties that can be accessed through the object are returned，This includes both the attributes that exist in the instance and the properties that exist in the prototype。 Instance properties that block non-enumerable properties in the prototype (properties that will be marked as false for [[Enumerable]]) are also returned in the for-in loop because, as a rule, all developer-defined properties are enumerable. Non-enumerable properties and methods: hasOwnProperty (), propertyisenumerable (), tolocalestring (), toString (), ValueOf (), constructor, Prototype togets all enumerable instance properties on an object, you can use the ECMAScript 5Object.keys () method。 If you want toto get all instance properties, whether it is enumerable or not, you can use theobject.getownpropertynames () method。 Both the Object.keys () and Object.getownpropertynames () methods can be used to replace the for-in loop.(3) simpler prototype syntax

function= {   Constructor:person,   "Nicholas",   "    Software Engineer ",   function  () {       alert (this. Name);               }   };

Note : Resetting the constructor property in this way causes its [[Enumerable]] attribute to be set to true. By default, the native constructor property is not enumerable.

6.2.4 combination using constructor mode and prototype modeThe most common way to create a custom type is to combine the constructor pattern with the prototype pattern.constructor mode for defining instance properties, whileprototype patterns are used to define methods and shared properties。 In addition, this blending pattern also supports passing parameters to the constructor, which is the length of the two modes.

1 functionPerson (name, age, job) {2      This. Name =name;3      This. Age =Age ;4      This. Job =job;5      This. Friends = ["Shelby", "Court"];6 }7 8Person.prototype = {9 Constructor:person,TenSayname:function() { OneAlert This. Name); A     } - } -  the varPerson1 =NewPerson ("Nicholas", "Software Enginner"); - varPerson2 =NewPerson ("Greg", "Doctor"); -  -Person1.friends.push ("Van"); +alert (person1.friends);//"Shelby, Court, Van." -alert (person2.friends);//"Shelby, Court" +Alert (person1.friends = = = Person2.friends);//false AAlert (Person1.sayname = = = Person2.sayname);//true

JS Elevation Object & Prototype Learning Notes