Of Stack

Preliminary understanding of javascript object orientation

  • 2020-10-23 20:52:04
  • OfStack

preface

Class-based objects: We all know that one of the defining features of object-oriented languages is the concept of classes, which are templates that allow us to create many objects with the same properties and methods. However, there is no concept of a class in ECMAScript, and naturally it differs from objects in class-based languages.

Objects in js: An unordered collection of properties that can contain base values, objects, and functions. That is, the object in js is a set of values in no particular order. Each attribute or method of the object has its own name, and each name corresponds to one value.

Understanding object

How to create an object

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(); //  Modest dragon   male

2 Use object literal form

For example, 


  var person={
    name:' Modest dragon ',
    sex:' male ',
    sayNameAndSex:function(){
      console.log(this.name,this.sex)
    }
  }
   person.sayNameAndSex(); //  Modest dragon   male

Type of attribute

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

Data attributes

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

1.[[Configurable]]: indicates whether attributes can be deleted by delete to redefine attributes... The default is true

2.[[Enumerable]]: indicates whether a property can be returned through the 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 attribute. The default is undefined

To change the default property of a property, you must use ES5's Object.defineProperty () method, which takes three parameters: the object where the property is located, the name of the property, and an object that describes the property (configurable, enumerable, writable, value). Setting one or more of these values modifies the property

DEMO 


var person={};
Object.defineProperty(person,'name',{
 configurable:false,// Not allowed to pass delete Delete the properties 
 writable:false,// Indicates that overrides are not allowed 
 ennumerable:false,// Not allowed to pass for in traverse 
 value:' Modest dragon '// Sets the value of the property in the object 
})
person.name=' Modest dragon 2';// Try to reset   The result is invalid 
delete person.name;// Try to delete   The result is invalid 
for(var attr in person){
 console.log(person[attr]);// false
}
console.log(person.name);// Modest dragon

Note: Setting configurable to false is not allowed to be modified to true again. In addition, when calling Object.defineProperty (), configurable, ennumerable and writable default to false.

Accessor properties

Accessor property does not contain data values, they contain 1 getter, setter function (but this function is not required) when read accessor property will call getter function, this function is responsible for the return values of effective, when write accessor property will call setter function and introduced to the new value, the function is responsible for how to handle the data.

The accessor property has the following properties

[[configurable]] indicates whether a new attribute can be defined by deleting the attribute via delete

[[enumerable]] indicates whether the return property can be traversed through the for in loop

[[get]], which is called when the property is read, defaults to undefined

[[set]] a function that is called when a function is written. The default value is undefined

Note: Accessor attributes cannot be defined directly and must be defined through ES106en.defineProterty ()

DEMO 


 var book={
 _year:2015, // The underscore here is a common notation for properties that can only be accessed through an object's methods 
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
  return this._year; // Pass by default  book.year When you get the value   Returns the  boot._year The value of the 
 },
 set: function (value) {// In the  boot.year When you set the value   The method called by default   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 add multiple properties to an object by using the Object.defineProperties () method in ES5, which takes two object parameters, the first being the object to add and modify its properties, and the second corresponding to the property 11 to be added and modified in the first object.

DEMO 


var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true // Notice that this is set to true  Can only be  " write "  The default is false 
 },
 edition:{
  value:1,
  writable:true // Notice that this is set to true  Can only be  " write "  The 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

Properties that read object properties

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

This method takes two arguments: the object in which the property is located and the name of the property to read the descriptor. Returns an object, if it is a data attribute, it returns the attributes have configurable, enumerable, writable, value. If the visitor returns of attribute 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 
function showAllProperties(obj){
 for(var attr in obj){
  console.log(attr+':'+obj[attr]);
 }
}
var descriptor= Object.getOwnPropertyDescriptor(book,'_year');// Data attributes 
var descriptor2= Object.getOwnPropertyDescriptor(book,'year');// Accessor properties 
showAllProperties(descriptor);
console.log('============================');
showAllProperties(descriptor2);

Above on the preliminary understanding of javascript object oriented all the content is introduced here, the following will give you an in-depth analysis of js object oriented detailed explanation of several common ways to create objects, interested friends continue to pay attention to oh.

Related articles: