Learning javascript object-oriented understanding of javascript prototype and prototype chain, javascript object-oriented

Learning javascript object-oriented understanding of javascript prototype and prototype chain, javascript object-oriented

Let's take a look at a picture and sort it out.

I. Basic Concepts　
Prototype chain]Each constructor has an object. The prototype object contains a pointer to the constructor, And the instance contains an internal pointer to the prototype object. If the prototype object is equal to another prototype instance, the prototype object contains a pointer to another prototype. Correspondingly, the other prototype also contains a pointer to another constructor. If another prototype is an instance of another prototype, the above relationship remains valid. Such a progressive process forms the chain between instances and prototypes.
[Prototype object]This object contains attributes and methods that can be shared by all instances of a specific type. All reference types inherit objects by default, and this inheritance is also implemented through the prototype chain. The default prototype of all functions is an Object instance. Therefore, the default prototype contains an internal pointer pointing to the Object. prototype, which is exactly why all custom types inherit the toString () and valueOf () methods.
[Constructor]The difference between constructors and other functions is that they are called in different ways. Generally, a function can be called through the new operator as a constructor. If it is called without the new operator, it is no different from a common function.
[Note] user-defined functions and built-in constructors in javascript can be used as constructors.
[Constructor Writing Method]The constructor should always start with an upper-case letter, rather than starting with a lower-case letter. This method is based on other OO languages, mainly to distinguish it from other functions in ECMAScript. because constructors are also functions, they can only be used to create objects.
[Three application scenarios of constructor]
[A] used as a constructor

var person = new Person("Nicholas",29,"software Engineer");person.sayName();

[B] called as a common function

Person ("greg", 27, "doctor"); // Add to windowwindow. sayName (); // "Greg"

[C] calling in the scope of another object

var o = new Object();Person.call(o,"Kristen",25,"Nurse");o.sayName();//"Kristen"

[Prototype attribute]Once a new function is created, a prototype attribute is created for the function according to a set of specific rules. This attribute points to the prototype object of the function.
[Note] only functions have the prototype attribute. objects do not have the prototype attribute.
[Constructor attributes]By default, all prototype objects will automatically obtain a constructor (constructor) attribute, which contains a pointer to the function of the prototype attribute.
[Note] after a user-defined constructor is created, the prototype Object only obtains the constructor attribute by default. Other methods are inherited from the Object.
[_ Proto _ and [[prototype]After a constructor is called to create a new instance, the instance contains a pointer (internal attribute) pointing to the constructor's prototype object. The pointer to ECMA-262 version 5th is called [prototype]. Although the [[prototype] is accessed in a standard way in the script, firefox \ safari \ chrome supports a property _ proto _ on each object. In other implementations, this attribute is completely invisible to the script. This connection exists between the instance and the prototype object of the constructor, rather than between the instance and the constructor.
Ii. Basic operations
[Prototype link query]Each time the Code reads an attribute of an object, a search is executed, and the target is an attribute with a given name. Search first starts from the object instance itself. If a property with a given name is found in the instance, the value of the property is returned. If no property is found, the search continues for the prototype object pointed to by the pointer, search for attributes with a given name in the prototype object. If this attribute is found, the value of this attribute is returned.
[Add instance attributes]When an attribute is added to an object instance, this attribute shields the attributes of the same name stored in the prototype object. In other words, adding this attribute will only prevent us from accessing the attribute in the prototype, but it does not modify that attribute. Even if it is set to null, it will only set this attribute in the instance, instead of restoring its connection to the prototype. However, you can use the delete operator to completely delete instance attributes so that we can re-access attributes in the prototype.
[Dynamic Prototype]Because the process of searching values in the prototype is a search, any modifications made to the prototype object can be immediately reflected on the instance, this works even if you create an instance first and then modify the prototype.
[Note] It is not recommended to modify the prototype of native objects in a productized program.

function Person(){};var friend = new Person();Person.prototype.sayHi = function(){  alert('hi');}friend.sayHi();//"hi"  

[Rewrite prototype]When calling the constructor, a [[prototype] pointer pointing to the original prototype is added to the instance, changing the prototype to another object will cut off the relationship between the constructor and the original prototype. The pointer in the instance only points to the prototype, not the constructor.
III. Basic Methods
[1] isPrototypeOf (): determines whether the Instance Object and prototype object exist in the same prototype chain, as long as it is a prototype that has appeared in the prototype chain, it can be said that it is the prototype of the Instance derived from the prototype chain.

function Person(){};var person1 = new Person();var person2 = new Object();console.log(Person.prototype.isPrototypeOf(person1));//trueconsole.log(Object.prototype.isPrototypeOf(person1));//trueconsole.log(Person.prototype.isPrototypeOf(person2));//falseconsole.log(Object.prototype.isPrototypeOf(person2));//true

[2] ECMAScript5 New Method Object. getPrototypeOf (): This method returns the value of [Prototype]

function Person(){};var person1 = new Person();var person2 = new Object();console.log(Object.getPrototypeOf(person1)); //Person{}console.log(Object.getPrototypeOf(person1) === Person.prototype); //trueconsole.log(Object.getPrototypeOf(person1) === Object.prototype); //falseconsole.log(Object.getPrototypeOf(person2)); //Object{}  

[3] hasOwnProperty (): checks whether an attribute exists in an instance.

Function Person () {Person. prototype. name = 'nicholas ';} var person1 = new Person (); // The instance does not exist, but the console exists in the prototype. log (person1.hasOwnProperty ("name"); // false // The console does not exist in the instance or in the prototype. log (person1.hasOwnProperty ("no"); // falseperson1.name = 'greg '; console. log (person1.name); // 'greg 'console. log (person1.hasOwnProperty ('name'); // truedelete person1.name; console. log (person1.name); // "Nicolas" console. log (person1.hasOwnProperty ('name'); // false

[4] ECMAScript5 Object. getOwnPropertyDescriptor (): it can only be used to obtain the descriptor of an instance attribute. To obtain the descriptor of a prototype attribute, the Object. getOwnPropertyDescription () method must be called directly on the prototype Object.

function Person(){  Person.prototype.name = 'Nicholas';}var person1 = new Person();person1.name = 'cook';console.log(Object.getOwnPropertyDescriptor(person1,"name"));//Object {value: "cook", writable: true, enumerable: true, configurable: true}console.log(Object.getOwnPropertyDescriptor(Person.prototype,"name"));//Object {value: "Nicholas", writable: true, enumerable: true, configurable: true}

[5] in OPERATOR: returns true when a given attribute can be accessed through an object, regardless of whether the attribute exists in an instance or a prototype.

function Person(){}var person1 = new Person();person1.name = 'cook';console.log("name" in person1);//trueconsole.log("name" in Person.prototype);//falsevar person2 = new Person();Person.prototype.name = 'cook';console.log("name" in person2);//trueconsole.log("name" in Person.prototype);//true

[6] use the hasOwnProperty () method and the in operator to determine whether the attribute exists in the instance.

// If hasOwnProperty () returns false and the in operator returns true, the function returns true, and the result is the property function hasPrototypeProperty (object, name) {return! Object. hasOwnProperty (name) & (name in object);} function Person () {Person. prototype. name = 'nicholas ';} var person1 = new Person (); console. log (hasPrototypeProperty (person1, 'name'); // trueperson1.name = 'cook'; console. log (hasPrototypeProperty (person1, 'name'); // falsedelete person1.name; console. log (hasPrototypeProperty (person1, 'name'); // truedelete Person. prototype. name; console. log (hasPrototypeProperty (person1, 'name'); // false

[7] ECMAScript5 Object. keys () method: receives an Object as a parameter and returns an array of strings containing all the enumerated attributes.
[Note] This method must be used before new instance objects are generated. Otherwise, it is null.

function Person(){  Person.prototype.name = 'Nicholas';  Person.prototype.age = 29;  Person.prototype.job = 'Software Engineer';  Person.prototype.sayName = function(){    alert(this.name);  }  };var keys = Object.keys(Person.prototype);console.log(keys);//[]var p1 = new Person();p1.name = "Rob";p1.age = 31;var keys = Object.keys(Person.prototype);console.log(keys);//["name","age","job","sayName"]var p1Keys = Object.keys(p1);console.log(p1Keys);//["name","age"]

[8] ECMAScript5 Object. getOwnPropertyNames () method: receives an Object as a parameter and returns a string array containing all attributes
[Note] You must first use the new instance object method. Otherwise, only the constructor

function Person(){  Person.prototype.name = 'Nicholas';  Person.prototype.age = 29;  Person.prototype.job = 'Software Engineer';  Person.prototype.sayName = function(){    alert(this.name);  }  };var keys = Object.getOwnPropertyNames(Person.prototype);console.log(keys);//["constructor"]var p1 = new Person();var keys = Object.getOwnPropertyNames(Person.prototype);console.log(keys);//["constructor", "name", "age", "job", "sayName"]

I hope this article will help you learn about javascript programming.

Articles you may be interested in:

• Javascript prototype chain
• The origin of the prototype chain of a Javascript Object
• Javascript learning notes (9) prototype in javascript and Inheritance of prototype chains
• Js prototype chain principles
• JS inheritance-prototype chain inheritance and class inheritance
• Prototype chaining Based on JavaScript
• Basic explanation of JavaScript inheritance (prototype chain, borrow constructor, hybrid mode, original type inheritance, parasitic inheritance, and parasitic combined inheritance)