JS가 ES6의 class 사용법을 빠르게 파악

1. 어떻게 구성합니까?

먼저 es5에서 자주 사용하는 구축 유형의 방법을 복습해 봅시다. 먼저es5의 작법은 원형으로 대상을 진행하는 방법을 사용하는데 왜 구조 함수에 방법을 추가하지 않습니까?실례화 대상을 만들 때 똑같은 방법을 반복적으로 만들어 자원을 낭비하기 때문이다.그래서 대상의 방법을prtotype에 마운트해야 합니다.
new와this의 귀속 문제는 대략 다음과 같이 간소화할 수 있습니다.

우선 new를 통해 새로운 대상을 생성합니다

그리고 이 대상을 구조 함수의this에 귀속시킵니다

그리고 이 구조 대상의 원형 대상에 귀속한다

마지막으로 이 대상을 앞에서 정의한 대상에게 되돌려줍니다

그럼 다음은 예를 살펴보겠습니다.

fuction Animal(name,age){
  this.name = name
  this.age = age
  
  //  
  // this.eat = function(){
  //   console.log(" ")
  // }
}

//  
Animal.prototype.eat=function(){
  console.log(" ")
}

그리고 ES6의class를 올라가면class는 분명히 이 조작을 간소화시켰다

cosnt dog = new Animal("wangcai",2) //  ，ES6 ， let const ，class .

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log(" ")
  }
}

cosnt dog = new Animal("wangcai",2)  // 

또한class는 정적 방법, set, get 등 조작을 추가했습니다.

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log(" ")
  }
  

 set name(value){
    this.tempname =" "+value
  }
  
  get name(){
    return this.tempname
  }
  
  static introuduce(){
    console.log(" ")
  }
}

//set() get()
const dog = new Animal("giao",2)
dog.name="agiao" 
console.log(dog.name) //  agiao

//  
Animal.introuduce() //  

게다가 계승하기 전에 작은 지식을 보충하면class의 방법명은 속성을 계산하는 조작을 통해 명명할 수 있다

let tempname = "giao"
class Animal{
   constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
  [tempname](){
    console.log(" giao")
  }
}

const xiaoagiao = new Animal("giaoge",30)
xiaoagiao.giao() //  giao

2.상속

상속 문제로 돌아가면es5는 어떻게 상속됩니까?

function Animal( name ){
  this.name = name
}
Animal.prototype.break(){
  console.log(" ！")
}

function Dog( name, age ){
  Animal.call(this,name)
  this.age = age
}

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

그럼 이걸 조합계승이라고 하는데 어떤 조합법이죠?
속성상의 상속은 차용 상속입니다. 애니멀을 볼 수 있습니다.call(this,name)은 애니멀이라는 함수를 Dog의 구조 함수에 한 번 호출한 것과 같다.속성은 원형 체인의 체인식 연결이 없지만 코드를 가져와서 Dog에게 한 번 뛰었기 때문에 자연히 애니멀의name 속성을 계승했다.

Animal.call(this,name)

방법의 계승은 원형식 계승이다. 모두가 알다시피 하나의 함수는 만들 때 원형 대상을 생성한다. 이 함수의 프로토타입 속성은 그의 원형 대상을 가리키고 원형 대상의constructor 속성은 이 함수를 가리킨다.이 함수의 실례를 new로 새로 만들면 _proto__의 속성은 함수의 원형 대상을 가리킨다.따라서 차용 함수 실례는 함수 원형 대상이라는 특성을 가리킨다. 우리는 계승된 함수를 실례화한 다음에 이 실례화된 대상을 계승된 구조 함수의 프로토타입 속성에 부여함으로써 일종의 체인 구조를 구성한다.그러나 계승된 함수와 실례화는constructor라는 속성을 갖추지 못한다. 우리는 그의constructor를 계승된 구조 함수로 가리켜야 한다.

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

그래서 이 방법에 따라 우리는 es5의 문법으로 Dog 함수를 애니멀 함수의name와break 방법을 계승했다.
그러면 ES6는 어떻게 하는 거죠?

class Animal{
  constructor( name ){
    this.name = name 
  }
  
  break(){
    console.log(" ！")
    }
}

class Dog extends Animal {
  constructor( name, age ){
    super(name)
    this.age=age
  }
}

이제 Dog류를 설명할 때 extends Animal을 추가하고constructor 구조 함수에 슈퍼를 추가하면 됩니다.
이 슈퍼(name)는 동물에 해당한다.call(this,name)입니다.그리고 방법에 관한 문제는 당연히 걱정할 필요가 없다. extends는 자동으로 처리되고 프로토타입으로 함부로 가리키지 않아도 된다.
이상은 JS가 ES6의 class 용법에 대한 상세한 내용을 신속하게 파악하고 JS ES6의 class 용법에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!