浅析ES6新特性 —— Class

LiveVideoStack 发布于2019-08-22 15:21 / 3349人阅读

摘要：如下示例构造函数实例化对象新特性使用类实例化对象引入了类这一概念，可以通过关键字，定义类。否则报错，这是类和构造函数的一个主要区别。其实，的类，可以看作是构造函数的另外一种写法。

前言

类语法是ES6中新增的一个亮点特性，下文简单对类的使用进行简要说明（仅作为个人层面的理解）

js传统模式实例化对象方法——prototype

在JavaScript中，实例化一个对象的传统使用方法是通过构造函数。
如下示例：

function Count(num1,num2){
    this.num1 = num1;
    this.num2 = num2;
}
//构造函数
Count.prototype.number = function(){
    console.log(this.num1,this.num2);
}
//实例化对象
var count = new Count(1,2);
count.number(1,3);

ES6新特性——使用Class（类）实例化对象

ES6引入了Class(类)这一概念，可以通过class关键字，定义类。
如下示例：

//定义类
class Count{

    //构造方法
    constructor(x,y){
        //this表示实例对象
        this.x = x;
        this.y = y;
    }
    
    //非静态方法，可以直接用实例.方法名来访问
    sum(x,y){
        let sum = x+y;
        console.log("sum is :",sum)
    }
    
    //静态方法，需要通过构造器或者类才能访问的到
    static sub(x,y){
        let sub = x - y;
        console.log("sub is :",sub);
    }
}

var count = new Count();

//非静态方法，可以直接访问
count.sum(1,2);                         // sum is :3

//静态方法：
//（1）实例对象.constructor.方法名
count.constructor.sub(5,1);             // sub is :4

//（2）类名.方法名
Count.sub(5,1);                         // sub is :4

count.hasOwnProperty("x");              // 定义在this上，是实例对象自身的属性true
count.hasOwnProperty("y");              // true
count.hasOwnProperty("sum");            // 定义在原型对象上，false
count._proto_.hasOwnProperty("sum");    // true

通过以上的小实例，总结下面几点:

定义“类”的方法时，不用加function关键字。

方法之间不要加逗号，加了会报错。

类中必须要有constructor方法，若没有显示定义，则一个空的会被添加。

类必须使用new调用。否则报错，这是类和构造函数的一个主要区别。

类中使用static关键字声明的方法，需要通过构造函数constructor或者使用类名才可以访问的到。

静态方法，实例对象不能直接访问。但是父类的静态方法，子类可以继承。

非静态方法，可以直接通过“实例对象.方法名”访问。

实例自身的属性，除非显示定义在this对象上，否则都是定义在原型上（即class上）。

其实，ES6的类，可以看作是构造函数的另外一种写法。

class B{}
var b = new B();
typeof B;               //`function`
typeof  B === B.prototype.constructor                   //true
typeof  b.constructor === B.prototype.constructor      //true

对比ES6和ES5，有以下相同点

类的数据类型就是函数，类本身就指向构造函数。

在类的实例上调用方法，就是调用原型上的方法。

再来看ES6与ES5的不同点

由于类的方法都定义在prototype上面，那么我们可以使用Object.assign方法给类一次添加多个方法。prototype的constructor方法，直接指向“类”本身，这和ES5的行为是有区别的。另外，类内部所有定义的方法，都是不可枚举的，而ES5中，prototype上的方法都是可枚举的。
示例如下：

//ES5
function Test(){}
Test.prototype.log = function(){}
var test = new Test();

Object.keys(Test.prototype);    //列举出给定对象自身可枚举属性(不包括原型上的属性)   
//["log"]

Object.getOwnPropertyNames(Test.prototype);      //列举出给定对象所有自身属性的名称（包括不可枚举属性但不包括Symbol值作为名称的属性）  
//["prototype","log"]



//ES6
class Test2{
    toValue(){}
}
var test2 = new Test2();

Object.keys(Test2.prototype);
//[]

Object.getOwnPropertyNames(Test2.prototype);
//["constructor","toValue"];

Class的静态方法

类中所定义的方法，都会被实例继承，如果在一个方法前，加上static关键字，那该静态方法不会被实例继承，而是直接通过类来调用的。

class Foo{
    static addMethod(){
        console.log(this);
        console.log("hello class");
        this.
    }
}

//直接通过类来调用
Foo.addMethod();        //Foo ,  hello class

//实例不会继承静态方法，所以调用会报错
var foo = new Foo();
foo.addMethod();    //TypeError:foo.addMethod is not a function

注意：

如果static静态方法包含this关键字，这个this指的是类，而不是实例。

静态方法可以与非静态方法同名。

父类的静态方法，可以被子类继承。

静态方法可以从super对象上调用。

待续……

GPU云服务器云服务器 es6新特性 es6的新特性 es6中的class es6class

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93399.html

ES6 Proxy/Reflect 浅析

摘要：即必须有返回值其中可接受三个参数，为目标对象，为属性名，为实际接受的对象，默认为本例中新建的，如果单独指出一个对象，可使指出对象受到相同的方法作用。且中的必须有返回值，的不用，这也正是因为在他之后还会执行所以不需要。 ES6 Proxy/Reflect Proxy 拦截器 proxy是es6的新特性，简单来讲，即是对目标对象的属性读取、设置，亦或函数调用等操作进行拦截（处理）。 let...

Juven 2019-08-20 14:14 评论0 收藏0
ES6浅析之路一

摘要：特点是块级作用域的特点得到明显的体现再看一个中的循环变量泄露为全局变量很明显成了全局变量。本人目前了解的还不够深比如中添加一个新的词汇暂时性死区，简称。 (个人理解ES6就是对ES5的BUG修改和升级)废话不多说今天要探讨的是 var与letECMAScript 6 入门作者：阮一峰下面是个人总结：let不允许在相同作用域内，重复声明同一个变量。let 特点是块级作用域先来看一...

BetaRabbit 2019-08-23 12:41 评论0 收藏0
generator探幽(1)--koa中间件机制浅析

摘要：当运行到时，不会暂停，而是直接跳进函数执行函数内的代码。由于函数中没有，因此会一直执行完函数中的代码，并返回至函数中执行后面的代码。本系列旨在通过对co，koa等库源码的研究,进而理解generator在异步编程中的重大作用(ps:所有代码请在node --harmony或者iojs环境中运行) koa中间件的形式相信用过koa的小伙伴一定很熟悉下面这段代码 var app ...

Jensen 2019-08-21 10:31 评论0 收藏0
浅析es6-promise源码

摘要：主要逻辑本质上还是回调函数那一套。通过的判断完成异步和同步的区分。主要逻辑: 本质上还是回调函数那一套。通过_subscribers的判断完成异步和同步的区分。通过 resolve，reject -> publish -> invokeCallback -> resolve，reject的递归和下一条then的parent是上一条的child来完成then链的流转同步情况...

fox_soyoung 2019-08-23 16:16 评论0 收藏0