Js object-oriented learning-object concepts and creation objects
1. What is an object concept object? An object is a set of unordered attributes. Its Attributes can include basic values, objects, or functions ". That is, the unordered set of a group of name-value pairs. The attributes of an object (which cannot be accessed directly) include data attributes and accessors attributes. 1. The data attribute also contains retriable // indicates whether the data can be deleted through delete. The default value is true. Enumerable // indicates whether the property can be returned through the for-in loop. The default value is true; writable // indicates whether the attribute Value can be modified. The default Value is true. Value // contains the attribute data Value. The default Value is undefined. to modify the features of the default attribute, you must use the ECMAscript5 object. defineProperty (attribute object, attribute name, attribute feature to be modified) method. For example:
// 1. Modify the default attributes, var person = {}; Object. defineProperty (person, "name", {writable: false, value: "abc"}); alert (person. name); // abcperson. name = "bcd"; alert (person. name); // abc rather than bcd, which will be ignored in non-strict mode. In strict mode, an error will be reported. Once this setting is done, it cannot be modified again, otherwise, an error is reported.
// 1. Modify the default attributes, var person = {}; Object. defineProperty (person, "name", {writable: false, value: "abc"}); Object. defineProperty (person, "name", {writable: true ,});
Note that when calling Object. when using the defineProperty () method, if the (retriable, writable, Enumerable) parameter in the third parameter is not specified, that is, the attribute to be modified, the default value is false.
// 1. Modify the default attributes, var person = {}; person. sex = "nan"; Object. defineProperty (person, "name", {// here, we modify the value of name without specifying the attribute in the third parameter. The result is: // writable: false, value: "abc"}); alert (person. name); // abcperson. name = "bcd"; alert (person. name); // abc, which cannot be modified. The default value is falseperson. sex = "nv"; // defineProperty is not called. The default value is truealert (person. sex); // nv
2. accessors: Configurableenumerableget // The set function called when the attribute is read // The function called when the attribute is written
// 2. Define the accessors attribute var book = {_ year: 2014, edition: 1} Object. defineProperty (book, 'Year', {// year here defines the accessors property get: function () {return this. _ year ;}, set: function (value) {this. _ year = value; this. edition + = value-2004 ;}}); book. year = 2005; alert (book. edition); // 2
When you need to define multiple attributes, you can use defineProperties (object, attributes to be added );
// 3. Define multiple attributes var books ={}; Object. defineProperties (books, {_ year :{ value: 2004}, edition: {value: 1}, year: {get: function () {return this. _ year ;}, set: function (value) {this. _ year = value; this. edition + = value-2004 ;}}); // books. year = 2006; // alert (books. _ year); // This method cannot be used to assign values. Here, 2004var descriptor = Object is returned. getOwnPropertyDescriptor (books, "_ year"); descriptor. value = 2006; alert (descriptor. value); // 2006 // alert (typeof descriptor. get );
These concepts seem to be rarely used, but it is very useful to understand js objects. The basics are always necessary. Continue to learn ~ /* Certificate -------- * // * = ========================================================== = */(I found that the equal sign division line is not above the short bars division line) 2. A few days before creating an object, I saw this interview question. There are several methods for js to create an object. I only know three methods, but I don't know what the principle is. I sorted it out today. Factory mode constructor mode prototype Mode Combination use constructor mode and prototype mode 1. Factory Mode
// 4. Factory mode function createPerson (name) {var obj = new Object (); obj. name = name; obj. show = function () {alert (this. name);} return obj;} var person = createPerson ("ym"); // newperson is not required. show ();
2. constructor mode the name of the constructor starts with a large write, and all other functions are in lowercase.
// 5. constructor mode function Person (name, sex) {this. name = name; var sex = sex; // Private this. show = function () {alert (sex) ;}} var person1 = new Person ('ym', 'nan '); alert (person1.name); // ymalert (person1.sex ); // undefinedperson1.show (); // nan
Difference from the factory mode: it does not show that the created object is assigned to this object directly without the return statement constructor. The problem is that when the object has multiple instances, all the methods of these instances are different, because it is created once.
// 5. constructor mode function Person (name, sex) {this. name = name; var sex = sex; // Private this. show = function () {alert (sex) ;}} var person1 = new Person ('ym', 'nan '); var person2 = new Person ('alipay ', 'nv '); // alert (person1 instanceof Person); // truealert (person1.show = person2.show); // false
3. Advantages of prototype mode: allows all object instances to share the attributes and methods contained in it.
// 6. prototype mode function Person2 () {} Person2.prototype = {name: "ym", sex: 'nan ', show: function () {alert (this. name) ;}} var a = new Person2 (); var B = new Person2 (); alert (. show = B. show); // true
The understanding of prototype is also very important. After several days of study and arrangement, I have read it many times and I think it is not enough. Prototype is a pointer pointing to an object, which contains the attributes and Methods shared by all instances. That is to say, the prototype object of the object instance created by calling the constructor. Prototype problems:
// 6. prototype mode function Person2 () {} Person2.prototype = {name: "ym", sex: 'nan ', love: ['A',' B '], show: function () {alert (this. name) ;}} var a = new Person2 ();. love. push ('C'); var B = new Person2 ();. love. push ('D'); // alert (. show = B. show); alert (. love); // abcdalert (B. love); // abcd
4. Using the prototype and constructor modes in combination, we can see from the above examples that the constructor modes and creation methods are different and are owned by the instances themselves, the attributes and methods defined in the prototype mode are shared, so the use of them in combination is really perfect.
// 6. Mixed Mode function Perfect (name, sex) {this. name = name; this. sex = sex; this. love = ['A', 'B'];} Perfect. prototype = {constructor: Perfect, show: function () {alert (this. love) ;}} var a = new Perfect ('A', 'nan '); var B = new Perfect (' B ', 'nv');. love. push ('C'); B. love. push ('D');. show (); // abcb. show (); // abd
After finishing the process, I also understood that the three methods for creating objects are the first three points mentioned above, but the best method is 4th.