1. In depth summary of JS advanced Foundation

Keywords: Javascript node.js Front-end

1. Data type

1.1 classification

1. Basic (value) type

typeBrief description
StringArbitrary string
NumberArbitrary number
booleantrue/false
undefinedundefined
nullnull

2. Object (Reference) type

typeType description
ObjectAny object
FunctionA special object (executable)
ArrayA special object (numeric subscript, internal data is ordered)
var a ;
console.log(a,typeof a, a===typeof a); // undefined undefined false

a=4;
console.log(typeof a === 'number'); // true
a='string'; 
console.log(typeof a === 'string'); // true
a=true;
console.log(typeof a === 'boolean'); // true
a=null;
console.log(typeof a, a === null ); // object false

1.2 judgment

typeof
Can judge: undefined / numeric value / string / Boolean value / function
Cannot judge: null and object, object and array

instanceof
Determine the specific type of object

===
Can judge: undefined, null

 var b1 = {
    b2: [1, 'abc', console.log],
    b3: function () {
      console.log('b3')
      return function () {
        return 'xfzhang'
      }
    }
  }

  console.log(b1 instanceof Object, b1 instanceof Array) // true  false
  console.log(b1.b2 instanceof Array, b1.b2 instanceof Object) // true true
  console.log(b1.b3 instanceof Function, b1.b3 instanceof Object) // true true

  console.log(typeof b1.b2, '-------') // 'object'

  console.log(typeof b1.b3==='function') // true

  console.log(typeof b1.b2[2]==='function')
  b1.b2[2](4)
  console.log(b1.b3()())

1.3 relevant issues

/**
 * 1,undefined Difference between and null
 * undefined: Represents that the definition is not assigned
 * null: Represents the definition and assignment, but it is null
 */
var a;
console.log(a); // undefined

/**
 * 2,When to assign null to a variable
 */
var b = null; // Initialize to ull, indicating that it will be assigned as an object
b = ["abc", 12];
console.log(b); // null
b = null;
console.log(b); // The object pointed to by null b becomes a garbage object

/**
 * 3,Strictly distinguish between variable types and data types?
 *  js The variable itself has no type, and the type of the variable is actually the type of data in the variable memory
 *   data type
 *     Basic type
 *     object type
 *   Variable type
 *     Basic type: save data of basic type
 *     Reference type: saves the address value
 */

2. Data, variables and memory

2.1. What is data

  • Something readable and transferable in memory that holds specific information
  • Everything is data, and functions are data
  • Target of all operations in memory: Data

2.2. What is a variable

  • Its value is the amount allowed to change during the running of the program
  • A variable corresponds to a small memory in which its value is stored

2.3. What is memory

  • Memory space generated when the memory module is powered on (temporary)
  • One memory contains two aspects of data
    • Internally stored data
    • Address value data
  • Classification of memory space
    • Stack space: global and local variables
    • Heap space: objects

2.4 relationship among the three

  • Memory is a container used to store different data
  • Variables are the identification of memory. Through variables, we can manipulate (read / write) the data in memory

Variable, data, memory

  var age = 18
  console.log(age)

  var obj = {name: 'Tom'}
  console.log(obj.name)

  function fn () {
    var obj = {name: 'Tom'}
  }

  var a = 3
  var b = a + 2

2.5 related issues

1. Var a = XXX, what exactly is stored in the memory of a?

xxx is the basic data, which is the data saved
xxx is the object and the address value of the object is saved
xxx is a variable that stores the memory content of xxx (which may be basic data or address value)

 var a = 3
  a = function () {

  }

  var b = 'abc'
  a = b
  b = {}
  a = b

2. On the assignment of reference variables

Two reference variables point to the same object. One variable modifies the internal data of the object, and the other variable sees the modified data
Two reference variables point to the same object. Let one reference variable point to another object, and the other reference variable still points to the previous object

 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


  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

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

  console.log(a.age)

3. When js calls a function, whether to pass variable parameters by value or by reference

Understanding 1: all values (base / address values) are passed
Understanding 2: it may be value passing or reference passing (address value)

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

  function fn2 (obj) {
    console.log(obj.name)
  }
  var obj = {name: 'Tom'}
  fn2(obj)

4. How does the JS engine manage memory?

  1. Memory life cycle
  • Allocate small memory space and get its use right
  • Store data and operate repeatedly
  • Free up small memory space
  1. Free memory
  • Local variable: automatically released after function execution
  • Object: become garbage object = = > garbage collector
 var a = 3
  var obj = {}
  obj = undefined

  function fn () {
    var b = {}
  }

  fn() // b is automatically released, and the object pointed to by b is collected by the garbage collector at a later time

3. Object

3.1. What is the target

  • A collection of multiple data (attributes)
  • A container used to hold multiple data (attributes)

3.2 classification of attributes

  • General: the attribute value is not a function describing the state of the object
  • Method: the attribute whose attribute value is function describes the behavior of the object

3.3 composition of objects

  • Property name: string (identification)
  • Attribute value: any type

3.4. How to access internal data of objects

  • . property name

3.5 special objects

  • Array: the attribute name is an index such as 0,1,2,3
  • Functions: executable

3.6 why is the object used

Unified management of multiple data

3.7 related issues

1. When must I use it ’Attribute name ' How?

  1. The property name contains special characters: - spaces
  2. The property name is uncertain
 var p = {}
  //1. Add an attribute to the p object: content type: text/json
  // p. Content type = 'text / JSON' / / cannot be used
  p['content-type'] = 'text/json'
  console.log(p['content-type'])

  //2. Uncertain attribute name
  var propName = 'myAge'
  var value = 18
  // p.propName = value / / cannot be used
  p[propName] = value
  console.log(p[propName])

4. Functions

4.1. What is a function

  • The encapsulation of n statements used to realize specific functions
  • Only function type data can be executed, and nothing else can be executed

matters needing attention

  • Functions are also objects
    • instanceof Object===true
    • The function has the attribute: prototype
    • The function has methods: call()/apply()
    • You can add new properties / methods
  • Three different roles of functions
    • General functions: direct call
    • Constructor: call through new
    • Object: call internal properties / methods through
  • this in function
    • Explicitly specify who: obj.xxx()
    • Specify who calls xxx.call(obj) through call/apply
    • Do not specify who calls: XXX (): window
    • Callback function: see who calls it behind: window / other

4.2 why use function

  • Improve reusability
  • Easy to read and communicate

4.3. How to define a function

  • Function declaration
  • expression

4.4 calling function

  • test(): call directly
  • obj.test(): called by object
  • New test(): Call New
  • test.call/apply(obj): temporarily call the method that makes test obj
/*
  Write a program to realize the following functional requirements:
    1. Output corresponding information according to age
    2. If less than 18, output: minor, wait!
    3. If greater than 60, output: forget it!
    4. Other, output: just right!
  */
  function showInfo (age) {
    if(age<18) {
      console.log('under age, Wait a minute!')
    } else if(age>60) {
      console.log('forget it!')
    } else {
      console.log('just!')
    }
  }

  showInfo(17)
  showInfo(20)
  showInfo(65)

  function fn1 () { //Function declaration
    console.log('fn1()')
  }
  var fn2 = function () { //expression
    console.log('fn2()')
  }

  fn1()
  fn2()

  var obj = {}
  function test2 () {
    this.xxx = 'atguigu'
  }
  // obj.test2() can't be used directly. It doesn't exist at all
  test2.call(obj) // obj.test2() / / a function can be called as a method specifying any object
  console.log(obj.xxx)

Posted by _SAi_ on Tue, 21 Sep 2021 14:13:45 -0700