current position：Home>Detailed explanation of JS front-end objects

const person = {
  name: 'why',
  age: 18,
  height: 1.88,
  //  This kind of needs to add '' Number 
  'my friend': {
    name: 'kobe',
    age: 30
  },
  run: function () {
    console.log('running');
  },
  eat: function () {
    console.log('eat foods');
  },
};

02. How objects are created

1 - Object literal

//  Directly assign curly braces , Most used 
const obj1 = {
   name: "why"
}

2 - Constructors

//  When a function is new When keyword is called , This function is called a constructor 
const obj = new Object()
obj.name = "star"
obj2.runing = function(){}

3 - Class creation

class Person {
  constructor(name) {
    this.name = name;
  }
}
const stu = new Person('star');

03 - Operations on objects

1 - Definition

const info = {
  name: "star",
  age: 18,
  friend: {
    name: "coder",
    age: 30
  },
  running: function() {
    console.log("running~")
  }
}

2 - Access object properties

console.log(info.name)
console.log(info.friend.name)
info.running()

3 - Modify object properties

info.age = 25
info.running = function() {
  alert("I am running~")
}
console.log(info.age)
info.running()

4 - Add object properties

info.height = 1.88
info.studying = function() {
  console.log("I am studying~")
}

5 - Delete object properties

delete info.age
delete info.height

Two 、 The square brackets of the object [] Usage

const obj = {
  name: "why",
  "my friend": "kobe",
  "eating something": function() {
    console.log("eating~")
  }
}

//  here  .  Grammar cannot be used 
console.log(obj["my friend"])

console.log(obj.name)
//  This sum  .  Grammar means 
console.log(obj["name"])

//  Use the value of a variable as the object's key
var eatKey = "eating something"
obj[eatKey]()

//  Can be used together 
obj["eating something"]()

3、 ... and 、 Object traversal

1. Ordinary for loop

// Object.keys() =>  Get all the objects key
const infoKeys = Object.keys(info)
for (let i = 0; i < infoKeys.length; i++) {
  //  Get key Value 
  let key = infoKeys[i]
  //  Get value Value 
  let value = info[key]
  console.log(`key: ${key}, value: ${value}`)
}

2 - for ... in ...

//  You can get the object directly key
for (let key in info) {
  let value = info[key]
  console.log(`key: ${key}, value: ${value}`)
}

3 - Follow up update slowly ～

Four 、 Object's memory allocation

js The code can run on browser , It can also run on node Environmental Science , Whatever the environment , Finally, they all run in In the memory

The memory is mapped to the physical memory of the real computer , So the more memory , The faster you run ～～～

Basic types : Stored in memory Stack memory
Reference type : Stored in memory Heap memory

1. Interview question one

const obj1 = {}
const obj2 = {}
console.log(obj1 === obj2) // false

2. Interview question two

const info = {
  name: "why",
  friend: {
    name: "kobe"
  }
}

const friend = info.friend
friend.name = "james"
console.log(info.friend.name) // james

3. Interview question three

function foo(a) {
  a = 200
}
const num = 100
foo(num)
console.log(num) // 100

4. Interview question 4

function foo(a) {
  a = {
    name: "star"
  }
}
const obj = {
  name: "obj"
}
foo(obj)
console.log(obj) //{ name:obj }

5. Interview question 5

function foo(a) {
  a.name = "star"
}

const obj = {
  name: "obj"
}
foo(obj)
console.log(obj) // {name : star}

5、 ... and 、 How to create a series of objects

1. Write one by one

A little stupid ～

const stu1 = {
  name: 'star',
  age: 16,
  height: 1.66,
  running: function () {
    console.log('running~');
  }
};
const stu2 = {
  name: 'coder',
  age: 17,
  height: 1.77,
  running: function () {
    console.log('running~');
  }
};
const stu3 = {
  name: 'liuli',
  age: 18,
  height: 1.88,
  running: function () {
    console.log('running~');
  }
};

2. adopt for Write in cycles

Still a little stupid ～

const nameArr = ['star', 'coder', 'liuli'];
const ageArr = [16, 17, 18];
const heightArr = [1.66, 1.77, 1.88];
const funcs = {
  running: function () {
    console.log('running~');
  }
};

for (let i = 0; i < nameArr.length; i++) {
  let stu = {
    name: nameArr[i],
    age: ageArr[i],
    height: heightArr[i],
    running: funcs.running
  };
  console.log(stu); //{name: 'star', age: 16, height: 1.66, running: ƒ} ...
}

3. Through the factory function

//  Factory function ( Factory production student object ) ->  A design pattern 
//  Through the factory design pattern ,  I have defined such a function by myself 
function createStudent(name, age, height) {
  const stu = {};
  stu.name = name;
  stu.age = age;
  stu.height = height;
  stu.running = function () {
    console.log('running~');
  };
  return stu;
}

const stu1 = createStudent('stare', 16, 1.66);
const stu2 = createStudent('coder', 17, 1.77);
const stu3 = createStudent('liuli', 18, 1.88);
console.log(stu1);
console.log(stu2);
console.log(stu3);

disadvantages : The types of data obtained are Object type

4. adopt new Operator to create

Simply understand the constructor

// JavaScript It has been provided to us by default, which can be more consistent with JavaScript Way of thinking ( Object oriented way of thinking ) A rule for creating objects 
//  In a function this Generally, it points to an object 
/*
   If a function is new Operator call 
    1. Create a new empty object 
    2. Of this object  __proto__  To the constructor  prototype
    3. Give Way this Point to this empty object 
    4. Execute the code block of the function body 
    5. If you do not explicitly return a non empty object ,  that this The object pointed to will be returned automatically 
*/
function Coder(name, age, height) {
  //   amount to new The operator does 
  //  let obj = {}
  //  this = obj
  this.name = name
  this.age = age
  this.height = height
  this.running = function() {
    console.log("running~")
  }
  // return this
}

//  Add... Before the function call  new  keyword ( The operator )
const stu1 = new coder("why", 18, 1.88)
const stu2 = new coder("kobe", 30, 1.98)
console.log(stu1, stu2)

6、 ... and 、 In subsequent updates ～

copyright notice
author[Xuan Yu Shang],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206240907421537.html