ES6的Class学习

AJie 发布于2019-08-20 18:35 / 3301人阅读

摘要：另外只有调用之后，才可以使用关键字正确子类的属性和的静态方法，在一个方法前面，加上关键字，就表示该方法不会被实例继承，但是可以被子类继承但是可以被子类继承，也可从上调用

初识Class

传统的写法

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

Point.prototype.toString = () => {
    return `( ${this.x}, ${this.y} )`
}

ES6为了更接近面向对象的编程方式，提供了Class的概念

class Point {
    constructor (x, y) {
        this.x = x
        this.y = y
    }
    
    toString {
        return `( ${this.x}, ${this.y} )`
    }
}

上面定义了一个‘类’，一个构造方法constructor，this是实例对象，一个toString方法（注意没有function这个保留字）

class类中的方法（除constructor之外）其实都定义在类的prototype属性上

// 比如toString()，相当于
Point.prototype = {
    toString(){}
}

// 所以类的新方法可以这样添加进去
Object.assign(Point.prototype, {
    toString(){},
    toValue(){}
})

Point.prototype.constructor === Point // true

构造方法和实例对象

通过new命令生成对象实例时都默认自动调用constructor方法，一个类必须有constructor方法，没有显式定义的话，一个空的con方法会被默认添加

constructor () {}

该方法默认返回实例对象（就是this），但是可以指定返回另一个对象

class Foo {
    constructor {
        return Object.create(null)
    }
}
new Foo() instanceof Foo // false

实例对象的创建同之前一样

class Point {
    // 这里为了缩小工作量，没有全部书写
    constructor () {}
    tostring () {}
}

let point = new Point(2, 3)
point.toString() // (2, 3)

point.hasOwnProperty("x") // true，因为该实例属性显式的定义在this上
point.hasOwnProperty("toString") // false，因为方法都是定义在原型上的
point.prototype.hasOwnProperty("toString") // true

point._proto_ === Point.prototype // true

ES6的Class只是ES5的构造函数的一层包装，所以继承了函数的许多属性，包括name属性

class Point {} 
Point.name // "Point"

class不存在变量提升

new Foo() // ReferenceError
class Foo {}

// let Foo = class {}
// class Bar extends Foo {}
// 因为class没有提升，所以上面代码不会报错

class的继承

class childPoint extends Point {
    constructor(x, y, color) {
        super(x, y)
        this.color = color
    }
    
    toString() {
        return this.color + "" + super.toString() // 等于Parent.toString()
    }
}

子类必须在constructor方法中调用super方法，否则新建实例会出错。另外只有调用super之后，才可以使用this关键字

class Point{}
class childPoint extends Point{
    constructor (x, y, color) {
        this.color = color // ReferenceError
        super(x, y)
        this.color = color // 正确
    }
    
}
let cp = new childPoint() // ReferenceError

子类的_proto_属性

class B extends A {
}

B._prototype_ === A // true
B.prptotype._proto_ === A.prototype // true

Object.getPrototypeof(B) === A // true

getter和setter

class MyClass {
    get prop() {
        return "getter"
    }
    set prop(value) {
        console.log("setter:" + value )
    }
}

let inst = new MyClass()

inst.prop = 123 // setter: 123
inst.prop // "getter"

Class的静态方法，在一个方法前面，加上static关键字，就表示该方法不会被实例继承，但是可以被子类继承

class Foo {
    static classMethod () {
        return "hello"
    }
}

Foo.classMethod() // hello

let foo = new Foo()

foo.classMethod() // TypeError: undefined is not a function

// 但是可以被子类继承，也可从super上调用
class Bar extends Foo {
    // static classMethod() {
        // return super.classMethod() + ", too"
    // }
}
Bar.classMethod() // hello

GPU云服务器云服务器 es6中的class es6class js标签的class js的class写法

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

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

ES6学习总结（三）

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

baoxl 2019-08-21 11:55 评论0 收藏0
[译] 在你学习 React 之前必备的 JavaScript 基础

摘要：前言在理想的状态下，你可以在深入了解之前了解和开发的所有知识。继承另一个类的类，通常称为类或类，而正在扩展的类称为类或类。这种类型的组件称为无状态功能组件。在你有足够的信心构建用户界面之后，最好学习。原文地址：JavaScript Basics Before You Learn React 原文作者： Nathan Sebhastian 写在前面为了不浪费大家的宝贵时间，在开...

Chaz 2019-08-23 17:54 评论0 收藏0
《ES6学习4》Class

摘要：语言传统方法通过构造函数定义并生成新对象，引入了这个概念作为对象的模板，通过关键字可以定义类。基本语法等同于上面的代码表明，类的数据类型就是函数，类本身指向构造函数。属性引入了属性，在构造函数中返回命令所作用的构造函数。 JS语言传统方法通过构造函数定义并生成新对象，ES6引入了Class这个概念作为对象的模板，通过class关键字可以定义类。基本语法 function Point(...

seal_de 2019-08-23 17:55 评论0 收藏0
ES6学习笔记之Classes

摘要：静态方法静态方法直接用类名来调用就可以了，熟悉面向对象编程的同学应该都不陌生。在中，一个类不能继承多个类。为了解决这个问题，可以使用。当类表达式有命名时，该命名仅作为类内部使用。本文同步自我得博客：http://www.joeray61.com 简介 ES6的Classes是在原型链继承的基础上，由语言本身提供的语法糖，并非是一种全新的继承模式。这使得Javascript有一种更加简...

MSchumi 2019-08-19 18:15 评论0 收藏0