The explanation in the comments is very detailed, so I won’t talk much nonsense here, just enter the code:
<script type="text/javascript"> //ECMA-262 defines an object as: "a collection of unordered attributes, whose attributes can contain basic values, objects or functions" //The easiest way to understand the object is to create an instance of the object and add attributes and methods to it var person = new Object(); person.name = "Xulei"; person.age = "23"; person.job = "front-end engineer"; person.sayName = function () { alert(this.name); } //You can also write var person = { name: "xulei", age: 23, job: "front-end engineering", sayName: function () { alert(this.name) } } //1. Attribute type: data attribute and access its attribute //1. Data attribute, there are 4 characteristics that describe its behavior //[Configurable]: indicates whether the attribute can be deleted to redefine the attribute, whether the attribute can be modified, or whether the attribute can be modified to the accessor attribute, the default value is true //[Enumerable]: indicates whether the attribute can be returned through for-in, the default value is true //[Writable]: indicates whether the attribute can be modified, the default value is true //[Value]: contains the data value of this attribute. The default value is undefined var person = { name: "xulei" } //A person object is created here, and the value value is "xulei" //To modify the default properties of the property, ECMAScript5's Object.defineProperty (the object where the property is located, the name of the property, the descriptor object) //The descriptor object must be configurable, enumerable, writable, value var peron = {} Object.defineProperty(peron, "name", { writable: false,//The property cannot be modified value: "Xu Lei-xulei" }); alert(peron.name);//Xu Lei-xulei peron.name = "Xu Lei"; alert(peron.name);//Xu Lei-xulei //The above operations will be ignored in non-strict mode. If an exception is thrown in strict mode//Once the attribute is defined as unconfigurable, it cannot be turned back into configurable. //In most cases, there is no need to utilize these advanced features provided by the Object.defineProperty() method. But it is very useful for understanding javascript. //Readers are advised not to use this method on ie8. //2. Accessing its properties has 4 characteristics //[Configurable]: indicates whether the attribute can be deleted to redefine the attribute, whether the attribute's characteristics can be modified, or whether the attribute can be modified to the accessor attribute, the default value is true //[Enumerable]: indicates whether the attribute can be returned through for-in, the default value is true //[Get]: The default value of the function called when reading is undefined //[Set]: The default value of the function called when writing the attribute Undefined var book={ _year:2004, edition:1 } Object.defineProperty(book,"year",{ get:function(){ return this._year; }, set:function(value){ if(value>2004){ this._year=value; this.edition +=value-2004; } } }); book.year=2005; alert(book.edition);//2 //Create an object//1. Treat the constructor as a function Person(name,age,job) { this.name=name; this.age=age; this.job=job; this.sayName=function(){ alert(this.name); } } //Use var person=new Person("xulei",23,"software"); person.sayName(); //Use Person("xulei2",23,"job2");//Add to window.sayName(); //Call var in the scope of another object o=new Object(); Person.call(o,"xulei3",23,"job3"); o.sayName(); </script>Let's have another paragraph:
<script type="text/javascript"> //1. Understand the prototype object//2. Prototype and in operator//3. Simpler prototype syntax//4. Dynamicity of the prototype//5. Native object prototype//6. Problems with the prototype object//1. Whenever a function is created, a prototype attribute will be created for the function based on a specific set of rules. This attribute points to the prototype object of the function// By default, all prototype objects will automatically obtain a constructor (constructor) attribute, which contains a pointer to the function where the prototype attribute is located//such as function Person(){ } //Person.prototype.constructor points to Person //After creating a custom constructor, its prototype object will only obtain the constructor attribute by default. As for other methods, they are inherited from Object.//When the call to create a new instance, the instance contains a pointer (internal property) to point to the prototype object of the constructor.//In Firefox, safari, and chrome, a property_proto_access var p1=new Person(); alert(Person.prototype.isPrototypeOf(p1)) alert(Object.getPrototypeOf(p1)==Person.prototype) //Although the value saved in the prototype can be accessed through the object instance, the value in the prototype cannot be rewrited through the object instance. If we add a property // to the instance and the name of the property is the same as the instance in the prototype, then we create the property in the instance, and the property will block the property in the prototype. eg: function Person() { } Person.prototype.name="amber"; Person.prototype.age=23; Person.prototype.job="software engineer"; Person.prototype.sayName=function(){ alert(this.name) } var person1=new Person(); var person2=new Person(); person1.name="amber.Xu"; alert(person1.name);//amber.xu --from instance alert(person2.name);//amber --from prototype delete person1.name; alert(person1.name);//amber --from the prototype//Use the hasOwnProperty() method to detect whether a property exists in the instance or in the prototype. This method (inherited from Object) //Return true function Person() { } Person.prototype.name="amber"; Person.prototype.age=23; Person.prototype.job="software engineer"; Person.prototype.sayName=function(){ alert(this.name) } var person1=new Person(); var person2=new Person(); alert(person1.hasOwnProperty("name"));//false From the instance alert(person2.hasOwnProperty("name"));//false From the instance person1.name="amber.xu"; alert(person1.name); alert(person1.hasOwnProperty("name"));//true From the instance delete person1.name; alert(person1.name); alert(person1.hasOwnProperty("name"));//false From the prototype//2. Prototype and in operator//in There are two ways to use it, one is used separately and in for-in. When used alone, the in operator returns true when the object can access a given property // No matter whether the property comes from the prototype or the instance function Person() { } Person.prototype.name="amber"; Person.prototype.age=23; Person.prototype.job="software engineer"; Person.prototype.sayName=function(){ alert(this.name) } var person1=new Person(); var person2=new Person(); alert("name" in person1);//true From the prototype alert("name" in person2);//true From the prototype alert("height" in person1);//false //This way you can encapsulate a function (whether the given property is the prototype for the given object) function hasPrototypeProperty(object,name){ return !object.hasOwnProperty(name) && (name in object); } alert("--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Returns all enumerable properties that can be accessed through objects, including both prototype and instance properties. //The instance attributes that block the non-enumerable attributes in the prototype (the attributes that mark Enumerable as false) will also be returned in for-in //Every versions of ie are always a bug: the instance attributes that block the non-enumerable attributes in the prototype will not be returned in for-in //eg: var o={ toString:function(){ return "my object"; } }; for(var prop in o){ if(prop=="toString"){ alert("found"); //There will not be displayed in the earlier versions of ie ie } } //To obtain all enumerable attributes on the object, you can use ECMAScript5's Object.keys() method. Accept an object as an argument, //A string array containing all enumerable properties function Person() { } Person.prototype.name="amber"; Person.prototype.age=23; Person.prototype.job="software engineer"; Person.prototype.sayName=function(){ alert(this.name) } var person1=new Person(); var person2=new Person(); var keys=Object.keys(Person.prototype); alert(keys) person1.name="amber.Xu"; person1.age=23; var keys=Object.keys(person1); alert(keys) alert("-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- name:"AMBER", age:23, job:"software", sayName:function(){ alert(this.name) } } //After writing this, the constructor attribute no longer points to the Person function, but to the Object constructor. //Although the correct result can be returned through the instanceof operator, the type of the object cannot be determined through the constructor. eg: var friend=new Person(); alert(friend instanceof Person)//true alert(friend instanceof Object)//true alert(friend.constructor==Person);//false alert(friend.constructor==Object);//true //If the constructor is really important to you, you can set it to the appropriate value as below function Person() { } Person.prototype={ constructor:Person, name:"AMBER", age:23, job:"software", sayName:function(){ alert(this.name) } } var friend=new Person(); alert("Manually set constructor----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //In this case, you can use Object.defineProperty(Person.prototype,"constructor",{ enumerable:false, value:Person }); //Dynamic nature of the prototype var friend=new Person(); Person.prototype.sayHi=function(){ alert("Hi"); } friend.sayHi();//Hi (normal execution) //Because there is a loose connection relationship between the instance and the prototype, the connection between the instance and the prototype is just a pointer, not a copy//When we call the sayHi() method, we will first search for a method named sayHi in the instance, and search for the prototype if it is not found. //However, if you rewrite the entire prototype object, then the situation will be different. //We know that when calling the constructor, a Prototype pointer to the original prototype will be added to the instance, and modifying the prototype to another object is equivalent to cutting off the connection between the constructor and the original prototype. //Remember: the pointer in the instance only points to the prototype, not to the constructor. eg: function A(){} var a1=new A(); A.prototype={ constructor:A, name:"AMBER", age:23, job:"software", sayName:function(){ alert(this.name) } } alert("ERROR------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Even all native reference types are created using this pattern. All native reference types // Method eg defined on the prototype of their constructor: alert(typeof Array.prototype.sort);//function alert(typeof String.prototype.substring);//function // Not only can you obtain references to the prototype of the native object, but you can also define new methods // Add a method to the String type String.prototype.startsWith=function(text){ return this.indexOf(text) == 0; }; var msg="Hello"; alert(msg.startsWith("H")); //We do not recommend doing this. alert("Prototype problem with prototype object"); //6. Prototype example function Ques() { } Ques.prototype={ constructor:Ques, name:"amber", age:23, job:"IT", friends:["Zhang San","Li Si"],//Reference type saysName:function(){ alert(this.name) } }; var q1=new Ques(); var q2=new Ques(); q1.friends.push("Wang Wu"); alert(q1.friends);// alert(q2.friends);// alert(q1.friends===q2.friends); //I believe everyone has seen the problem. When I created two instances q1 and q2, and when I added "Wang Wu" to "friends" of q1, q2's "friends" also had three "Wang San, Li Si, and Wang Wu // That's because the array exists on Ques.prototype, not on q1. So the above results appeared. // And it is this problem that we rarely see the reason why anyone uses prototype mode alone. </script>This article will end here. We will continue to discuss object-oriented programming of javascript in the future. I hope everyone can like it.