Shulou(Shulou.com)06/02 Report--

This article focuses on "what are the JavaScript object accessors?". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what JavaScript object accessors have.

The JavaScript accessor (Getter and Setter), ECMAScript 5 (2009) introduces Getter and Setters. Getters and setter allow you to define object accessors (Computed Properties).

JavaScript Getter (get keyword)

JsJavaScript Getters and Setters

Getters and setter allow you to get and set properties through methods.

This example uses the lang property to get the value of the language property.

/ / create a new object. Var person = {firstName: "John", lastName: "Doe", language: "en", get lang () {return this.language;}}; / / use getter to display data from objects: document.getElementById ("demo") [xss_clean] = person.lang

JavaScript Setter (set keyword)

JavaScript Getters and Setters JavaScript Getters and Setters

Getters and setter allow you to get and set properties through methods.

This example uses the lang property to set the value of the language property.

/ / Create an object: var person = {firstName: "John", lastName: "Doe", language: "NO", set lang (value) {this.language = value;}}; / / Set a property using set: person.lang = "en"; / / Display data from the object: document.getElementById ("demo") [xss_clean] = person.language

Use the JavaScript function or Getter?

What is the difference between the two examples?

Example 1:

Var person = {firstName: "John", lastName: "Doe", fullName: function () {return this.firstName + "" + this.lastName;}}; / / use the method to display the object's data: document.getElementById ("demo") [xss_clean] = person.fullName ()

Example 2:

Var person = {firstName: "John", lastName: "Doe", get fullName () {return this.firstName + "" + this.lastName;}}; / / use getter to display data from objects: document.getElementById ("demo") [xss_clean] = person.fullName

Example 1 accesses fullName as a function: person.fullName (). Example 2 accesses fullName as an attribute: person.fullName. The second example provides a simpler syntax.

Data quality

When using getter and setter, JavaScript ensures better data quality. Lang in this example, use the property language to return the value of the property in uppercase:

/ / create an object: var person = {firstName: "John", lastName: "Doe", language: "en", get lang () {return this.language.toUpperCase ();}}; / / use getter to display data from the object: document.getElementById ("demo") [xss_clean] = person.lang

Lang in this example, use this property to store uppercase values in the language attribute:

Var person = {firstName: "John", lastName: "Doe", language: ", set lang (lang) {this.language = lang.toUpperCase ();}}; / / use setter to set the object property: person.lang =" en "; / / display data from the object: document.getElementById (" demo ") [xss_clean] = person.language

Why use Getter and Setter?

● it provides a simpler syntax

● it allows the syntax of properties and methods to be the same

● ensures better data quality.

● is very useful in doing things behind the scenes.

Js JavaScript Getters and Setters

Create the opposite object perfectly:

Var obj = {counter: 0, get reset () {this.counter = 0;}, get increment () {this.counter++;}, get decrement () {this.counter--;}, set add (value) {this.counter+ = value }, set subtract (value) {this.counter-= value;}}; / / Play with the counter: obj.reset; obj.add = 5; obj.subtract = 1; obj.increment; obj.decrement; / / Display the counter: document.getElementById ("demo") [xss_clean] = obj.counter

Object.defineProperty ()

The Object.defineProperty () method can also be used to add Getters and Setter:

/ define object var obj = {counter: 0}; / define settersObject.defineProperty (obj, "reset", {get: function () {this.counter = 0;}}); Object.defineProperty (obj, "increment", {get: function () {this.counter++;}}); Object.defineProperty (obj, "decrement", {get: function () {this.counter--;}}) Object.defineProperty (obj, "add", {set: function (value) {this.counter + = value;}}); Object.defineProperty (obj, "subtract", {set: function (value) {this.counter-= value;}}); / / Play with the counter:obj.reset;obj.add = 5transferobj.subtract = 1mitobj.incrementtobj.decrement

Browser support

Getters and Setter are not supported in Internet Explorer 8 or earlier:

9.0 + support

At this point, I believe you have a deeper understanding of "what JavaScript object accessors have". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.