ES5中的构造函数与ES6中的类class

刚开始接触ES6的相关知识，决定把每个知识点都整理记录下来，以便形成系统知识。

传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！

一、类的由来及简介

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。即如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。如下案例一所示：

案例一

//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
function Person(name,age) {
    this.name = name;
    this.age=age;
}
Person.prototype.say = function(){
    return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",88);//通过构造函数创建对象，必须使用new 运算符
console.log(obj.say());//我的名字叫laotie今年88岁了

构造函数生成实例的执行过程：

1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
2.将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。
3.执行构造函数的代码。
4.返回新对象（后台直接返回）;

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统面向对象语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。不过基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以实现，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

案例一的代码用 ES6 的class改写如案例二所示：

案例二

class Person{//定义了一个名字为Person的类
    constructor(name,age){//constructor是一个构造方法，用来接收参数
        this.name = name;//this代表的是实例对象
        this.age=age;
    }
    say(){//这是一个类的方法，注意千万不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Person("laotie",88);
console.log(obj.say());//我的名字叫laotie今年88岁了

案例二的代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Person，对应 ES6 的Person类的构造方法。

注意事项：
1.在类中声明方法的时候，千万不要给该方法加上function关键字；
2.方法之间不要用逗号分隔，否则会报错。

ES6中的类其实就是构造函数的另外一种写法！即prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。 代码如案例三所示：

案例三

console.log(typeof Person);//function
console.log(Person===Person.prototype.constructor);//true

由案例三可知：类实质上就是一个函数。类自身指向的就是构造函数。

构造函数的prototype属性，在 ES6 的“类”上面继续存在。如案例四所示：

案例四

console.log(Person.prototype);//输出的结果是一个对象

案例二、三、四结果如下图所示：

实际上类的所有方法都定义在类的prototype属性上。 代码如案例五所示：

案例五

Person.prototype.say=function(){//定义与类中相同名字的方法。成功实现了覆盖！
    return "我是来证明的，你叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",88);
console.log(obj.say());//我是来证明的，你叫laotie今年88岁了

由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。 如案例六所示：

案例六

Person.prototype.addFn=function(){
    return "我是通过prototype新增加的方法,名字叫addFn";
}
var obj=new Person("laotie",88);
console.log(obj.addFn());//我是通过prototype新增加的方法,名字叫addFn

还可以通过Object.assign方法来为对象动态增加方法。（Object.assign方法可以很方便地一次向类添加多个方法。） 如案例七所示：

案例七

Object.assign(Person.prototype,{
    getName:function(){
        return this.name;
    },
    getAge:function(){
        return this.age;
    }
})
var obj=new Person("laotie",88);
console.log(obj.getName());//laotie
console.log(obj.getAge());//88

案例五、六、七的结果如下图所示：

constructor方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法。即使用的时候，直接对类使用new命令，跟构造函数的用法完全一致。 代码如案例八所示：

案例八

class Box{
    constructor(){
        console.log("啦啦啦，今天天气好晴朗");//当实例化对象时该行代码会执行。
    }
}
var obj=new Box();

案例八结果如下图所示：

constructor方法如果没有显式定义，会隐式生成一个constructor方法。所以即使你没有添加构造函数，构造函数也是存在的。constructor方法默认返回实例对象this，但是也可以指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。

指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。代码如案例九所示：

案例九

class Desk{
    constructor(){
        this.xixi="我是一只小小小小鸟！哦";
    }
}
class Box{
    constructor(){
       return new Desk();// 这里没有用this哦，直接返回一个全新的对象
    }
}
var obj=new Box();
console.log(obj.xixi);//我是一只小小小小鸟！哦

案例九结果如下图所示：

constructor中定义的属性可以称为实例属性（即定义在this对象上），constructor外声明的属性都是定义在原型上的，可以称为原型属性（即定义在class上)。hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值， true说明是实例属性，false说明不是实例属性。in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。

代码如案例十所示：

案例十

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box=new Box(12,88);
console.log(box.hasOwnProperty("num1"));//true
console.log(box.hasOwnProperty("num2"));//true
console.log(box.hasOwnProperty("sum"));//false
console.log("num1" in box);//true
console.log("num2" in box);//true
console.log("sum" in box);//true
console.log("say" in box);//false

案例十结果如下图所示：

类的所有实例共享一个原型对象，它们的原型都是Person.prototype，所以同一个类的所有实例对象的proto属性是相等的。 代码如案例十一所示：

案例十一

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
//box1与box2都是Box的实例。它们的__proto__都指向Box的prototype
var box1=new Box(12,88);
var box2=new Box(40,60);
console.log(box1.__proto__===box2.__proto__);//true

案例十一结果如下图所示：

由此，也可以通过proto来为类增加方法。使用实例的proto属性改写原型，会改变Class的原始定义，影响到所有实例，所以不推荐使用！ 代码如案例事儿所示：

案例十二

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box1=new Box(12,88);
var box2=new Box(40,60);
box1.__proto__.sub=function(){
    return this.num2-this.num1;
}
console.log(box1.sub());//76
console.log(box2.sub());//20

案例十二结果如下图所示：

class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义。 代码如案例十三所示：

案例十三

//ES5可以先使用再定义,存在变量提升
new A();
function A(){
}

案例十四

//ES6不能先使用再定义,不存在变量提升 会报错
new B();//B is not defined
class B{
}

案例十三、案例十四结果如下图所示：

另外，类的内部所有定义的方法，都是不可枚举的（non-enumerable）。如案例十五所示：

案例十五

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
// 枚举Point类内部定义的属性
console.log(Object.keys(Point.prototype));// []
// 获取Point类的自有属性
console.log(Object.getOwnPropertyNames(Point.prototype));// ["constructor","toString"]

案例十五结果如下图所示：

案例十五代码中，toString方法是Point类内部定义的方法，它是不可枚举的。这一点与 ES5 的行为不一致。采用 ES5 的写法，toString方法就是可枚举的。如案例十六所示：

案例十六

var Point = function (x, y) {
  // ...
};

Point.prototype.toString = function() {
  // ...
};

console.log(Object.keys(Point.prototype))
// ["toString"]
console.log(Object.getOwnPropertyNames(Point.prototype))
// ["constructor","toString"]

案例十六结果如下所示：

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。 数组中枚举属性的顺序与通过 for…in 循环（或 Object.keys）迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

二、总结

1、ES6中的class是由于为了方便面向对象的开发人员更容易理解js的面向对象，因此定义了class类的概念，用于封装js原有的构造函数；
2、类实质上就是一个函数。类自身指向的就是构造函数。 3、Object.assign方法可以很方便地一次向类添加多个方法。
4、可以通过proto来为类增加方法。使用实例的proto属性改写原型，会改变Class的原始定义，影响到所有实例，所以不推荐使用！
5、constructor方法如果没有显式定义，会隐式生成一个constructor方法。所以即使你没有添加构造函数，构造函数也是存在的。constructor方法默认返回实例对象this，但是也可以指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。
6、类的所有实例共享一个原型对象，它们的原型都是Person.prototype，所以同一个类的所有实例对象的proto属性是相等的。
7、class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义。
8、类的内部所有定义的方法，都是不可枚举的（non-enumerable）。

参考文献

链接：https://www.jianshu.com/p/86267fab4878