object

What is the object

Object? What’s an object? Do you have an object? Who’s a serious programmer? You’re a serious programmer.

In my personal understanding, in fact, objects are the classification of functions and data, and the relevant data and functions are packaged as objects, so that we can conveniently manage the code.

And the official definition is that a specific thing is an object, so with that programming adage, everything is an object, so don’t say programmers don’t use objects, everything is a programmer’s object

let No={
    name: 'don't forget'.// These objects are called attributes
    faceValue:Look like a million dollars..haveGirl(){     // The functions inside an object are called methods
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}// a No object
Copy the code

The basic operation of the property

Add and delete properties

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue);
    }
}
No.study="Love"/ / add
console.log(No.study);/ / query
console.log(No['study']);/ / query
No.faceValue=Look like a million dollars.;/ / modify
delete No.study;/ / delete
Copy the code

Value and address

Objects are reference types, so objects store data in a way that you can think of as putting it in a place, and variable names store the address of that place

let first={ num:'32'}  //first is an address where num is stored
let second= first      // Copy the address of first into second
console.log(first);
console.log(second);
second.num=64			// Change num in second
console.log(first);		// The address of first and second points to the same location, so the num of first is changed
console.log(second);    
Copy the code

Object extension operation

An extension of an object is the same as an array, but expands the object

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}letNof={ ... No,/ /
    study:'to love'
}

console.log(Nof);
Copy the code

Object destructuring assignment

1. Basic use of deconstruction

   let No={
       name: 'don't forget'.faceValue:'high'.haveGirl(){
           console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}let {name, faceValue}=No
   console.log(name);
   Copy the code

2. Short for object assignment

   let name='don't forget'
   let faceValue='high'
   
   let No={name,faceValue}
   console.log(No);
   Copy the code

3. Multilayer deconstruction

   let No={
       name: 'don't forget'.faceValue:'high'.girlfriend: {first:'ice ice'
       },
       haveGirl(){
           console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}let {girlfriend:{first}}=No// It's ok to deconstruct only part of it
   console.log(first);
   Copy the code

4. Deconstructing defaults

   let No={name:'don't forget'.faceValue:'high'}
   let {name,faceValue,girlfriend='ice ice'}=No
   console.log(girlfriend);
   // Mostly used for default parameters
   Copy the code

5. Parameters of deconstruction

   function look(name,{age,faceValue}) {
      console.log(name,age,faceValue);
   }
   
   look('don't forget', {age:'18'.faceValue:'high'})
   Copy the code

Property detection on object and stereotype chains

let No= {name:'Joe'};

let Nof={father:'Joe's Dad'}

Object.setPrototypeOf(No,Nof)// Set Nof to the parent of No

console.log(No);
console.log(No.hasOwnProperty('father'));// Attributes on the prototype chain cannot be detected
console.log('father' in No);// Can be detected
Copy the code

Calculate attribute

let a=1
let No={}
No[`a-${a}`]=a
console.log(No);
Copy the code

The assign method

let a={name:'don't forget'}
let No={girlfriend:'ice ice'}

No=Object.assign(No,a)// Merge two objects
console.log(No);
Copy the code

Object traversal

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}console.log(Object.keys(No));// First, iterate over the attribute name

console.log(Object.values(No));// The second way is to iterate over the attribute value

console.log(Object.entries(No));// The third way is to iterate over the attribute name and value

for(const key in No){
    console.log(No[key]);
}

for (const iterator of Object.keys(No)) {
    console.log(iterator);
}

for (const iterator of Object.values(No)) {
    console.log(iterator);
}

for (const [key,value] of Object.entries(No)) {
    console.log(key);
}
Copy the code

Shallow copy, deep copy

Shallow copy

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}let Nof=Object.assign({},No)

let Nos={}
for (const key in No) {
   Nos[key]=No[key]
}

letNot={... No} No.faceValue='Above the sky'
console.log(Nof);
console.log(Nos);
console.log(Not);
Copy the code

Deep copy

let No={
    name: 'don't forget'.faceValue:'high'.girlfriend: {name: 'ice ice'.address: 'Beijing'
    },
    haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}function deepCopy(object) {
    let newObject={}
    for (const key in object) {
        newObject[key]= typeof object[key]==='object'? deepCopy(object[key]):object[key] }return newObject;
}

let Not=deepCopy(No)

No.girlfriend.name='Black Jia Jia'

console.log(Not);

Copy the code

Create an object

The factory pattern creates objects

function boy(name,age){
    return {
        name,
        age,
        isDog(){
            console.log(this.name+'this year'+this.age+'old'+'Still single.'); }}}let zhangsan=new boy('Joe'.'20')
let lisi=new boy('bill'.'23')
zhangsan.isDog()
lisi.isDog()
Copy the code

The constructor creates the object

function boy(name,age){
        this.name=name,
        this.age=age,
        this.isDog=function(){
            console.log(this.name+'this year'+this.age+'old'+'Still single.'); }}let zhangsan=new boy('Joe'.'20')
zhangsan.isDog()
Copy the code

Encapsulation and abstraction

function boy(name,age){
        data={name,age},
        this.isDog=function(){
            console.log(data.name+'this year'+data.age+'old'+'Still single.'); }}let zhangsan=new boy('Joe'.'20')
zhangsan.isDog()
Copy the code

Attribute characteristics of an object

Viewing Attributes

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}console.log(JSON.stringify(Object.getOwnPropertyDescriptor(No,'name'),null.2));
console.log(JSON.stringify(Object.getOwnPropertyDescriptors(No),null.2));

/ / {
// "value": "do not forget ", // value
// "writable": true,// writable, modifiable
// "enumerable": true
// "signals ": true, // the system can be reconfigured and deleted
// }
Copy the code

Setting attribute Characteristics

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}Object.defineProperty(No, 'name', {// Set a single
    value: 'memories'.writable: true.enumerable: true.configurable: true

})

Object.defineProperties(No,{// Set multiple values
    name: {value: 'memories'.writable: true.enumerable: true.configurable: true
    },
    faceValue: {value: ' '.writable: true.enumerable: true.configurable: true}})Copy the code

Adding attributes is not allowed

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}Object.preventExtensions(No)// Disallow adding attributes
Object.isExtensible(No)// Whether to add attributes
Copy the code

Closed objects: cannot add, delete, or modify object features

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}Object.seal(No)// Enclose the object
Object.isSealed(No)// Whether to enclose the object
Copy the code

Frozen object

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}Object.freeze(No)// Freeze the object
Object.isFrozen(No)// Whether to freeze the object
Copy the code

accessor

Basic usage

let No={
    name: 'don't forget'.data: {age:20},
    faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue);
    },
    set age(value) {// Triggered when data is modified
        if (value>18) {
            console.log('Come of age');
        } else{
           return console.log('Little brat');
        }
       this.data.age=value
    },
    get age() {// Search for data is triggered
      return  this.data.age
    }
}

No.age=12
console.log(No.age);
Copy the code

Fake properties

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue);
    },
    get girlfriend() {return 'Bing Bing, Black Jia Jia'}}console.log(No.girlfriend);
Copy the code

Accessor priority: The accessor has a higher priority

let No={
    name: 'don't forget'.faceValue:'high'.girlfriend:'ice ice'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue);
    },
    get girlfriend() {return 'Black Jia Jia'}}console.log(No.girlfriend);
Copy the code

The proxy agent

Basic usage

let No={
    name: 'don't forget'.faceValue:'high'.haveGirl(){
        console.log(this.name+'There's tons of girls because of his looks.'+this.faceValue); }}let proxy=new Proxy(No,{
    get(obj,property){
        return obj[property]
    },
    set(obj,property,value){
        obj[property]=value
    }
});

console.log(proxy.name);
proxy.name='memories'
console.log(proxy.name);
console.log(proxy);
Copy the code

Control function

function factorial(num) {
    return  num==1?1:num*factorial(num-1)}let proxy=new Proxy(factorial,{
    apply(func,obj,args){
        console.log(func);
        console.log(obj);
        console.log(args); }}); proxy.apply({a:1},5])
Copy the code