The introduction

One hallmark of object-oriented (OO) languages is that they all have the concept of classes, from which you can create any number of objects with the same properties and methods. As mentioned earlier, ES has no concept of classes, so its objects are different from those in languages that have classes.

Understanding object

The easiest way to create a custom Object is to create an instance of Object and then add properties and methods to it

var person = new Object(a); person.name ='zs';
person.age = 23;
Copy the code

Early JS developers often used this pattern to create new objects, and later, object letters became the pattern for creating such objects.

var person = {
    name : 'zs'.age : 23.sayName : function () {
        console.log(this.name)
    }
}
Copy the code

Attribute types

There are two types of properties in ES: data properties and accessor properties

1. Data attributes

A data attribute contains the location of a data value. Values can be read and written from this location. Data attributes have four characteristics that describe behavior:

  • Different: Indicates that the property can be deleted via detele to redefine the property, modify the features of the property, and change the property to an accessor property. The default is true
  • Enumerable: Can return a property through a for-in loop. The default is true
  • Writable: indicates whether the value of an attribute can be modified. The default is true
  • Value: The data Value that contains this attribute, which defaults to undefined

To modify the default properties of a property, you must use ES5’s object.defineProperty () method.

var person = {};
Object.defineProperty(person, "name", {
    writable : false.value : 'zs'
})
console.log(person.name); // 'zs'
person.name = 'hw'
// Cannot be modified
console.log(person.name); // 'zs'
Copy the code

Set writable to false. The value of this property is not modifiable, and in non-strict mode, assignment is ignored; Under the strict model, an error is reported.

var person = {};
Object.defineProperty(person , 'name', {
    configurable : false.value : 'zs'
})
console.log(person.name)
delete person.name;
console.log(person.name)
Copy the code

Setting the signals to false disables the deletion of any property from the object. Once a property is defined as unconfigurable, it cannot be changed back to configurable. At this point, the Object.defineProperty() method is called to modify features other than writable

When calling the Object.defineProperty() method to create a new property, the default value of the 64x, Enumrable, and writable features is false if no additional property is specified

2. Accessor properties

Accessor properties do not contain data values; They contain a pair of getter and setter functions. Accessor properties have the following four properties:

  • Configuable: Redefines an attribute by deleting it through delete, and can modify its properties or change it to data properties. The default value is true
  • Enumerable: Returns a loop in for-in. The default is true
  • GET: The default value is undefined
  • SET: The default value is undefined

Defining multiple properties

Because it is possible to define multiple properties for an Object, ES5 also defines an object.defineProperties () method. Using this method, you can define multiple attributes at once through descriptors. This method takes two object arguments:

  • The first object is the object whose properties you want to add and modify
  • Properties of the second object and properties to add or modify in the first object

Read properties of properties

Use the ES5 Object. GetOwnPropertyDescriptor () method, can obtain the given property descriptors. This method takes two parameters: the object on which the property is located and the name of the property whose descriptor is to be read

var book = {};
Object.defineProperties(person, {
    _year : {
        writable : true.value : 2004
    },
    edition : {
        writable : true.value : 1
    },
    year : {
        get : function() {
            return this._year;
        },
        set : function(newValue) {
            if(newValue > 2004) {
                this._year = newValue;
                this.edition += newValue; }}}})var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
console.log(descriptor);
//{ value: 2004, writable: true, enumerable: false, configurable: false }
Copy the code

Create an object

Although Object constructors or Object letters can be used to create a single Object, there is a significant drawback to these approaches: creating many objects using the same interface creates a lot of duplicate code. To solve this problem, we can use a variation of the factory pattern.

The factory pattern

function createPerson(name , age ,job) {
    var o = new Object(a); o.name = name; o.age = age; o.job = job; o.sayName =function() {
        console.log(this.name)
    }
    return o;
}
Copy the code

Constructor pattern

Constructors in ES can be used to create objects of characteristic types. Like Object and Array. In addition, you can create custom constructors to define the properties and methods of an object type. Such as:

function Person(name , age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        console.log(this.name)
    }
}
var p1 = new Person('zs'.29.'sf');
Copy the code

Through the new operator. Calling the constructor in this way actually goes through the following four steps:

function mynew(Con , ... args) {
    var obj = {};
    obj.__proto__ = Con.prototype;
    let res = Con.apply(obj , args);
    return res instanceof Object ? res : obj;
}
Copy the code
  • Create a new object
  • Assigns the scope of the constructor to the new object
  • Code that executes the constructor value
  • Return a new object