Let, const, arrow function, class

Let, const

1.1 Const can be used to declare a constant and must be assigned when declared. Variables declared as const cannot be modified

// How to declare a constant in ES5?
Object.defineProperty(window, name, {
    value: 'phil'.writable: false
})
// ES6
const name = 'phil'
// When a const variable is a reference type, it can be modified, because the reference type refers to a memory address.
// Core API object.freeze ()
const obj = { name: 'phil'.info: {sex: 1.habby: [ 'singing'.'playing']}}function deepFreeze( obj = {}) {
    Object.freeze(obj)
   (Reflect.ownKeys(obj) || []).forEach( item= > {
       if( typeof obj[item] === 'object'&& obj[item] ! = =null ){
           deepFreeze(obj[item])
       }
   })
}
Copy the code

1.2 Const has block-level scope, no variable promotion

const flag = true
if( flag ){
   const name = 'phil'
}
console.log(name) // undefined
Copy the code

Dead zones: This phenomenon is called a dead zone when a const or let is used first and then declared. Because js is single-threaded, the code after the error is not executed.

const flag = true
if( flag ){
   console.log(name) // Cannot access 'name' before initialization
   const name = 'phil'
}
Copy the code

2.1 Lets can be declared without assignment, but cannot be declared repeatedly, there is no variable promotion, and there is block-level scope.

Rule of use: declare a variable as const as possible, and change the const to let when the variable is assigned again.

Arrow Function

The basic structure

  // ES5
  const sum = function(a, b) { 
      return a + b
  }
  // ES6
  const sum = (a, b) = > a + b
Copy the code

Arrow function context scene –> this

1. Dom operation cb

 <button id='btn'></button>
Copy the code

 const btn = document.querySelector('#btn')
 btn.addEventListener('click'.() = > {
    // This is not acceptable, because this is not available
    this.style.width ='100px' 
 })
Copy the code

2. Class operations

   // 1. The arrow function cannot be used as a constructor.
   const Person = (name, age) = > {
      this.name = name
      this.age = age
   }
   // 2. Cannot define the stereotype method
   Person.prototype.call = () = > {
      console.log(`The ${this.name}`)}Copy the code

Arrow function parameter

  const sum = ( a, b ) = > {
      console.log(arguments) // 错 误 : Arguments is not defined
  }
  sum(1.2)
Copy the code

class

Is a grammar sugar provided by ES6

  // Declare a constructor in ES5
  function Person(name, age) {
      this.name = name
      this.age = age
  }
  Person.prototype.call = function () {
     console.log('calling')
  }
  
  Person.say = function(){
      console.log('saying')}// Use the class syntax in ES6
  class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      call() {
        console.log('calling')}// Static method constructors can be called directly without having to call an instance
      static say(){
          console.log('saying')}}Copy the code

Ask questions

1.1 What type is class?

console.log(typeof Person) // function
Copy the code

1.2 Does class have prototype?

console.log(Person.prototype) // The same as the prototype constructor in ES5
Copy the code

1.3 Can class use object methods & properties? — > ok

console.log(Person.hasOwnProperty('name')) // true
Copy the code

How to create a read-only variable in a class

class Person {
  constructor(name, age) {
      this.name = name
      this.age = age
      let _status = false
      
      this.getStatus(){
         retrun _status
      }
    }
}
Copy the code

2. Implement through getters

class Person {
  constructor(name, age) {
    this._name = name
    this.age = age
  }
  get name() {
    return this._name
  }
}
Copy the code

Static implementation

class Person {
  #gender = 'male';
  constructor(name, age) {
    this._name = name
    this.age = age
  }
  get gender() {
    return this.#gender
  }
}
const p = new Person('phil'.25)
Copy the code

Js – inheritance

// ES5 implements inheritance
function Person(name, age) {
   this.name = name;
   this.age = age;
}
Person.prototype.call = function(){
   console.log('calling')}function Chinese(skin){
   this.skin = skin
}

Chinese.prototype = Person.prototype

// ES6 implements inheritance --> < span style = "font-size: 14px;"
class Person {
  constructor(name, age) {
      this.name = name;
      this.age = age
  }
  call(){
      console.log('calling')}}class Chinese extends Person {
    constructor(skin){
        super(a)this.skin = skin
    }
}
Copy the code

---

--------------------- 0724 end ---------------------------
Copy the code

---