ES6 中的Class

Donne 发布于2019-08-23 17:08 / 1283人阅读

摘要：注类的内部所有定义的方法，都是不可枚举的方法方法是类的默认方法，通过命令生成对象实例时，自动调用该方法。一个类必须有方法，如果没有显式定义，一个空的方法会被默认添加。注意点方法默认返回实例对象即，完全可以指定返回另外一个对象。

基本用法

ES5 的写法

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return "(" + this.x + ", " + this.y + ")";
};

var p = new Point(1, 2);

ES6 的写法

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return "(" + this.x + ", " + this.y + ")";
  }
}

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

class B {}
let b = new B();

b.__proto__.constructor === B.prototype.constructor?console.log("true"):console.log("false")
console.log(typeof b.__proto__.constructor)
console.log(typeof B.prototype.constructor)

注：类的内部所有定义的方法，都是不可枚举的

constructor 方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
注意点

constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

类必须使用new调用，否则会报错。

class book{
    constructor(){
        this._year=2004;
        this.edition=1;
    }
    get year(){
        return this._year;
    }
    set year(newVal){
        if(newVal>2004){
            this._year=newVal;
            this.edition+=newVal-2004;
        }
    }
}
let b=new book();
b.year = 2004; //2
console.log(b.edition);

取值函数（getter）和存值函数（setter）

class book{
    constructor(){
        this._year=2004;
        this.edition=1;
    }
    get year(){
        return this._year;
    }
    set year(newVal){
        if(newVal>2004){
            this._year=newVal;
            this.edition+=newVal-2004;
        }
    }
}
let b=new book();
b.year = 2004; //2
console.log(b.edition);

云服务器 GPU云服务器 es6中的class es6class es6中的promise ES6

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

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

ES6+ class中代码的真正样子

摘要：一用定义一个空类在中在中结论这个结果很清晰，原来中的类在中也是定义一个构造函数，然后返回出来。这篇文章用代码对比的方式解释ES6中的类如果用我们熟悉的ES5来看是什么样的。一、用class定义一个空类在ES6中： class Person { } 在ES5中： var Person = (function () { function Person() { } ...

PascalXie 2019-08-20 15:11 评论0 收藏0
ES6 探秘：Classes

摘要：中的同名的实际上就是我们在的原型继承中使用的构造函数，所以中的是对中的构造函数的一种包装。我们发现，在中设定的属性被放在的构造函数中，而方法则以键值对的形式传入一个函数中。大家是不是对这种继承模式似曾相识呢对了，这就是所谓的构造函数窃取。 ES6中增加了一些新特性，但从底层的角度来说，只是一些语法糖。但是就我个人来说，如果不了解这些语法糖的本质，是用不安心的。那我们要如何揭开这些语法糖...

caoym 2019-08-19 17:33 评论0 收藏0
es6中的class

摘要：和大多数浏览器的实现中，每一个对象都有属性除外，指向对应的构造函数的属性。作为构造函数的语法糖，同时有属性和属性，因为存在两条继承链。前言 es6的class其实是构造函数的语法糖，但是又有区别，下面来详细分析下class 定义先来看下class的定义的代码 class Point{ constructor(){} toString(){} } ...

546669204 2019-08-23 11:42 评论0 收藏0
ES6 class继承与super关键词深入探索

摘要：请看对应版本干了什么可知，相当于以前在构造函数里的行为。这种写法会与上文中写法有何区别我们在环境下运行一下，看看这两种构造函数的有何区别打印结果打印结果结合上文中关于原型的论述，仔细品味这两者的差别，最好手动尝试一下。 ES6 class 在ES6版本之前，JavaScript语言并没有传统面向对象语言的class写法，ES6发布之后，Babel迅速跟进，广大开发者也很快喜欢上ES6带...

jubincn 2019-08-26 10:58 评论0 收藏0
ES6学习总结（三）

摘要：不同于其他面向对象语言，以前的中中没有类的概念，主要是通过原型的方式来实现继承，中引入了原型链，并且将原型链用来实现继承，其核心是利用原型使得一个对象继承另一个对象的方法和属性，中原型继承的关键是将一个实例的原型对象指向另一个实例，因此前一不同于其他面向对象语言，ES6以前的JavaScript中中没有class类的概念，主要是通过原型的方式来实现继承，JavaScript中引入了原...

baoxl 2019-08-21 11:55 评论0 收藏0
如何继承Date对象？由一道题彻底弄懂JS继承。

摘要：前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。倘若用的是中文搜索。所以最终的实例对象仍然能进行正常的原型链回溯，回溯到原本的所有原型方法这样通过一个巧妙的欺骗技巧，就实现了完美的继承。前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 20180201更新：修改用词描述，如组合寄生式改成寄生组合式，修改多处笔误（感谢@Yao Ding的...

sunnyxd 2019-08-22 13:50 评论0 收藏0