Home >Web Front-end >JS Tutorial >JavaScript setter and getter methods

JavaScript setter and getter methods

小云云
小云云Original
2017-12-07 15:46:371433browse

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 saw this knowledge point in a book, but it was still vague, so I planned to Research and study;

The properties of a Javascript object are composed 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 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 actually replace A function of 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 returns a value; when the getter method is set separately, only the attribute value can be obtained. The defined attribute values ​​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 setting the setter method 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


As can be seen from the above code, Where 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


In addition, the accessor attribute can also be inherited.

Related recommendations:

Basic introduction to getters and setters in Javascript

##Sample code sharing of getter/setter implementation in JavaScript

Implemented the code of a PHP5 getter/setter base class_php skills

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn