current position:Home>Do you believe what Lao Shi said about everything| Re learn JS

Do you believe what Lao Shi said about everything| Re learn JS

2021-08-27 05:45:00 git-Dignity

Preface

  • Online music Poke me !
  • Music Blog source code Online !
  • I have been bumping in the front-end field for more than two years , Want to see Vue Source code , I don't know if there are any ape friends who want to see the source code recently , If JS Not hard enough , Suggest coming with me Relearning JS, I believe I can see the source code after learning again , You can do more with less .
  • So let's see JS Of data 、 Variable 、 Memory What knowledge points can be tested .

interviewer : What is your biggest weakness ?
To be straitened for money !
You're hired !
This new skill i get here we are , Next time you can try .

Let's answer : Everything is object ?

In College , As soon as Lao Shi came up, he said to all the single dogs present : Everything is object .

I was very surprised and said : How to have objects ?

new come out .

Young and ignorant , Today is not what it used to be , So is it really right that everything is an object ?

Through the previous article Interviewer of data type (0101) We learned that , Data is divided into basic types and reference types , So do basic types also belong to objects ?

Obviously not , So I want to say Everything is data That's right !!!

First ask yourself three interview questions

var a = xxx, a What is stored in memory ?

stay JS When a function is called and a variable parameter is passed , Value passing or reference passing ?

JS How the engine manages memory ?

If so , The interviewer is not your opponent at all .
If not , Let's first understand the data 、 Memory 、 Triangular relationships between variables .
Only know the principle behind the problem , Problem solving must be handy .

Data data , So what is data ?

Concept

Stored in memory to represent specific information ' Information ', It's essentially 0101...

characteristic

Transitivity 、 Computability .

The goal of all operations in memory is : data

  • data
    • Arithmetic operations
    • Logical operations
    • assignment
    • Operation function

All the above operations will produce data .

Memory : Memory module for soul fighting ?

 Memory module .png

Whether memory and memory module can be associated ?

Concept

The space that can store data after the memory module is powered on ( temporary )

Memory life cycle

Memory module - Circuit board __
Electrify __
Generate memory space __
Store the data __
Processing data __
power failure __
Memory space and data disappear __

Memory space and data disappear , How did the data disappear ?

There's no space , The data naturally disappears . Because data is in space .

Like the big bang , We can still exist , Has it been undefined 了 .

There is... On a small memory 2 Type of data

  • Data stored internally
  • Address values

Touch your knowledge blind spot ?

No big problem , Take a picture .

1.  Stack stack .png

Now from the stack , Create a new var a = obj, Then I will obj Allocate more memory to a Do you ?

No, it isn't , Yes, it will obj Copy the address value of to a.

So it corresponds to the above

  • Data stored internally -- The corresponding is obj
  • Address values -- obj Corresponding 0X123

There are two kinds of memory

  • Stack : Global variables / local variable
  • Pile up : object
function fn(){
    // obj It's a local variable , It's also a stack 
    // { name }  This object is heap space 
    var obj = { name: ' Acridine ' }
}
 Copy code 

The function is on the heap , The function name is on the stack .

Balala becomes , What is a variable ?

seeing the name of a thing one thinks of its function , Variable quantity , It consists of variable name and variable value .

Each variable corresponds to a small piece of memory , The variable name is used to find the corresponding memory , Variable values are data stored in memory .

data 、 Memory 、 Variable love triangle ?

Memory the space used to store data .

Variable is the identifier of memory .

3.  data 、 Memory 、  Variable love triangle .png

I believe you can see the data here 、 Memory 、 We have a certain understanding of the three concepts of variables .

interviewer : Make a question to warm you up ~

var obj1 = { name: ' azeri ' }

var obj2 = obj1

 Excuse me, :obj2 What is preserved ,obj1 Is your address value ?

NO ~ NO ~ NO ~

obj2 What is kept is obj1 Memory content of , But this memory content happens to be the address value ;
 But you can't just say : What is saved is the address value .
 Copy code 

interviewer : What does the following program output ?99% All people do wrong , If you don't believe it, you can cover the answer ^_^

  var a = {age: 12}
  var b = a
  a = {name: 'BOB', age: 13}
  b.age = 14
  console.log(b.age, a.name, a.age) 

  function fn2 (obj) {
    obj = {age: 15}
  }
  fn2(a)

  console.log(a.age)
 Copy code 

Think of the answer , Output to the browser , The answer naturally surfaced ( See if it's right with your answer ^_^)

On the assignment of reference variables

Understand the test sites mined by the above program , In fact, it is the problem of reference variable assignment .

There are two small points , firstly :

(n)2 Two reference variables point to the same object , Modify the internal data of the object through a variable , Another variable sees the modified data

Let's translate the above words through the program .

  var obj1 = {name: 'Tom'}
  var obj2 = obj1
  obj2.age = 12
  console.log(obj1.age)  // 12
  function fn (obj) {
    obj.name = 'A'
  }
  fn(obj1)
  console.log(obj2.name) //A
  
  // obj1、obj2 Two or more reference variables point to the same object ({name: 'Tom'});
  //  adopt obj2.age = 12 Modify object data , that obj1 Naturally, you can see the modified data .
 Copy code 

second :(n)2 Two reference variables point to the same object , Let one of the reference variables point to another object , Another reference variable still points to the previous object

Again , Let's translate the above words through the program .( In fact, it's the programming output problem above )

  var a = {age: 12}
  var b = a
  a = {name: 'BOB', age: 13}
  b.age = 14
  console.log(b.age, a.name, a.age)  // 14 Bob 13
  
  // a、b this 2 Two reference variables point to the same object ({age: 12}),
  //  Give Way a Reassign {name: 'BOB', age: 13}, here b It still points to the original {age: 12}
  //  Now? a、b It points to two objects , because a Reassign .

  function fn2 (obj) {
    obj = {age: 15}
  }
  fn2(a)

  console.log(a.age) // 13
  
  //  Should be the last output , Many people's answer is 15 Well , Why not 15 Well ?
  //  Because it's in fn2 Reassign values within the scope of the function , This assignment is local ,
  //  once fn2() Function execution finished , The function itself is released , that { age: 15 } Just go up in smoke 
  //  So the final execution , Print a.age still 13.
 Copy code 

Function execution complete , The local variables in the function will be released .

reflection :fn2() And the example mentioned above fn() difference

This and the above fn() Not the same. ,fn() Is in the obj.name Not the same. , It's a point chain operation , Or change the same object .

fn() Is to modify properties , Act in the global environment ;

and fn2() Is to change the value of the reference object , Acting in a local environment .

Still ignorant , The last picture helps you to be clearer ~ If you look carefully, , You'll really understand !

2.  Reference variable assignment programming question answer .png

Let's finish , Announce the three interview questions for the next article .

interviewer :var a = xxx, a What is stored in memory ?

  • xxx, If it's basic data , This is the data

  • xxx, If it's an object , Save the address value of the object

  • xxx, If it's a variable , The saved xxx Memory content of ( Maybe basic data , It could also be the address value )

interviewer : stay JS When a function is called and a variable parameter is passed , Value passing or reference passing ?

Come up and tell the interviewer : It could be value passing , It may also be reference passing .

The interviewer silently looked at the answer in his hand , This guy is so cute , There are options that are not in the answer .

When the interviewer tried to spray you , You said slowly :

  • understand 1: It's all worth it ( basic / Address values ) Pass on

  • understand 2: It could be value passing , It could also be reference passing ( Address values )

interviewer : How to say this? ?

Take out a portable pen from your chest , Write the reason for the answer

var a = 3
function fn(a){
    a = a + 1
}

fn(a)
console.log(a) // 4

//  The above is value passing 


function fn2(obj){
    console.log(obj.name)  // ' azeri ' 
}

var obj = { name: ' azeri ' }
fn2(obj)  //  It's the content , This content happens to be the address value 

//  The above is reference passing 

 Copy code 

therefore , In fact, both answers are right , See how we understand reference passing , It can be said to be the address value .

Address value is also a kind of value transfer .

interviewer :JS How the engine manages memory ?

  • Memory life cycle
    • Allocate small memory space , Get the right to use it
    • Store the data , You can do it over and over again
    • Free up small memory space
  • Free memory
    • local variable : Automatically release after function execution

    • object : Become a garbage object ==> Garbage collector recycling

var a = 3
var obj = {}
obj = undefined  
//  Set the value to undefined, It doesn't release memory ,obj It's still worth it , nothing but undefined nothing more .

function fn () {
   var b = {}
}

fn() // b It's automatic release , b The object pointed to is collected by the garbage collector at a later time 
 Copy code 

Last

 Finally finished two shots of vaccine ,
 The stone in my heart falls as I wish ,
 It seems that a great event has been accomplished this year !
 Copy code 

Previously recommended

Vue-Cli3 Build the component library

Vue Implement dynamic routing ( Talk to the interviewer about the highlights of the project )

What you don't know about the project Axios Operation ( The core principle of handwriting 、 Compatibility )

VuePress Build project component documents

koa2+vue+nginx Deploy

vue-typescript-admin-template Background management system

Link to the original text

juejin.cn/post/699945…

copyright notice
author[git-Dignity],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827054455345X.html

Random recommended