你真的理解ES6的Class吗

2019-07-17 admin

在面向对象的编程中,类是一个用于创建对象,为状态(成员变量)和行为实现(成员函数或方法)提供初始值的可扩展程序代码模板。

在实际开发中,我们往往需要创建很多相同类型的对象,如用户、商品或其他对象。我们知道,通过new一个function可以创建一个对象,但在现代的JavaScript里,有一个更高级的“类”结构,对于面向对象编程提供了一些很不错的特性。

Class语法

基本的class语法如下:

class MyClass{
    constructor(){}
    method1(){}
    method2(){}
    method3(){}
}

然后通过new MyClass()来创建一个拥有以上方法的对象实例,与此同时,通过new操作符,**构造方法(constructor)**是被自动调用,的,这意味着在构造方法中我们可以做一些初始化的工作。

列如:

class User{
    constructor(name){
        this.name = name
    }
    showUInfo(){
        alert(this.name)
    }
}
//Usage:
let user = new User('Darkcode')
user.showUInfo()

当**new User(‘Darkcode’)**被调用的时候:

  • 创建了一个新的对象
  • 构造方法通过给定的参数运行,并为其分配this.name

然后我们能够调用方法,如user.showUInfo()

注意:

   类方法之间是没有逗号的

究竟什么是类?

其实,在JavaScript中,类是函数的一种。如:

class User{
    constructor(name){
        this.name = name
    }
    showUInfo(){
        alert(this.name)
    }
}
// proof: User is a function
alert(typeof User)//function

**class User {…}**做了什么呢:

  1. 创建一个名为User的函数,该函数将成为类声明的结果
  2. 在User.prototype中存储所有方法,例如showUInfo

之后,对于新对象,当我们调用一个方法的时候,它就是从原型中获取的,因此新的User对象就可以访问到类方法了。

我们可以将class User的声明做如下简述: class User过程图

    class User{
            constructor(name){
                this.name = name
            }
            showUInfo(){
                alert(this.name)
            }
        }
        // proof: class is a function
        alert(typeof User)//function

        // ...or, more precisely, the constructor method
        alert(User === User.prototype.constructor)//true

        // The methods are in User.prototype, e.g:
        alert(User.prototype.showUInfo)// alert(this.name);

        // there are exactly two methods in the prototype
        alert(Object.getOwnPropertyNames(User.prototype)); // constructor, showUInfo

并不只是语法糖

一些人说在JavaScript中class是一种"语法糖",因为我们实际上可以在没有class关键字的情况下声明一个类。在Es6之前,我们可以通过function去实现一个类。

// 1\. Create constructor function
function User(name) {
    this.name = name
}
// any function prototype has constructor property by default,
// so we don't need to create it

// 2\. Add the method to prototype
User.prototype.showUInfo = function () {
    alert(this.name)
}
// Usage:
let user = new User('Darkcode')
user.showUInfo()

这个定义的结果大致相同。因此,确实可以将类视为一种语法糖来定义构造函数及其原型方法。但与class的方式创建一个类有着重要的差异。

首先,由class创建的函数由特殊的内部属性标记[[FunctionKind]]:“classConstructor”.所以它与手动创建并不完全相同。与常规函数不同,如果没有new,则无法调用类构造函数

    class User {
      constructor() {}
    }

    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'

此外,大多数JavaScript引擎中的类构造函数的字符串表示形式都以“class …”开头。

class User {
  constructor() {}
}

alert(User); // class User { ... }

其次,类方法是不可枚举的。对于原型中的所有方法,类定义将enumerable标志设置为false。

最后,类总是使用严格模式的。这意味着类构造中的所有代码都自动处于严格模式

此外,除了基本操作之外,类语法还带来了许多其他功能,稍后我们将对其进行探讨。

类表达式

就像函数一样,类可以在另一个表达式中定义,传递,返回,分配等。

    let User = class {
            showUInfo() {
                alert("Hello");
            }
        };
   new User().showUInfo()

与命名函数表达式类似,类表达式可能有也可能没有名称。

如果类表达式具有名称,则它仅在类中可见

    let User = class MyClass{
        showUInfo(){
            alert(MyClass)// MyClass is visible only inside the class
        }
    }
    new User.showUInfo()// works, shows MyClass definition
    alert(MyClass); // error, MyClass not visible outside of the class

我们甚至可以“按需”动态创建类,代码如下:

    function makeClass(phrase) {
        // declare a class and return it
        return class {
            showUInfo() {
                alert(phrase);
            };
        };
    }

    // Create a new class
    let User = makeClass("Hello");

    new User().showUInfo(); // Hello

Getters/Setters

类可能包括getter / setter,生成器,计算属性等。这里通过使用get/set来实现user.name

    class User{
        constructor(name){
            this._name = name
        }

        get name(){
            return this._name
        }

        set name(value){
            if(value.length<4){
                alert("名字长度不够.");
                return;
            }
            this._name = name
        }
    }

    let user = new User('Darkcode')
    alert(user.name)
    user = new User('')//名字长度不够.

在User的原型对象中,通过类声明创建get/set:

    Object.defineProperties(User.prototype, {
      name: {
        get() {
          return this._name
        },
        set(name) {
          // ...
        }
      }
    });

类属性

在上面的列子中,User类中仅仅添加了简单的方法,现在来添加一些属性。

    class User {
      name = "Anonymous";

      sayHi() {
        alert(`Hello, ${this.name}!`);
      }
    }

    new User().sayHi();

该属性未放入User的原型中。相反,它是由new创建的,分别为每个对象创建。因此,该属性永远不会在同一个类的不同对象之间共享。

接下来将介绍类中私有的,保护的属性和方法。

[转载]原文链接:https://segmentfault.com/a/1190000019792333

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-70005.html

文章标题:你真的理解ES6的Class吗

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
回到顶部