zoukankan      html  css  js  c++  java
  • 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 实现继承更加易读、易理解
    更易于写 java 等后端语言的使用
    本质还是语法糖,使用 prototype

     2019-05-09

    工欲善其事,必先利其器
  • 相关阅读:
    【UVA
    Struts2框架学习笔记1
    如何面对这个残酷的世界?——Java模拟
    漫漫学习路——我的大一
    leetcode-36-有效的数独
    leetcode-887-三维形体投影面积
    leetcode-34-在排序数组中查找元素的第一个和最后一个位置
    leetcode-33-搜索旋转排序数组
    leetcode-31-下一个排列
    leetcode-17-电话号码的字母组合
  • 原文地址:https://www.cnblogs.com/ccbest/p/10838988.html
Copyright © 2011-2022 走看看