Detailed explanation of JavaScript setters and getters

This article mainly introduces the setter and getter methods of JavaScript in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

I have never used Javascript's setter and getter methods before when writing projects, so it is a concept that needs to be understood. Today I read this knowledge point in a book, and it is still vague. So I planned to study it;

The properties of a Javascript object are composed of a name, a value and a set of characteristics. So first, let’s take a look at the two properties of the object:

Data properties, which we often use, should be familiar with
Accessor properties, also called accessor properties

What are accessor properties? It is a set of functions that get and set values. In ECMAScript5, property values ​​can be set using one or two methods, the two methods are getters and setters; therefore, properties defined by getters and setters are called accessor properties.

var o = {
  get val(){
    /*函数体*/
    return ;
  },
  set val(n){
    /*函数体*/
  }
}

The above is the simplest way to define an accessor property. It can be seen that the getter and setter methods are actually functions that replace function.

var o = {
  a:3,
  get val(){
    return Math.pow(this.a,2);
  }
}

console.log(o.val);//9
o.val = 100;
console.log(o.val);//9

The getter method has no parameters and has a return value; when the getter method is set separately, it can only get the attribute value and cannot change its defined attribute value. The security of data is ensured;

var o = {
  a:3,
  set val(n){
    this.a = n;
  }
}

console.log(o.val);//undefined

The setter method has parameters and no return value; when the setter method is set separately, the attribute value cannot be read;

var o ={
  a:3,
  get val(){
    return Math.pow(this.a,n);
  },
  set val(n){
    this.a = Math.max(this.a,n);
  }
}

console.log(o.a);//3
console.log(o.val);//9
o.val = 10;
console.log(o.a);//10
console.log(o.val);//100

As can be seen from the above code, this refers to its object (that is, the "o" in the code);

var o ={
   a:3,
  get val(){
    return Math.pow(this.a,n);
  },
  set val(n){
    this.a = Math.max(this.a,n);
  }
}

o.val = 10;
var foo = Object.create(o);
console.log(foo.val);//10
foo.val = 9;
console.log(foo.val);//10

In addition, accessor properties can also be inherited;

Related recommendations:

Basic introduction to getters and setters in Javascript

Why is it bad to use getters and setters in JavaScript

Sample code sharing of getter/setter implementation in JavaScript

The above is the detailed content of Detailed explanation of JavaScript setters and getters. For more information, please follow other related articles on the PHP Chinese website!