JS Object-oriented learning-object concept and object creation

Text Address: JS Object-oriented learning notes

I. Concept of objects

What is the object? An object is a collection of unordered properties whose properties can include basic values, objects, or functions. That is, a set of unordered collections of name-value pairs.

The attributes of the object (not directly accessible), that is, the property contains two, data properties and accessor properties.

1. Data attributes also contain

• Configurable//Indicates whether delete can be deleted by default, true;
• Enumerable//Indicates whether the property can be returned through the for-in loop, which defaults to true;
• Writable//Indicates whether the value of the property can be modified by default to TRUE;
• Value//contains the data value of the property, default is undefined

To modify the attributes of a default property, you must use the ECMAscript5 Object.defineproperty (the property's object, the property's name, and the property attribute that needs to be modified) method. For example:

1. Modify the default attribute attribute, var person = {};object.defineproperty (person, "name", {writable:false,value: "abc"}); alert (person.name );  Abcperson.name = "BCD"; alert (person.name);  ABC, not BCD, is ignored in non-strict mode and will be error-critical in strict mode.

Once you've made such a setup, you can't change it again, or you'll get an error.

1. Modify the default attribute attribute, var person = {};object.defineproperty (person, "name", {writable:false,value: "abc"}); O Bject.defineproperty (person, "name", {writable:true,});

It is also important to note that when calling the Object.defineproperty () method, if you do not specify (configurable,writable,enumerable) in the third argument, that is, the property to be modified, Then they will default to False.

1, modify the default property attributes, var person = {};p erson.sex = "Nan"; Object.defineproperty (person, "name", {  ///Here we modify the value of name, Do not specify a property in the third argument, see Result//Writable:false,value: "abc"}); alert (person.name)  ; Abcperson.name = "BCD"; alert (person.name);  ABC, non-modifiable, default = Falseperson.sex = "NV";   No call to DefineProperty, default or Truealert (Person.sex);   Nv

　　

2. Accessor Properties

• Configurable
• Enumerable
• Get//function that is called when the property is read
• Set//function to be called when writing properties

2. Define the Accessor property var book = {_year:2014,edition:1}object.defineproperty (book, ' Year ', {     //year here is the definition accessor property get:functio N () {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 properties, you can use Defineproperties (the object, the property you want to add);

3. Define multiple attributes var books = {};object.defineproperties (books, {_year: {value:2004},edition: {value:1},year: {get:funct Ion () {return this._year;},set:function (value) {this._year = Value;this.edition + value-2004;}}); /books.year = 2006;//alert (books._year);   This method can not be used to assign a value, here return 2004var descriptor = object.getownpropertydescriptor (books, "_year");d escriptor.value = 2006; alert (descriptor.value);  2006//alert (typeof Descriptor.get);

These concepts seem to use less places, but to understand the JS object is very useful, basic, basic is always necessary, continue to learn ~

/*------------------------------------------------------------------------------------------------------------- --------------------------*/

/*==========================================================================*/

(I found that the equal sign line does not look good on the top of the split line)

Second, create the object

A few days ago to see such a question, JS to create the object of the method there are several, only know is 3 kinds of writing, not clear what the principle is, today finishing the next.

1. Factory mode
2. Constructor mode
3. Prototype mode
4. Combining the constructor pattern with the prototype pattern

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");//No need to use newperson.show ();

2. Constructor mode

The function name of the constructor begins with uppercase, and the other functions are 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

Differences from the factory model:

• Create object not displayed
• Direct assignment to the This object
• No return statement

Problems with constructors:

When an object has more than one instance, all of the methods of those instances are different because it is created again.

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 (' JH ', ' nv ');//alert (person1 instanceof person)   ; Truealert (person1.show = = person2.show);   False

　

3. Prototype mode

Pros: You can have all object instances share the properties and methods that it contains.

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 (a.show = = b.show)  ; True

About prototype, the understanding of it is also very important, after a few days to learn to organize, read many times, think or understand enough.

Prototype is a pointer to an object that contains the properties and methods shared by all instances, that is, the prototype object of the object instance that was created by invoking the constructor.

Problem with prototype mode:

6. Prototype mode function Person2 () {}person2.prototype = {name: "ym", Sex: ' Nan ', love: [' A ', ' B '],show:function () {alert (THIS.N AME);}} var a = new Person2 (), A.love.push (' C '), var b = new Person2 (); A.love.push (' d ');//alert (A.show = = b.show); alert (a.love); 
   //abcdalert (b.love);  Abcd

4. Combining prototype mode with constructor mode

From the above example, we can know that the constructor pattern, the method of creation is different, is the instance own, and the prototype schema definition of the properties and methods are shared, then the combination of use 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 '), A.love.push (' C '); B.love.push (' d '); A.show ();   Abcb.show ();//abd

Finally finishing, I also understand the original 3 ways to create the object is said above the first 3 points, but the best use is the 4th kind.

JS Object-oriented learning-object concept and object creation