美文网首页日常刻书
ES6 中新增的类的概念

ES6 中新增的类的概念

作者: F_wind | 来源:发表于2021-01-31 09:15 被阅读0次

    《深入理解ES6》阅读随笔

    在 ES5 之前,JavaScript 中一直没有类的概念,在实际应用场景中,可以通过构造函数的方式来实现类的功能。下面是一个例子:

    // ES5
    function Cat(name) {
      this.name = name;
    }
    
    Cat.prototype.running = function () {
      console.log(this.name + " is running!");
    };
    
    var cat = new Cat("Tom");
    cat.running();  // Tom is running
    
    console.log(typeof Cat); // function 
    console.log(typeof Cat.prototype.running); // function
    

    在 ES5 中,我们可以创建一个构造函数 Cat,然后定义一个 running 方法,赋值给 Cat 的原型;如此这般,就实现了一个简单的类似类的功能。
    在 ES6 中,正式新增了声明类的办法:

    // ES6
    class Dog {
      constructor(name) {
        this.name = name;
      }
    
      running() {
        console.log(this.name + " is running!");
      }
    }
    const dog = new Dog("Wangcai");
    dog.running(); // Wangcai is running
    
    console.log(typeof Dog); // function
    console.log(typeof Dog.prototype.running); // function
    

    通过关键字 class 声明类,自有属性都放在新的 constructor 中,新增方法不再借助原型,而是直接在类中定义即可。
    我们发现,新的类以及类中原型上的方法,类型依然是 function,与原来 ES5 的实现保持一致。事实上,新的 class 方式是原来构造函数实现的一个语法糖,原理是一样的。

    相关文章

      网友评论

        本文标题:ES6 中新增的类的概念

        本文链接:https://www.haomeiwen.com/subject/ddwltltx.html