How to use setter and getter methods in JavaScript

This article mainly introduces the setter and getter methods of JavaScript in detail, which has certain reference value. Interested friends can refer to it

I have never used it before when writing projects. The setter and getter methods of Javascript are a concept that needs to be understood. Today I saw this knowledge point in a book, but it was still vague, so I decided to study it;

Properties of Javascript objects It consists of a name, a value and a set of properties. 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 is storage Getter attribute? 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 attribute. It can be seen that the getter and setter methods are actually functions that replace functions.

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, only the attribute value can be obtained, and the defined attribute value cannot be changed, ensuring data security;

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 alone, 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

It can be seen from the above code that this refers to Its object (i.e. "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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About how Vue.js implements infinite scrolling loading

Chrome Firefox comes with debugging tools (detailed tutorial)

How to write Ajax request function using JS

How to build vue using vue-cli webpack

The above is the detailed content of How to use setter and getter methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!