A preliminary understanding of javascript object-oriented_javascript skills

Foreword

Class-based objects: We all know that an obvious sign in object-oriented languages ​​is the concept of classes. Through classes, which are similar to templates, we can create many objects with the same properties and methods. However, there is no concept of classes in ECMAScript, so naturally it will be different from objects in class-based languages.

Objects in js: An unordered collection of attributes, which can include basic values, objects, and functions. That is, an object in js is a set of values ​​in no specific order. Each property or method of the object has its own name, and each name corresponds to a value.

Understanding object

How to create objects

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

For example

  var person = new Object();
    person.name='谦龙';
    person.sex='男';
    person.sayNameAndSex=function(){
      console.log(this.name,this.sex)
    }
    person.sayNameAndSex(); // 谦龙 男

2 Use object literal form

For example

  var person={
    name:'谦龙',
    sex:'男',
    sayNameAndSex:function(){
      console.log(this.name,this.sex)
    }
  }
   person.sayNameAndSex(); // 谦龙 男

Type of attribute

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

Data attributes

The data attribute contains the location of a data value. Values ​​can be read and written at this location. There are four properties that describe its behavior.

1.[[Configurable]]: Indicates whether the attribute can be redefined by deleting it through delete...The default value is true

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

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

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

To modify the default properties of a property, 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 describing the property properties (configurable, enumerable , writable, value), setting one or more of them can modify the corresponding characteristics

DEMO

var person={};
Object.defineProperty(person,'name',{
 configurable:false,//表示不允许通过delete删除属性
 writable:false,//表示不允许重写
 ennumerable:false,//表示不允许通过for in遍历
 value:'谦龙'//设置该对象中属性的值
})
person.name='谦龙2';//尝试重新设置 结果不生效
delete person.name;//尝试删除 结果不生效
for(var attr in person){
 console.log(person[attr]);// false
}
console.log(person.name);//谦龙

Note: After setting configurable to false, it is not allowed to be changed to true again. In addition, when calling the Object.defineProperty() method, the default values ​​of configurable, ennumerable, and writable are false.

Accessor properties

Accessor properties do not contain data values. They contain a pair of getter and setter functions (but these two functions are not necessary). When reading the accessor properties, the getter function will be called. This function is responsible for returning a valid When writing the accessor property, the setter function is called and the new value is passed in. This function is responsible for how to process the data.

Accessor properties have the following characteristics

[[configurable]] indicates whether attributes can be deleted through delete to define new attributes

[[enumerable]] indicates whether the returned attributes can be traversed through a for in loop

[[get]] Function called when reading properties, the default is undefined

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

Note: Accessor properties cannot be defined directly and must be defined through Object.defineProterty()

DEMO

 var book={
 _year:2015, //这里的下划线是常见的记号，表示只能通过对象的方法才能访问的属性
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
  return this._year; //即默认通过 book.year获取值的时候 返回的是 boot._year的值
 },
 set: function (value) {//在对 boot.year设置值的时候 默认调用的方法 对数据进行处理
  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 through the Object.defineProperties() method in ES5. This method accepts two object parameters. The first parameter is the object whose properties are to be added and modified, and the second parameter is The attributes correspond to the attributes to be added and modified in the first object.

DEMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true //注意这里设置成true 才可以 "写" 默认是false 
 },
 edition:{
  value:1,
  writable:true //注意这里设置成true 才可以 "写" 默认是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

Read properties of object properties

Using the Object.getOwnPropertyDescriptor() method in ES5, you can get the descriptor of a given property.

This method receives two parameters: the object where the attribute is located and the attribute name of the descriptor to be read. What is returned is an object. If it is a data attribute, the returned attributes are configurable, enumerable, writable, value. If it is an accessor attribute, the returned attributes are 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;
   }
  }
 }
})
//对象遍历函数
function showAllProperties(obj){
 for(var attr in obj){
  console.log(attr+':'+obj[attr]);
 }
}
var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//数据属性
var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//访问器属性
showAllProperties(descriptor);
console.log('============================');
showAllProperties(descriptor2);

That’s all the above introduction to the preliminary understanding of object-oriented JavaScript Pay attention.