Steps to implement:
1. Read and change of monitor object properties
The () method will directly define a new property on the object, or an existing property and return this property
The syntax is (obj, prop, description)
obj: target object
prop: The name of the attribute that needs to be defined or modified
description: Descriptor of the attribute to be defined or modified
describe:
This method accurately adds or modifys the properties of the object. The properties we add are enumerable properties (()/ for...in)
The existence inside an object is the form of attribute description existence:
Data descriptor: Have a property that can be written or not written (equivalent to password)
Access descriptor: attributes (methods) described by a pair of getter-setter function functions
Note: The **descriptor** must be one of two forms, and cannot be both at the same time.
Both the data descriptor and the access descriptor have the following optional key values:
: The attribute descriptor can be changed and deleted if and only if the configurable of the attribute is true. Default is false
: This property can appear in the enumerable property of the object if and only if the enumerable of the property is true. Default is false
Data descriptor:
: The value corresponding to this property. Can be any valid JavaScript value (numeric, object, function, etc.). The default is undefined.
: The property can be changed by the assignment operator if and only if the writable of the property is true. Default is false.
The access descriptor also has the following optional key values:
: A method that provides a getter to the property, undefined if there is no getter. The return value of this method is used as the attribute value. The default is undefined.
: A method that provides a setter to the property, undefined if there is no setter. This method will accept a unique parameter and assign the new value of the parameter to the property. The default is undefined.
Example:
Create attributes
var o = {};
(o, "a", {value : 37,
writable : true,
enumerable : true,
configurable : true});
();
(o, "b", {get : function(){ /*( bValue)*/ return value },
set : function(newValue){ bValue = newValue; },
enumerable : true,
configurable : true});
= 38;
Modify properties
When property attribute writable is set to false, it means non-writable and the attribute cannot be modified.
var o = {}; // Create a new object
(o, "a", { value : 37,
writable : false });
(); // Print 37 = 25; // No error throwing (it will be thrown in strict mode, even if there is already the same value before)(); // Print 37, assignment does not work.
General setters and getters
var pattern = {
get: function () {
return 'I alway return this string,whatever you have assigned';
},
set: function () {
= 'this is my name string';
}
};
function TestDefineSetAndGet() {
(this, 'myproperty', pattern);
}
var instance = new TestDefineSetAndGet();
= 'test';
// 'I alway return this string,whatever you have assigned'
();
// 'this is my name string'
();
Solve the problem
function Observer(property) {
= {};
(data);
}
= function(obj) {
var val = null;
for (key in obj) {
if((key)) {
val = obj[val];
if(typeof val === 'object' && !!val) {
new Observer(val);
}
(key, val);
}
}
}
= function(key, val) {
(, key, {
enumerable: true,
configurable: true,
get: function () {
('You visited' + key);
return val
},
set: function (newVal) {
('You set it' + key);
('New' + key + ' = ' + newVal)
if (newVal === val) return;
val = newVal
}
})
}
let app1 = new Observer({
name: 'youngwind',
age: 25
});
let app2 = new Observer({
university: 'bupt',
major: 'computer'
});
// The result to be achieved is as follows: // You visited name = 100; // You have set the age, the new value is 100 // You visited university = 'science' // You set the major, the new value is science
Multi-level objects
When the incoming object is
let app1 = new Observer({
user: {
name: "liangshaofeng",
age: "24"
},
address: {
city: "beijing"
}
});
Recursively solve the problem! !
function Observer(data) {
= data;
();
}
= function(obj) {
var val = null;
for (key in obj) {
if((key)) {
val = obj[key];
if(typeof val === 'object' && !!val) {
new Observer(val);
}
(key, val);
}
}
}
= function(key, val) {
(, key, {
enumerable: true,
configurable: true,
get: function () {
('You visited' + key);
return val
},
set: function (newVal) {
('You set it' + key);
('New' + key + ' = ' + newVal)
if (newVal === val) return;
val = newVal
}
})
}
let app1 = new Observer({
user: {
name: "liangshaofeng",
age: "24"
},
address: {
city: "beijing"
}
});
// You visited name = 100; // You have set the age, the new value is 100
Add event system
// Event systemfunction Event() {
= {};
}
= function(attr, val, newVal) {
[attr] && [attr].forEach(function(item){
item(val, newVal)
})
}
= function(attr, callback){
if([attr]){
[attr].push(callback);
}else{
[attr] = [callback];
}
}
function Observer(data) {
= data;
();
= new Event();
}
= function(obj) {
var val = null;
for (key in obj) {
if((key)) {
val = obj[key];
if(typeof val === 'object' && !!val) {
new Observer(val);
}
(key, val);
}
}
}
= function(key, val) {
var self = this;
(, key, {
enumerable: true,
configurable: true,
get: function () {
('You visited' + key);
return val
},
set: function (newVal) {
if (typeof newVal === 'object' && !!newVal) {
new Observer(newVal);
}
('You set it' + key);
('New' + key + ' = ' + newVal)
(key, val, newVal);
if (newVal === val) return;
val = newVal
}
})
}
.$watch = function(attr, callback){
(attr, callback);
}
let app1 = new Observer({
user: {
name: "liangshaofeng",
age: "24"
},
address: {
city: "beijing"
}
});
// You visited name = 100; // You have set the age, the new value is 100
= {
lastName: 'liang',
firstName: 'shaofeng'
};
;
// There is also an output here 'You have accessed lastName' = 'lalala';
// Here you need to output 'You set firstName, the new value is lalala' var app1 = new Observer({
name: 'liujianhuan',
age: 25,
company: 'Qihoo 360',
address: 'Chaoyang, Beijing'
})
app1.$watch('age', function(oldVal, newVal){
(`My age has changed，It turns out to be: ${oldVal}age，Now it's：${newVal}age了`)
})
app1.$watch('age', function(oldVal, newVal){
(`My age has really changed，He's actually young${oldVal - newVal}age`)
})
= 20;
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.