Initial understanding of JavaScript object-oriented _javascript techniques

Objective

Class-based objects: we all know that there is an obvious sign in object-oriented language, that is, the concept of class, we can create many objects with the same properties and methods through the class-like template. However, there is no concept of class in ECMAScript, and naturally it differs from objects in a class-based language.

Objects in JS: A collection of unordered attributes that can contain basic values, objects, and functions. That is, the object in JS is a set of values that have no particular order, each property or method of an object has its own name, and each name corresponds to a value.

Understanding objects

How objects are created

1 The easiest way to create an object is to create an instance of object and then add properties and methods to it.

For example

  var person = new Object ();
    Person.name= ' modest dragon ';
    person.sex= ' male ';
    Person.saynameandsex=function () {
      console.log (this.name,this.sex)
    }
    person.saynameandsex ();

2 Using object literal form

For example

  var person={
    name: ' Modest dragon ',
    Sex: ' Man ',
    saynameandsex:function () {
      console.log (this.name,this.sex)
    }
  }
   Person.saynameandsex (); Modest Dragon Man

Type of property

ECMAScript has two types of data properties: Data properties and accessor properties.

Data properties

The Data property contains the position of a data value. Values can be read and written at this location. There are four characteristics that describe their behavior.

1.[[configurable]]: Indicates whether the property can be redefined by deleting the attribute by delete ... The default value is True

2.[[enumerable]]: Indicates whether the property can be returned through a for in loop ... The default is True

3.[[writable]]: Indicates whether the value of the property can be modified ... The default is True

4.[[value]]: Represents the value of this property. Default is undefined

To modify property default attributes, you must use the ES5 Object.defineproperty () method, which receives three parameters: the object in which the property is located, the name of the property, and an object that describes the attribute attribute (configurable, enumerable, writable, value), set one or more of these values to modify the corresponding attributes

DEMO

var person={};
Object.defineproperty (person, ' name ', {
 configurable:false,//) indicates that the attribute is not allowed to be deleted through delete
 writable:false,//indicates that overrides are not allowed
 ennumerable:false,//indicates that you are not allowed to traverse value through for in
 : ' Modest dragon '//Set the value of the property in this object
} '
person.name= ' 2 '; try to reset the result does not take effect Delete
person.name;//attempt to delete results does not take effect for
(var attr in person) {
 console.log (person[attr]);/False
}
Console.log (person.name)/The modest dragon

Note: Setting configurable to false is not allowed to be modified again to true, and when the Object.defineproperty () method is invoked, configurable, ennumerable, Writable default value is False.

Accessor properties

Accessor properties do not contain data values, they contain a pair of getter, setter functions (but these two functions are not required) when reading accessor properties, the Getter function is called, which is responsible for returning valid values. When the accessor property is written, the setter function is invoked and the new value is passed in, which is responsible for handling the data.

Accessor properties have the following attributes

[[Configurable]] Indicates whether a property can be deleted by deleting it to define a new property

[[Enumerable]] Indicates whether the return property can be traversed through a for in loop

[[get]] The function that is invoked when the property is read, defaults to undefined

[[Set]] The function that is called when the function is written, the default value is undefined

Note: Accessor properties cannot be directly defined and must be defined by Object.defineproterty ()

DEMO

 var book={
 _year:2015,//The underscore here is a common notation that represents a property that can only be accessed by means of an object
 edition:1
}
object.defineproperty (book, ' Year ', {
 get:function () {
  return this._year;//That is, the value of Boot._year is returned by default when the value is obtained by Book.year
 },
 set: function (value) {//The default invocation of the method when setting the value on the Boot.year the data is processed
  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

Defining multiple properties

We can add multiple properties to an object by using the Object.defineproperties () method in ES5, which accepts two object arguments, the first parameter is the object whose properties you want to add and modify, and the property of the second object that corresponds to the property one by one that you want to add and modify in the first object.

DEMO

var book={};
Object.defineproperties (book,{
 _year:{
  value:2015,
  writable:true/Note This is set to True to "write" Default is False 
 },
 edition:{
  value:1,
  writable:true/Note This is set to True to "write" Default is False
 },
 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

Attributes that read object properties

Using the Object.getownpropertydescriptor () method in ES5, you can go to the descriptor of the given property.

The method receives two parameters: the object that contains the property and the name of the property to read the descriptor. Returns an object, and if it is a data property, the returned property has a configurable,enumerable,writable,value. If the accessor property is a property that returns a Configurable,enumerable,get,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
   }}
  }
)
Object traversal 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 ');//Accessor Property
showallproperties (descriptor);
Console.log (' ============================ ');
Showallproperties (DESCRIPTOR2);

The above about the preliminary understanding of JavaScript Object-oriented All content is introduced here, the following will give you an in-depth analysis of JS-oriented object of the common ways to create objects, interested friends continue to pay attention to OH.