# JS如何定义一个类分别用Es5和Es6来实现

# 快速导航

# 前言

类是面向对象编程语言最基础,最核心的概念,正因为有了类,才可以拓展延伸出具有相同的属性和函数的对象类

对象的特点,就是它可以拥有属性和方法,而在Es6之前,并没有提供类的支持,它是用构造函数来模拟类来实现的

那用Es5和Es6分别怎么实现一个类呢

# 具体示例

# Es5实现的类

// 用function 模拟一个类,同时也作为构造函数,首字母大写,用于区分普通函数
function MyClass() {
    // 私有属性
    this.name;   // 类的成员变量name属性
    // 私有方法,类的成员函数fun,每次实例化对象,都会重复创建对象,会造成内存空间的浪费,增加cpu开销
    // 可以把私有的方法放到外面去
    this.fun = function() {  
        alert("my functon name"+this.name);
    }
    // 如下等价
    //this.fun = fun
}

/**
 * function fun() {
 *   alert("my functon name"+this.name);
 * }
 * 
 */

// 公有属性,利用原型对象可以解决实例化对象,避免重复创建构造函数内的方法创建
MyClass.prototype.outName = function() {
    alert(this.name)
}

var obj = new MyClass();  // 使用new实例化一个类
obj.name = 'itclanCoder'; // 为成员变量赋值
obj.fun();                // 调用成员函数
obj.outName();      // itclanCoder
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

以上是使用Es5的构造函数实现一个类,添加属性和方法,其中构造器函数内的自定义方法,可以抽离到外部,避免重复创建,可以提升性能

# Es6实现类

具体代码如下所示

class MyClass {
    // 通过construcor关键字来定义构造函数,添加了一个私有name属性
    constructor(name) {
        this.name = name;
        this.fun = function() {
            alert('my function name'+this.name);
        }
    }
    // 等价于上面的MyClass.prototype.outName,共有方法
    outName() {
        alert(this.name);
    }
} 

let obj = new MyClass('itclanCoder');  // 类可以传递参数
obj.fun();
obj.outName();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 对比

可以看出使用Es6中的类class创建自定义属性和方法,要简单和直观得多

自定义属性,放在constoructor构造器函数内,每一个类都会默认有这个constructor

# 分析

js中没有提供类的定义,但是提供new关键字,它的含义是返回一个实例化对象,并执行相应的函数的调用

本示例代码首先定义了一个函数MyClass,它类似java语言的构造函数,当使用new语句时,JS创建了一个对象,并执行该函数

该函数内部的this就指向刚刚创建的对象,这样就实现了面向对象语言中类的定义和使用

当然在Es6中提供了class定义类的,这样更加方便的

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐