The unhavectue of the Object.defineProperty () method in js

Cuisine: “Boss, that, what is the ghost?”

Suppose we have an object user; we have to add an attribute name, we will do this

VAR user = {}; user.name = “Running snail”; console.log (user); // {name: “Running snail”}
   
If you want to add a SAYHI method?

User.SAYHI = Function () {console.log (“hi!”)}; Console.log (user); // {name: “Running snail “, SAYHI: ƒN}

Object.DefineProperty
   
How to use Object.defineProperty?
Object.defineProperty requires three parameters (Object, PropName, Descriptor)

1 Object Object => Who adds 2 PropName Attribute Name => The name of the attribute [Type: String]

3 Descriptor Attribute Description => What is the characteristics of this property [Type: Object]

So
Descriptor

This is an object. Does he have those attributes? Don’t worry about us to say;

Since we can add attributes to an object, then we use it to do it to USERAdd Name attributes, code is such a


VAR user = {}; Object.defineProperty (user, “name”, {Value: “Running snail”}) Console .log (user); // {name: “Running snail”}

Value

attribute, he is Set attribute values.
Wait, can the attribute value can only be a string? What are our Number Function Object Boolean?
   VAR user = {}; Object.defineProperty (user, "name", {value: "Running snail"}) object.defineproperty (user, "isslow" , {value: true}) Object.defineProperty (user, "sayhi", {value: function () {console.log ("hi!")}}) Object.defineProperty (user, "agnge", {value: 12 }) Object.defineProperty (user, "birth", {value: {date: "2018-06-29", HOUR: "15:30"}}) console.log (user); 

The fact that the fact that any type of data is oh ~

The problem is coming again, if the user object already has a name attributeCan we change this value via Object.defineProperty?

Let’s try
   VAR user = {}; object.defineproperty (user, "name", {value: "Run snail "}) console.log (user); user.name =" new => rush snail "console.log (user); 

js中Object.defineProperty()方法的不详解 Huh? ? Why didn’t I change it? ?

Reason: There are many attributes on the upper side, except that the value attribute is Writable [As the name suggestibility can be re-assigned] Accept data type is Boolean (default is false) true => support Re-assind the value false => Read only


Oh, if I didn’t set the Writable value, I was only read by default, so I couldn’t change

, let’s see, set to true Can you change it?

VAR user = {}; Object.defineProperty (user, “name”, {value: “Running Snail”, Writable: True}) Console.log (User User.name = “New => Running Snail” Console.log (user);
   

This descriptor Are there other properties? ENUMERABLE [Whether as the name suggestibility can be enumerated] Accept data type is Boolean (default is false) true => support is enumerated FALSE =>Support

. . . enumerate? ? What does it mean?

Suppose we want to know which attributes of this User object we generally do

VAR user = {name: “Running Snail”, AGE: 25}; // es6var keys = Object.keys (user) Console.log (keys); // [‘name’, ‘agn’] // es5var keys = []; for (key in user) {keys.push (} console.log (keys); // [‘name’, ‘agn’]
   
What happens to define attributes if we use Object. Woolen cloth? Let’s look at the output

js中Object.defineProperty()方法的不详解
VAR user = {name: “Running Snail”, AGE: 25}; // Defines a gender can be enumerated Object.defineProperty User, “Gender”, {Value: “Men”, Enumerable: True} // Defines a birth date that cannot be enumerated Object.defineProperty (user, “birth”, {value: “1956-05-03”, ENUMERABLE: FALSE}) // es6var keys = Object.keys (user) Console.log (keys); // [“” “” “” agn “,” gender “] console.log (user); // {Name: “Running Snail”, AGE: 25, Gnder: “Men”, Birth: “1956-05-03”} console.log (user.birth); // 1956-05-03

Description

Clearly, we define as
enumerable = false to
 birth  out of the property has not been traversed, traversing => is actually enumerate (personal understanding of the matter, do not like do not spray oh)  
summary

Enumerable
attribute value of Boolean true | false
 the default value is  false , can be enumerated attribute is true; not vice versa. This setting does not affect the value of the call and view the properties of an object. 
the Configurable

is a property then we talk about, this property has two effects: 1 whether the property can be removed 2 characteristic properties in the first possibility is redefined after setting properties

var user = {name: “rush snail”, age: 25}; // define a gender can not be erased and re-define the characteristics of Object.defineProperty (user, “gender”, {value: “Male”, enumerable: true, configurable: false}) // delete it delete user.gender; console.log (user); // {name: “rush snail”, age: 25, gender: “M”} // redefine characteristics Object.defineProperty (user, “gender”, {value: “M”, enumerable: true, configurable: true }) // Uncaught TypeError: Cannot Redine Property: Gender // will report an error, as shown below is set to True

VAR User = {Name: “Running Snail”, AGE: 25}; // Defines a gender to be deleted and redefined with the characteristic Object.defineProperty (user, “gender”, {Value: “Men”, Enumerable: true, configury: true} // Delete before console.log (user); // {name: “Running Snail”, AGE: 25, Gnder: “Men”} // Delete DELETE User.gender; console.log (user); // {name: “Running Snail”, AGE: 25} // Redefined Features Object.defineProperty (user, “gender”, {value: “Men”, ENUMERABLE: True, configurable: false} // Delete before console.log (user); // {name: “Running Snail”, AGE: 25, Gender: “Male”} // Delete Delete Failure DELETE User.gender; Console.log (user); // {name: “Running Snail”, Age: 25, Gnder: “Men”}

Summary
Configurable
Set to True, the property can be deleted and redefined; the dependent is not possible to be deleted and redefined, the default value is false (ps.

In addition to setting features to newly defined attributes, you can set features to existing attributes.
)
 Finally, the most important attribute  set  And 
Get (ie accessor description: Define how the attribute is accessed), what is the two attributes do? We look at the code

js中Object.defineProperty()方法的不详解

VAR user = {name: “Running snail”}; var count = 12; // Define an AGE gets the value when it returns a definition Variable CountObject.defineProperty (user, “age”, {get: function () {return count;}}); // 12 // If I get count + 1 when I get it VAR user = {name: “Running snail”}; var count = 12; // Define a decomposition of the defined variable when the value is defined when the value is defined, and the value (User, “Age”, {Get: function () {return Count + 1;}}) Console.log (user.age); // 13

Next I don’t have to explain, you want to get this attribute What to do with you ~
, let’s see SET, not to say the code
   
VAR user = {name: ” Running snail “}; var count = 12; // Defines a defined variable countObject.defineProperty, {Get: function () {incount;}, set: function (newval) {count = newval;}}); // 12User.age = 145; console.log (user.age); // 145console.log (count) ; // 145 / / Wait, if I want to set it, it is automatically added. I set the 145 actual setting is 146var user = {name: “Running snail”}; var count = 12; // Define an AGE Get value Return to defined variable countObject.defineProperty (user, “agnge”, {Get : function () {return count;}, set: function (newval) {count = newval + 1;}}); // 12User.age = 145; console.log (user.age ); // 146

Note: Writable is not allowed when using a getter or setter method And Value two attributes (if used, will directly report the error) Get is a method of acquiring a value, the type is function

, acquisition When the value is called, it is not set when

undefined is the method of setting the value, the type is

function
, set The value will be called, undefined
   GET or SET does not have to appear, one can be written
VAR user = {name: “Running snail”}; var count = 12; // Returns a defined variable countObject.defineProperty when defining an AGE Get value User, “age”, {get: function () {console.log (“This person gets the value !!”); return count;}, set: function (newval) {console.log (“This person is set Value !! “); count = newval + 1;}}) console.log (user.age); // 12User.age = 145; console.log (user.age); // 146

 [End]   
Object.defineProperty method Directly define a new attribute directly, or modify an existing property, and return to this object

value: Set the value of the attribute
Writable: Does the value can be rewritten . True | False

ENUMERABLE: Can the target attribute can be enumerated. True | False configurable: Is the target attribute can be deleted or can be modified again TRUE | FALSE SET: Method for setting the value of the target property Get: Target Attribute How to get the value

Next, let's see how to use it to do a simple two-way binding Chapter => Handwritten a simple two-way binding with Object.defineProperty

The above is all the contents of this article, I hope that everyone will help, I hope everyone supports Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment