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

# 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();