标签：function ES6 ES5 name sayName Person length new class

前言

ES6的 class 是语法糖, 相当好用, 主要介绍几个关键的概念

1. 仿类结构
2. 类的声明
3. 静态成员
4. 类的继承

1. ES5 中的仿类结构

在ES6之前没有class语法, 我们仿写一个类结构

var Person = function() {
    this.name = name
}

Person.prototype.sayName = function() {
    console.log(this.name)
}

var p = new Person('zmj')
p.sayName()

Person是一个构造函数, sayName()方法被指派到原型上, 因此Person的所有实例都共享了sayName方法

2. ES6 类的声明

将上例改写成类

class Person {
    // 相当于 Person 的构造函数, 私有属性应该写在这里
    constructor(name) {
        this.name = name
    }

    // 相当于Person.prototype.sayName
    sayName() {
        console.log(this.name)
    }
}
var p = new Person('zmj')
p.sayName()

与ES5写法的区别:

1. 类声明不会被提升, 与 let 相似
2. 所有代码都处于严格模式
3. 不可枚举

其实上面的类结构等价于下面的代码

let Person = (function () {
    "use strict"
    const Person = function(name) {
        this.name = name
    }

    Object.defineProperty(Person.prototype, 'sayName', {
        value: function() {
            console.log(this.name)
        },
        enumerable: false,
        writable: true,
        configurable: true
    })

    return Person
})()

var p = new Person('zmj')
p.sayName()

3. 静态成员

首先要理解静态成员的含义.

静态成员是类所有的, 不需要创建实例就可以调用(通过类名直接调用)

在ES5中的例子

var Person = function(name) {
    this.name = name
}

Person.create = function(name) {
    return new Person(name)
}

Person.prototype.sayName = function() {
    console.log(this.name)
}

var p = Person.create('zmj')
p.sayName()

Person.create就是所谓的静态方法. 它的数据不依赖任何类的实例

可以直接通过类名.方法名直接调用, 不需要new一个新的实例

在ES6中简化了该操作, 只要在方法名上加上static即可.

class Person() {
    static create(name) {
        return new Person(name)
    }
}

4. 继承

在ES5中, 实现继承是一个很麻烦的事情.

实现一个继承, 父类是一个矩形类, 子类是正方形类

function Reactangle(length, width) {
    this.length = length
    this.width = width
}

Reactangle.prototype.getArea = function() {
    return this.length * this.width
}

function Square(length) {
    Reactangle.call(this, length, length)
}

Square.prototype = Object.create(Reactangle.prototype, {
    constructor: {
        value: Square,
        enumerable: true,
        writable: true,
        configurable: true
    }
})

var square = new Square(3)
square.getArea()

必须用Object.create 关联子类和父类的原型, 并且在子类的构造方法中还要使用Reactangle.call()方法

用ES6重写

class Rectangle {
    constructor(length, width) {
        this.length = length
        this.width = width
    }

    getArea() {
        return this.length * this.width
    }
}

class Square extends Rectangle {
    constructor(length) {
        // 与 Rectangle.call(this, length, length) 相同
        super(length, length)
    }
}

var square = new Square(3)

标签：function,ES6,ES5,name,sayName,Person,length,new,class
来源： https://blog.csdn.net/qq799028706/article/details/88073038

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。