欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Class语法简介

程序员文章站 2022-03-04 10:12:32
一、与 es 5 的对比 es 6 通过 class 来创建类,并实现类的继承。 具体创建方式如下: // es 5 function man(name, age) { // 在构造函数中添...

一、与 es 5 的对比

es 6 通过 class 来创建类,并实现类的继承。

具体创建方式如下:

// es 5
function man(name, age) {
// 在构造函数中添加每个实例的私有属性
    this.name = name;
    this.age = age;
}
man.prototype = {
// 在原型中添加公共属性及方法
    job: 'it',
    sayname() {
        console.log(this.name);
    }
}
const xh = new man('xiaohong', 18);
const xm = new man('xiaoming', 20);
xh.sayname(); // xiaohong
xm.sayname(); // xiaoming

// es 6 

class man {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayname() {
        console.log(this.name)
    }
}
const xh = new man('xiaohong', 18);
const xm = new man('xiaoming', 20);
xh.sayname(); // xiaohong
xm.sayname(); // xiaoming

仔细观察不难发现两者的区别及相似之处:

声明方式。

前者通过创建构造函数 man ,后者则是使用 class 声明一个类 man.

实例私有属性的添加。

前者通过在构造函数中实现,后者则是在 constuctor 方法中实现。不过他们的实现方式相同。

实例公共方法的添加。

前者通过原型 man.ptototype 来添加公共方法及属性,后者通过在 constructor 中直接添加私有方法(当然,也可以通过 prototype 方法),但,不能在 class 内部实例公共的属性,不过可以通过下面这种方法:

// 错误的做法
class a {
 a = 'fasf'; 
}
// 正确的做法
class a {...}
a.prototype.x = x;

调用方式。

他们都是通过 new 方法调用来生成实例对象,但前者可以直接调用 man 方法,后者直接调用(man())则会报错。

其实, es 6 是 es 5 的一个语法糖而已,class 语法也只是将 es 5 的语法进行了封装,在 es 6 中,constructor 方法相当于构造函数,默认返回实例对象。

而定义在 constructor 之外的方法,相当于在类的 prototype 中写方法。

二、this 指向

在 class 中,this 指向实例对象。

但是一旦在外部调用类中的方法,this 的指向就会发生变化,所以,我们通常会在 constructor 中通过 bind 方法来绑定当前 this.

class man {
    constructot() {
        this.sayname = this.sayname.bind(this);
        }
        sayname() {
            console.log(this.name)
        }
    }
   class a {...}
   a.prototype.x = x;