Javascript Object-Oriented Programming (1), javascript object-oriented

Javascript Object-Oriented Programming (1), javascript object-oriented

The description in the comment is very detailed, so there is not much nonsense here, and you can directly go to the Code:

<Script type = "text/javascript"> // The ECMA-262 defines an object as a collection of unordered attributes that can contain basic values, objects, or functions, the simplest way is to create an Object instance and add the property and method 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 project", sayName: function () {alert (this. name) }}// 1. attribute type: data attributes and access attributes // 1. Data attributes, with four descriptions Describe the behavior characteristics // [retriable]: indicates whether the attribute can be deleted through delete to redefine the attribute, whether the attribute can be modified, or whether the attribute can be changed to the accesser attribute, the default value is true // [Enumerable]: whether the attribute can be returned through for-in. The default value is true // [Writable]: whether the attribute can be modified, the default Value is true // [Value]: the data Value that contains this attribute. The default value is undefined var person = {name: "xulei"} // a person object is created here. The value is "xulei" // The default attribute to be modified, the Object of ECMAScript5 must be used. defineProperty (Object of the attribute, name of the attribute, descriptor Object) // the descriptor Object must be retriable, enumerable, writable, and value var peron = {} Object. defineProperty (peron, "name", {writable: false, // attribute 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 changed back to configurable. // In most cases, it is not necessary to use these advanced functions provided by the Object. defineProperty () method. But it is very useful for understanding javascript. // We recommend that you do not use this method on ie8. // 2. Access to its attributes has four features // [retriable]: Indicates whether to delete attributes to redefine attributes and modify attributes, or can you change the attribute to the accessor attribute? The default value is true // [Enumerable]: whether the returned attribute can be returned through for-in. The default value is true // [Get]: the default value of the function called during reading is undefined // [Set]: The default value of the function called during attribute writing is 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. Use the constructor as the 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 as the constructor. sayName (); // use Person ("xulei2", 23, "job2") as a common function; // Add it to window. sayName (); // call var o = new Object (); Person. call (o, "xulei3", 23, "job3"); o. sayName (); </script>

Next:

<Script type = "text/javascript"> // 1. Understand prototype objects // 2. Prototype And in operator // 3. Simpler prototype syntax // 4. Prototype dynamic // 5. Native object prototype // 6. Prototype Object Problems // 1. No matter what time, once a function is created, a prototype attribute is created for the function based on a specific set of rules, pointing 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 of the prototype attribute // such as function Person () {}// Person. prototype. constructor points to Person // after a user-defined constructor is created, its prototype object only obtains the constructor attribute by default, other methods are inherited from objects. // when a new instance is created by calling a function, the instance contains a pointer ((Partial attribute) refers to the prototype object of the constructor. // in Firefox, safari, and chrome, each object supports an attribute _ proto _ to access var p1 = new Person (); alert (Person. prototype. isPrototypeOf (p1) alert (Object. getPrototypeOf (p1) = Person. prototype) // although the value stored in the prototype can be accessed through the object instance, the value in the prototype cannot be overwritten through the object instance. If we add an attribute // to the instance and the name of this attribute is the same as that of the instance in the prototype, we create this attribute in the instance, this property will shield 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 prototype // use hasOwnPrope The rty () method can detect whether an attribute exists in the instance or in the prototype. This method (inherited from the Object) // only when the specified attribute exists in the Object instance, returns 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 instance alert (person2.hasOwnProperty ("name"); // false From instance person1.name = "amber. xu "; alert (person1.name); alert (person1.hasOwnProperty (" name "); // true from instance delete person1.name; alert (person1.name ); alert (person1.hasOwnProperty ("name"); // false comes from the prototype // 2. There are two ways to use the prototype and the in operator // in, one is used independently and in for-in. When used independently, the in operator returns true when the object can access a given attribute // no matter whether the attribute is 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 // You can encapsulate a function (Determines whether the property is the prototype of the given object.) function hasPrototypeProperty (object, name) {return! Object. hasOwnProperty (name) & (name in object);} alert ("----------------------------------"); alert (hasPrototypeProperty (person1, "name ")); // true person1.name = "James"; alert (hasPrototypeProperty (person1, "name ")); // false // all attributes that can be accessed and enumerated through objects are returned using for-in, which include both prototype attributes and instance attributes. // The instance property that does not allow enumeration in the prototype (marked Enumerable as false) is also returned in for-in. // there is always a bug in earlier versions of ie: instance properties that have blocked non-enumeration properties 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 "); // It is not displayed in earlier versions of ie} // to obtain all the enumerated attributes of an Object, you can use the ECMAScript5 Object. keys () method. Take an object as a parameter, // function Person () {} Person, a string array containing all the enumerated attributes. 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 (" --------------------------------------- ") // You can use alert (Object. getOwnPropertyNames (person1); alert (Object. getOwnPropertyNames (Person. prototype); alert ("simpler prototype syntax -------------------------------------------") // 3. Simpler prototype syntax: function Person () {} Person. prototype = {name: "AMBER", age: 23, job: "software", sayName: function () {alert (this. name) }}// after this write, the constructor attribute no longer points to the Person function, but Construct a function to an Object. // Although the correct results can be returned through the instanceof operator, the constructor cannot determine the object type. For example: 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: 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 -------------------------------------------") alert (friend. constructor = Person); // true // manually adding a constructor will convert the constructor into an enumerated element (native constructor attributes cannot be enumerated ). // In this case, you can use Object. defineProperty (Person. prototype, "constructor", {enumerable: false, value: Person}); // Dynamic var friend = new Person (); Person. prototype. sayHi = function () {alert ("Hi");} friend. sayHi (); // Hi (normal execution) // because the instance and the prototype are loosely connected, the connection between the instance and the prototype is just a pointer, instead of a copy // when we call the sayHi () method, we first search for the method named sayHi In the instance and search for the prototype if it is not found. // However, if the entire prototype object is rewritten, the situation is different. // We know that when calling the constructor, a Prototype pointer pointing to the original Prototype will be added to the instance, changing the prototype to another object is equivalent to breaking the relationship between the constructor and the original prototype. // Remember: the pointer in the instance only points to the prototype, not the constructor. Eg: function A () {} var a1 = new A ();. prototype = {constructor: A, name: "AMBER", age: 23, job: "software", sayName: function () {alert (this. name)} alert ("ERROR -----------------------------------"); alert (a1.sayName (); // we created an instance of A and then overwritten its prototype object, then an error occurred while calling a1.sayName, because the prototype to which a points does not contain the attributes/methods/native object prototype named after this name, the importance of the prototype is not only reflected in the creation of custom types. Even all native reference types are created in this mode. All native reference types // methods defined on the prototype of their constructor eg: alert (typeof Array. prototype. sort); // function alert (typeof String. prototype. substring); // function // not only can be obtained in the prototype of the native object although there are references to the default method, but can also define a new method // Add a startsWith () for the String type () string. prototype. startsWith = function (text) {return this. indexOf (text) = 0 ;}; var msg = "Hello"; alert (msg. startsWith ("H"); // we do not recommend this. Alert ("prototype Object Problems"); // 6. Prototype Object Problems instance function Ques () {} Ques. prototype = {constructor: Ques, name: "amber", age: 23, job: "IT", friends: ["Zhang San", "Li Si"], // reference type sayName: 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); // you can see the problem, when I created two instances q1 and q2 and added "Wang Wu" for q1's "friends, q2's "friend" also has three Michael Jacob, Li Si, and Wang Wu. // that's because The array exists on Ques. prototype, not q1. So the above result is displayed. // This is the problem. We rarely see why the prototype is used independently. </Script>

This article is here first, and we will continue to discuss javascript object-oriented programming later. I hope you will like it.