zoukankan      html  css  js  c++  java
  • 003.ES2015和ES2016新特性--类.md

    JavaScript使用的是基于原型的OO模型,用对象字面量或者函数来实例化对象,用原型链来实现继承。
    这样对于数据传统C++、Java的OO范式的开发者来说,会感到比较困惑,于是从ES2015开始逐步引入一种新语法用来实现传统OO范式,在新语法的背后,其语义与我们熟悉的旧语法完全相同(使用构造函数以及基于原型的集成),但是,用新的方式来实现OO范式在语法上更加方便,而且更加简洁。
    ES2016在ES2015基础上,又添加了更多的语法特性,其中包括声明静态属性和实例属性。
    下面看一个例子:

    注意,使用tsc直接编译会出现如下错误:

    sample-classes.ts(4,9): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
    

    可以参考001中的1.7和3.4节查看原因并解决。

    class Human{
        static totalPeople = 0;
        _name;//ES2016属性声明语法
        get name(){
            return this._name;
        }
        set name(val){
            this._name = val;
        }
        constructor(name){
            this._name = name;
            Human.totalPeople += 1;
        }
        talk(){
            return `Hi, I'm ${this.name}`;
        }
    }
     
    class Developer extends Human{
        _languages;//ES2016属性声明语法
        constructor(name, languages){
            super(name);
            this._languages = languages;
        }
        get languages(){
            return this._languages;
        }
     
        talk(){
            return `${super.talk()} And I know
            ${this.languages.join(',')}.`;
        }
    }
    var human = new Human("foobar");
    var dev = new Developer("Gavin", ["JavaScript"]);
    console.log(dev.talk());
    

    可以简单的通过如下命令运行测试:

    ts-node sample-classes.ts
    

    在Angular2中定义类非常常用。可以用它来定义组件、指令、服务以及管道。当然也可以用ES5的语法,使用构造函数的方式定义类。从语义上讲这两种写法没什么差别,本质上ES2015中的类会被翻译成构造函数。

  • 相关阅读:
    “键鼠耕耘,IT家园”,博客园2010T恤正式发布
    解决jQuery冲突问题
    上周热点回顾(5.316.6)
    博客园电子期刊2010年5月刊发布啦
    上周热点回顾(6.76.13)
    Chrome/5.0.375.70 处理 <pre></pre> 的 Bug
    [转]C# MemoryStream和BinaryFormatter
    [转]Android adb不是内部或外部命令 问题解决
    [转]HttpWebRequest解析 作用 介绍
    财富中文网 2010年世界500强排行榜(企业名单)
  • 原文地址:https://www.cnblogs.com/gavin-cn/p/6890996.html
Copyright © 2011-2022 走看看