A brief discussion of the prototype pattern in JavaScript

There are many ways to create objects in JavaScript, such as factory mode, constructor mode, prototype mode, etc.:

//Factory mode <br>function createPerson( name,age,job)<br>{<br> var o = new Object;<br> o.name = name;<br> o.age = age;<br> o.job = job;<br> o.sayName = function()<br> {<br> alert(this .name);<br> }<br> return o;<br>}<br>var person = createPerson('dw',20,'IT');<br><p><br></p><p><br></p><p><br></p><p>The equivalent prototype pattern: </p><p> </p><p>function Person()<br>{<br><br>}<br>Person.prototype = <br>{<br> name:"dw",<br> age:20,<br> job:"IT",<br> sayName:function()<br> {<br> alert(this. name);<br> }<br>};<br>var person2 = new Person;<br><br> In Javascript, each function has a prototype attribute, which is a pointer to the prototype object and can be used to create the sum of attributes shared by all instances. method. In prototype mode, create an instance person3</p><p><br></p><p></p><p>var person3 = new Person;<br>person2.name; //dw<br>person3.name; //dw<br><br>person2 and person3’s name attributes both return dw . The properties and methods of a prototype object are shared by all instances of a specific type. By default, each prototype object will automatically obtain a constructor attribute, which is used to point to the pointer to the function where the prototype attribute is located, such as Person.prototype.constructor points to Person</p><p><br></p><p></p><p>alert(Person.prototype.constructor) ; //Return the constructor of Person<br>//Person.prototype.constructor is just a pointer to Person, which is not equal to Person<br>//The following returns false<br>alert(Person.prototype.constructor === Person)<br>alert (Person.prototype.constructor == Person)<br><br>The love triangle relationship between instances, prototype objects, and constructors is as shown in the figure below:</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/628/727/400/1480037228955873.png" class="lazy" title="1480037228955873.png" alt="A brief discussion of the prototype pattern in JavaScript"></p><p>Inside each instance, there is a pointer pointing to the prototype object. In ECMA- The fifth version of 262 is called [[prototype]]. Instances created in prototype mode have no direct relationship with constructors. </p><p><br></p><p> Although [[prototype]] cannot be accessed, you can use the isPrototypeOf() method to determine whether the object is a prototype object. </p><p></p><p>alert(Person.prototype.isPrototypeOf(person2)); //true<br>alert(Person.prototype.isPrototypeOf(person3));//true<br><br>because there is a pointer to Person.prototype inside the instance , so they all return true. In ECMAScript 5, you can use Object.getPrototypeOf() to return [[prototype]], that is, return the prototype object </p><p><br></p><p></p><p>alert(Object.getPrototypeOf(person2) == Person.prototype); //true<br>alert (Object.getPrototypeOf(person2).name); //dw<br><br> Note: Although you can use the instance to access the value in the prototype, you cannot overwrite the value in the prototype through the instance, that is, an attribute with the same name as the prototype is added to the instance. , the attribute of the prototype with the same name is blocked. </p><p><br></p><p></p><p>person2.name="qs";<br>alert(person2.name);//qs<br><br>Even if the name attribute is set to null, the name in the prototype still cannot be accessed. You can use delete to delete the name attribute of the instance, and then you can revisit the name in the prototype.</p><p><br></p><p></p><p></p><pre name="code" class="html">person2.name = null;<br>alert(person2 .name); //null<br>delete person2.name;alert(person2.name); //dw<br><br><p><br></p><p><br> For a property with the same name, you can use the hasOwnProperty("propertyName") method to detect whether the property belongs to an instance or Prototype, this method only returns true if the given property exists in the instance</p><p><br></p>