JavaScript in the attributes: attribute data set and get accessor property

First, why would appear get and set

In programming languages, objects (Object) has the following characteristics:

1. The object has a unique identification of: even if two identical objects, it is not the same object. (Eg: console.log ({a: 1} == {a: 1}); >>> false)

2. The object has the state: the same objects have different states (member variables in c ++, Java in the property)

3. The object has behavior: state of the object may be (c ++ member function in, Java Methods) change

In JavaScript, unified state and behavior is abstracted as "property", because in the method js (function) is also in the form of the object can be abstracted in a way property.

var a = {
　　b: 1,
　　c: function(){
　　　　return 3
　　}
}

js allow the state to add an object at run time, and can add behavior. In order to improve the ability to abstract, js property is designed to become a more complex form, it offers two types of attributes mentioned getter / setter, as its data attributes and access properties. May be understood as a simple, getter is a method for obtaining attribute values, setter set a property value method.

• getter is responsible for querying the value, it does not take any parameters, setter is responsible for setting the value, the value in the form of arguments passed in his function body, everything is void of return
• get / set attribute accessor is not the object, but the characteristic properties, with only the internal characteristics only, so they can not directly access javaScript in order to show the internal characteristic values ​​in brackets represent the two teams as [[the Value] ]

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
                
    set name(name) {
        console.log("setter");
        this.name = name;
    }
                
    get name() {
        console.log("getter");
        return this.name;
    }
}

In the above example, we get used to retrieve a name value, get used to change the value of the name of the method.

Some people here will wonder, get the value, change the value, as long as the direct person.name and person.name = "other people" is not on it? The introduction of the get and set methods are not superfluous?

However, in the above case, to get the object properties by function, changing object properties, can be console.log to conduct property, that is, the function can be monitored by changes in the property, and directly. "" To get change attributes, just an act could not listening behavior.

Through the set and get property change listeners, this is precisely the basic idea Vue in two-way binding.

 

Two, VUE is get, set and two-way binding

In Vue project, we console.log Properties () of an object, you can see the results in the console:

Each object found in the properties in the following method has the following prototype chain definitions (__proto__):

 

You can see, the methods defined on the prototype chain has ES5 in __defineGetter__ and __defineSetter__, as well as get and set keywords ES6 introduced. When using object initialization procedure to define the Getter and Setter The only thing to do is in front of the getter plus "get", in front of the setter method plus "set". Another point to note is that getter method has no parameters, setter method must have one parameter, which is the new value of the property to be set.

var person = {
　　val: '名字',
　　get name() {return this.val;}, 
　　set name(name) {this.val = name;} 
} 

 

After the attribute of the object prototype of ES5 __defineGetter__ and __defineSetter__, has been used to define the object, the new object is bound to get and set methods:

var person = {
　　val: '名字'
}

person.__defineGetter__('name',function(){return this.val;});
person.__defineSetter__('name',function(name){this.val = name;})

console.log (person.name); >>> name 
person.name = 'new name';      
console.log (person.name); >>> new name