002-ES6Class와 일반 구조 함수의 차이

ES5 이전 구조 함수

function MathHandle(x, y) {
this.x = x
this.y = y
}

MathHandle.prototype.add = function () {
return this.x + this.y
}

var m = new MathHandle(1, 2)


typeof MathHandle // 'function'
MathHandle.prototype.constructor === MathHandle // true
m.__proto__ === MathHandle.prototype // true

 
ES6 class 다시 쓰기

class MathHandle {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    add() {
        return this.x + this.y
    }
}

const m = new MathHandle(1, 2)

console.log(typeof MathHandle)  // 'function'
console.log(MathHandle.prototype.constructor === MathHandle)  // true
console.log(m.__proto__ === MathHandle.prototype)  // true

위에서 알 수 있듯이 ES6의 class는 ES5 구조 함수의 문법 설탕일 뿐이다
ES5 단순 상속 구현

//  
function Animal() {
    this.eat = function () {
        alert('Animal eat')
    }
}

//  
function Dog() {
    this.bark = function () {
        alert('Dog bark')
    }
}

//  ， 
Dog.prototype = new Animal()

var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()

ES6 상속 구현

class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        alert(this.name + ' eat')
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name)   //   ！！！
        this.name = name
    }
    say() {
        alert(this.name + ' say')
    }
}

const dog = new Dog(' ')
dog.say()// say
dog.eat()// eat

Class는 문법적으로 대상을 대상으로 하는 쓰기 방법에 더욱 부합된다. Class는 계승을 실현하고 더욱 읽기 쉽고 이해하기 쉬우며 자바 등 백엔드 언어의 사용 본질인지 문법 설탕인지 프로토타입을 사용한다.
 2019-05-09
다음으로 전송:https://www.cnblogs.com/ccbest/p/10838988.html