Learn more about Object.defineProperty

preface

The following are notes on MDN JS Object properties and Object.defineProperty()

JS object properties

How do I generate an object

• Object.create(null) produces a truly empty Object with nothing

• ES5 new Object() is equivalent to ES6 object.create (object.prototype)

• var d = {}

A literal means that {} looks like (an object), so it is a literal

object

A: 3 overwrites a: 1 in the following code

var obj = {
  a: 1.b: 2.a: 3
}
Copy the code

var a = 1
var b = 2
var object = {
  a: a,
  b: b
}
// Can be written as
var object = {a, b}
Copy the code

Dynamic property name

var name = 'a'
var object = { [name]: 1 } // { a: 1 } 
Copy the code

Custom operations for reading and writing properties

var o = {
  _age: 18.get age() {return o._age}, // When reading
  set age(value) {if(value<100){o._age = value}else{o._age = 100}} // When writing, customize the maximum
}

var i = 0 
Object.defineProperty(window.'a', {
  get(){
    i += 1
    return i
  }
})
a === 1 && a === 2 && a ===3  // true
Copy the code

Implement a shallow copy

var obj1 = {a:1.b:2.c:3}
var obj2 = {}

for(let key in obj1){
  obj2[key] = obj1[key]
}
// The above abbreviation for is
var obj2 = Object.assign({}, obj1)
// It can also be shortened to
varobj3 ={... obj1}var aa = 1
var aa = 2
varobj4 = {... obj1, ... obj2, ... obj3, aa, bb,get x() {return 'hi'}}
Copy the code

Changes to the prototype

__proto__ is used by the browser for its own use. Do not use A. __proto__ at any time (it is deprecated by the standards). ES6 requires object.getPrototype (a) to get its prototype

var a = {}
var b = {
  sayHi(){
    console.log('hi')
  }
}

a = Object.ceate(b) // Make associations between objects

a.__proto__ === b  // true, now b is the prototype of object A
b.__proto__ === Object.prototype // true
Copy the code

Object literal notation and JSON can be understood as the difference between JS objects and JSON objects

Object.defineProperty()

var newObject = {
  get x() {},set x(value){}
}

newObject.x  // Get when reading and set when writing
Copy the code

Suppose you have an old object and the properties are already written

var oldObject = {a: 1, b: 2}
Copy the code

I want to add a get set to it. DefineProperty () can only be added with Object.defineProperty()

Object.defineProperty(oldObject, 'x', {
  get(){
  // {} does nothing
    get x() {},set x(value) {}}})Copy the code

undefined

Is it a keyword?

If something is a keyword it can’t be declared

Through the above tests, it can be concluded thatundefinedNot a keyword

undefinedIs a variable

当 var undefined = 1When, thenundefinedWhat do I print out?

The printed version isundefined

Not to say thatundefinedIs it a variable??

Conclusion:undefined 是Read-only variable \

Read-only variable??

/ / constant
const a = 1
a = 2 // Get an error
Copy the code

故 undefinedIs not a constant

That’s the variable 给 undefinedAssign a value, but the value does not change

So pull it down and it’s aA variable whose value cannot be changed \

How do you make a variable immutable?

undefinedIn fact, iswindow.undefined Judging from the aboveundefinedIn fact, iswindowA read-only property of

How do I create a read-only property? \

var o = {
  get name() {return 'hone'}}Copy the code

It can also be written as the following example

How do you turn the unwritable into the writableHow to makewritableIs it impossible to change?

written

Object.defineProperty(o, 'engin', {writable: false.configurable: false})
Copy the code

Can be enumerated

Some properties are traversable (traversable is enumerable), and some properties are not

enumerable

enumerable: falseIs a non-enumerable objectFunction: When true, it is traversableUsing the following method, you can set a non-traversal key so that you can add some properties to the array without affecting the previous code

Object.definePropertys

var obj = {};
Object.defineProperties(obj, {
  a: {
    value: true.writable: true
  },
  b: {
    value: 'Hello'.writable: false
  }
  // A is writable, b is unwritable
})
Copy the code

Vue documents \

When you pass an ordinary JavaScript object into a Vue instance as the data option, Vue iterates through all of the object’s properties, And use Object.defineProperty to turn all of these properties into getters/setters. Object.defineproperty is a non-shim feature in ES5, which is why Vue does not support IE8 and earlier browsers.

Objects can be used withSymbolWhen the key

The key of an object is usually a string, and a Symbol may be used as the key when iterating

var s = Symbol(a)var o = {
  [s]: 1
}
Copy the code

To find whether an object has a Symbol key, use the following method

__propo__ cannot be used

MDN 🔗

Deprecated: This feature has been removed from the Web standards, and while some browsers still support it, it may be discontinued at some point in the future, so try not to use it.

For better support, it is recommended to use object.getPrototypeof () only.

Object. DefineProperty Is actually used

letObj = {last name:"High"The name:"Yuan yuan", get name () {return thisThe last name +this. Name; }, set name (XXX){this. Last name = XXX [0]
    this. Name = XXX. Slice (1)},// Unless you write age: 18 directly}; Obj. Name ='Gao Yuanyuan'

Copy the code

DefineProperty: The first argument to object.defineProperty is the Object you want to define, The second parameter is what you want to define

var _xxx = 0 
Object.defineProperty(obj, 'xxx', {  // We added a virtual property XXX to obj, which has get and set
  get(){  // get XXX
    return 0  // Returns 0 each time it is fetched
  }   
  set(x){  // Give me a new x every time I set it
       // Then assign this x to?? XXX does not exist, so we need to go to something to put XXX}})Copy the code

var _xxx = 0 
Object.defineProperty(obj, 'xxx', {  
  get(){  
    return _xxx  // If you want to get the XXX, return _xxx // if you want to get the XXX, return this. XXX will loop forever
  }   
  set(value){  
    _xxx = value
  }
})
Copy the code

If you want to add a new get set to an Object, you can do this via Object.defineProperty ⚠️ : In general, the get set property we define does not exist. Do not use the XXX property we define. It does not exist, so we need to use a global/local variable to put the value