专栏首页前端技术总结小结ES6基本知识点(三):类与继承
原创

小结ES6基本知识点(三):类与继承

0,本文适合人群和主要内容

ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。

老司机可以直接绕路。

上一节主要是总结了Symbol、Set和Map的有关内容。本节要总结ES6中的类、类的继承的有关内容。

1,类

ES5中没有类的概念,只能通过构造函数来初始化对象实例。ES6中可以通过class关键字来定义类。

ES5实现

function Person(name){
    this.name = name;
}
Person.prototype.hello = function(){
    console.log('Hi',this.name)
}
var person1 = new Person('Peter');
person1.hello(); // Hi Peter
console.log(person1 instanceof Person) // true
console.log(person1 instanceof Object) // true

说明:

先创建一个构造函数Person,然后定义一个方法hello,并赋值给这个构造函数的原型。这样构造函数的所有实例都将共享这个方法。再通过new操作符得到一个实例person1,该实例可以调用hello方法。并且通过instanceof可以看出:该实例person1是构造函数Person的实例、也是对象Object的实例。

ES6实现

通过class关键字声明一个类,上述代码的ES6等价版本:

class Person{
    constructor(name){
        this.name = name
    }
    hello(){
        console.log('Hi',this.name)
    }
}
person1 = new Person('Peter');
person1.hello(); // Hi Peter
console.log(person1 instanceof Person) // true
console.log(person1 instanceof Object) // true

说明:

在定义Person类中,先定义constructor方法,这个方法等价于定义Person构造函数。然后在类中直接定义hello方法,这等价于往构造函数的原型上添加方法,即hello方法是添加到Person.prototype属性上。

class Person {
    // 等价于定义Person构造函数
    constructor(name) {
        this.name = name
    }
    // 等价于Person.prototype.hello
    hello() {
        console.log('Hi', this.name)
    }
}
person1 = new Person('Peter');
person1.hello(); // Hi Peter

几点要注意的地方

(1)ES6中的类是语法糖,本质还是函数,一个具有构造函数方法行为的函数;

例如上述例子中:

 console.log(typeof Person) // function

(2)类中通过constructor方法来定义构造函数,在用new关键字初始化实例时自动执行。并且,一个类必须显示定义constructor方法,如果没有,则会默认添加一个空的constructor方法。

class Person{
    // 没有定义constructor方法
}

// 等价于

class Person{
    constructor(){}
}

(3)类声明不能被提升,就像let声明不能被提升;

// Uncaught ReferenceError: Person is not defined
let person1 = new Person('Peter');
class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('Hi', this.name)
    }
} 

(4)类中定义方法时,不需要function关键字,写法是:方法名(){xxx}这种形式;并且各方法之间不要逗号分隔;

(5)类的名称只在类中为常量,因此在定义类的方法中是不能修改类的名称的,不过可以在声明类之后修改;

内部修改类名会报错:

class Person{
    constructor(){
        Person = "OterPerson"
    }
}
let person2 = new Person(); // Uncaught TypeError: Assignment to constant variable.

(6)类中的所有方法都是添加到类的原型上,即类的prototype属性上,并且都是不可枚举的,可以通过Object.keys()查看;

验证:

class Person {
    constructor(name) {
        this.name = name
    }
    hello() {
        console.log('Hi', this.name)
    }
}
console.log(Person.prototype);
console.log(Object.keys(Person.prototype)); // []
console.log(Object.getOwnPropertyNames(Person.prototype)); // ["constructor", "hello"]

补充:

Object.keys(obj) 

返回给定对象obj的所有可枚举属性的字符串数组

Object.getOwnPropertyNames(obj)

返回给定对象obj的所有属性的字符串数组

(7)调用类的构造函数,要通过new调用,不用new则会报错

验证:

class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('Hi', this.name)
    }
}
let person1 = Person('Peter'); // Uncaught TypeError: Class constructor Person cannot be invoked without 'new'

(8)类的name属性,就是class关键字后面的标识符。

class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('Hi', this.name)
    }
}
console.log(Person.name) // Person

(9)new.target

在类的构造函数中使用new.target,一般情况下,new.target等于类的构造函数

验证:

class Person {    
    constructor(name) {
        this.name = name;
        console.log(new.target === Person)
    }
    hello() {
        console.log('Hi', this.name)
    }
}
let person1 = new Person('Peter') // true

2,继承

引用:

ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。

ES5实现继承

function Parent(value) {
    this.value = value;
}
Parent.prototype.printValue = function () {
    return this.value
}
function Child(value) {
    Parent.call(this, value);
}
Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
});
var child1 = new Child('Peter');
console.log(child1)
console.log(child1.printValue()); // Peter
console.log(child1 instanceof Child); // true
console.log(child1 instanceof Parent); // true

说明:

要Child继承Parent,就用一个从Parent.prototype创建的新对象重写Child的原型child.prototype,并且调用Parent.call()方法,child1:

ES6实现继承

使用extends关键字实现继承,通过调用super()可以访问基类的构造函数

上述代码的ES6等价版本:

class Parent {
    constructor(value) {
        this.value = value;
    }
    printValue() {
        return this.value
    }
}
class Child extends Parent {
    constructor(value) {
        // 等价于 Parent.call(this,value)
        super(value)
        this.value = value
    }
}
let child1 = new Child('Peter');
console.log(child1.printValue()); // Peter
console.log(child1 instanceof Child) // true 
console.log(child1 instanceof Child) // true

几点要注意的地方

(1)使用extends关键字即可实现继承,更符合面向对象的编程语言的写法

(2)关于super():

--只可以在子类的构造函数中使用super,其他地方使用会报错;

验证,在非子类中使用super(),会报错:

// Uncaught SyntaxError: 'super' keyword unexpected here
class Parent {
    constructor(value) {
        super(value);
        this.value = value;
    }
    printValue() {
        return this.value
    }
}

--在子类中指定了构造函数则必须调用super(),否则会报错。因为super负责初始化this,如果在调用super()前使用this,则会报错;

验证:

// Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
class Parent {
    constructor(value) {
        this.value = value;
    }
    printValue() {
        return this.value
    }
}
class Child extends Parent {
    constructor(value) {
        this.value = value
    }
}
let child1 = new Child('Peter');

--如果子类中没定义构造函数,则创建子类实例时,会自动调用super(),并且传入所有参数。

class Child extends Parent {
    // 没有构造函数
}

// 等价于

class Child extends Parent {
    constructor(...args) {
        super(...args)
    }
}

(3)子类也会继承父类的静态方法(static)

(4)关于new.target

如果是子类继承了父类,则父类中的new.target是子类的构造函数:

验证:

// 定义父类
class Rectangle{
    constructor(length,width){
        console.log(new.target === Rectangle) // false
        console.log(new.target === Square) // true
        this.length = length;
        this.width = width;
    }
}
// 定义子类
class Square extends Rectangle{
    constructor(length){
        super(length,length);
    }
}
let square1 = new Square(5); 

3,小结

本文主要通过对比ES5的实现方法,分别总结了ES6中类和类的继承的有关基本知识。如有问题,欢迎指正。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小结React(三):state、props、Refs

    在React中state、props、Refs都是最基础的概念,本文将同时梳理下这三个知识点,主要内容包括:

    前端林子
  • 只知道ajax?你已经out了

    随着前端技术的发展,请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般,蓬勃发展,本文主要想介绍其中的axios和...

    前端林子
  • 实用!前后端分离开发之前端模拟数据

    前后端分离的架构中,前后端同学约定好接口后就可以并行开发,最后双方再进行接口的联调。不过实际开发时,前后端联调会遇到下面这些问题,这些问题无疑中会影响联调的效率...

    前端林子
  • 一文秒杀Java中this关键字

    在这里插入图片描述 运行的结果的顺序其实很简单,关键就是要理解this到底指着谁,this表示对当前对象的引用,也就是subclass对象

    润森
  • delegates - 委托模式的简单实现

    最近发现一个有意思的模块 - delegates,它由大名鼎鼎的 TJ 所写,可以帮我们方便快捷地使用设计模式当中的委托模式(Delegation Patte...

    IMWeb前端团队
  • Java 比较器

    Mirror王宇阳
  • QQ空间掉帧率优化实战

    作者:邓荣欣, 腾讯移动客户端开发工程师

    WeTest质量开放平台团队
  • dotnet 配置 Gitlab 的 Runner 做 CI 自动构建

    今天在少珺小伙伴的协助下,使用了 gitlab 的 runner 给全组的项目做自动的构建。为什么需要使用 Gitlab 的 Runner 做自动构建,原因是之...

    林德熙
  • [PHP] 项目实践中使用的IOC容器思想

    1.容器的意思就是一个全局变量,里面存了很多对象,如果要用到某个对象就从里面取,前提就是要先把对象放进去 2.控制反转就是把自己的控制权交给别人 3.这两个结合...

    陶士涵
  • JDBC:数据库自定义类型与Java类的映射—将对象存储在关系数据库中(一)

    最近在使用PostgreSQL数据库,PostgreSQL中可以自定义自己的数据类型。

    卡尔曼和玻尔兹曼谁曼

扫码关注云+社区

领取腾讯云代金券