A preliminary understanding of javascript object-oriented, a preliminary understanding of javascript

A preliminary understanding of javascript object-oriented, a preliminary understanding of javascript

Preface

Class-based objects: we all know that object-oriented languages have an obvious sign that they all have the concept of classes, you can create many objects with the same attributes and methods through the class-like template. However, ECMAScript does not have the concept of a class. Naturally, it is different from the objects in a class-based language.

Objects in js: unordered set of attributes, which can contain basic values, objects, and functions. That is, the objects in js are a group of values without specific sequence. Each attribute or method of an object has its own name, and each name corresponds to a value.

Understanding object

How to create an object

1. The simplest way to create an Object is to create an Object instance and then add attributes and methods to it.

For example

Var person = new Object (); person. name = 'qianlong '; person. sex = 'male'; person. sayNameAndSex = function () {console. log (this. name, this. sex)} person. sayNameAndSex (); // Qian Long male

2. Use the object literal form

For example

Var person = {name: 'qianlong ', sex: 'male', sayNameAndSex: function () {console. log (this. name, this. sex)} person. sayNameAndSex (); // Qian Long male

Attribute type

ECMAScript has two data attributes: data attributes and accessors attributes.

Data attributes

The location where the data attribute contains a data value. Values can be read and written at this location. There are four characteristics that describe their behaviors.

1. [[resumable]: indicates whether the attribute can be deleted through delete to redefine the attribute... the default value is true.

2. [[Enumerable]: indicates whether the attribute can be returned through the for in loop... the default value is true.

3. [[Writable]: indicates whether the attribute value can be modified... the default value is true.

4. [[Value]: indicates the Value of this attribute. The default Value is undefined.

To modify the default attributes, you must use the ES5 Object. defineProperty () method, which receives three parameters: the object where the property is located, the name of the property, and an object that describes the property characteristics (retriable, enumerable, writable, value ), you can set one or more values to modify the corresponding features.

DEMO

Var person = {}; Object. defineProperty (person, 'name', {resumable: false, // indicates that the delete operation is not allowed to delete the attribute writable: false, // indicates that ennumerable: false cannot be overwritten, // It indicates that the value: 'qianlong 'cannot be traversed through the for in statement. // you can specify the attribute value for this object.}) person. name = 'qianlong 2'; // the result of the attempt to reset does not take effect for delete person. name; // The deletion attempt does not take effect for (var attr in person) {console. log (person [attr]); // false} console. log (person. name); // Qian Long

NOTE: If resumable is set to false, it cannot be changed to true again. In addition, when the Object. defineProperty () method is called, the default values of resumable, ennumerable, and writable are false.

Accessors

Accessors do not contain data values. They contain a pair of getter and setter functions (but these two functions are not required). When reading the accessors, they call the getter function, this function is responsible for returning valid values. When writing the accessors attribute, it will call the setter function and pass in new values. How does this function process data.

The accessors attributes have the following features:

[[Resumable] indicates whether to delete a property to define a new property.

[[Enumerable] indicates whether the returned attributes can be traversed through the for in loop.

[[Get] the function called when reading the attribute. The default value is undefined.

[[Set] the function called when writing a function. The default value is undefined.

Note: The accessors attribute cannot be directly defined and must be defined through Object. defineProterty ().

DEMO

Var book = {_ year: 2015, // The underline here is a common mark, indicating the attribute edition: 1} Object that can only be accessed through the Object method. defineProperty (book, 'Year', {get: function () {return this. _ year; // The default value is book. boot is returned when the year value is obtained. _ year value}, set: function (value) {// on the boot. when the year value is set, the method called by default is used to process the data. var _ year = this. _ year; if (value> _ year) {this. _ year = value; this. edition + = value-_ year ;}}) book. year = 2016; console. log (book. year, book. edition); // 2016 2

Define multiple attributes

We can use the Object. the defineProperties () method adds multiple attributes to an object. This method accepts two object parameters. The first parameter is the object to add and modify its attributes, the second object corresponds to the attributes to be added and modified in the first object.

DEMO

Var book ={}; Object. defineProperties (book, {_ year: {value: 2015, writable: true // note that the default value "write" is false}, edition: {value: 1, writable: true // note that the default value "write" is false only if it is set to true. year: {get: function () {return this. _ year ;}, set: function (value) {var _ year = this. _ year; if (value> _ year) {this. _ year = value; this. edition + = value-_ year ;}}}) book. year = 2016; console. log (book. year, book. edition); // 2016 2

Features of reading Object Attributes

You can use the Object. getOwnPropertyDescriptor () method in es5.

This method receives two parameters: the object of the attribute and the name of the attribute to read the descriptor. An object is returned. For data attributes, the returned attributes include retriable, enumerable, writable, and value. For accessors, the returned attributes include retriable, enumerable, get, and set.

DEMO

Var book ={}; Object. defineProperties (book, {_ year: {value: 2015, writable: true}, edition: {value: 1, writable: true}, year: {get: function () {return this. _ year ;}, set: function (value) {var _ year = this. _ year; if (value> _ year) {this. _ year = value; this. edition + = value-_ year ;}}}) // The function showAllProperties (obj) {for (var attr in obj) {console. log (attr + ':' + obj [attr]);} var descriptor = Object. getOwnPropertyDescriptor (book, '_ year'); // data attribute var descriptor2 = Object. getOwnPropertyDescriptor (book, 'Year'); // accessors attributes showAllProperties (descriptor); console. log ('========================='); showAllProperties (descriptor2 );

All the above content about javascript object-oriented is introduced here. The following describes several methods for creating common javascript object-oriented objects, if you are interested, continue to pay attention to it.