ES6构造函数class

ES6构造函数class

class类

ES6 的语法
ES6 写构造函数的语法

语法：

ES5:

      function Person() { 构造函数体 };
      Person.prototype.sayHi = function () {};
      Person.prototype.play = function () {};

ES6:

class Person {
	constructor () { 构造函数体 };

        // 下面这个 sayHi 和 play 就是 Person.prototype 上面的一个方法
        sayHi () {};
        play () {};
      };

区别：

ES5:
构造函数：构造函数就是函数, 所以可以当作普通函数来调用, 只不过没有创造对象的能力。

ES6:
class 类：不是一个函数, 就是一个 类, 所以不能当作普通函数来调用, 如果要当作普通函数了, 就会直接报错。

// 1. ES5 的构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
};

//ES5 向原型上添加一些方法
Person.prototype.sayHi = function () { console.log('hello world') };

let p1 = new Person('jack', 18);
p1.sayHi();
console.log(p1);

// 因为没有和 new 关键字连用, 所以就没有了创造对象的能力
let p2 = Person();
console.log(p2);





// 2. ES6 的 类（构造函数）
//    Student: 类名
//    class: 定义类的关键字
class Student {
  constructor (name, age) {
    this.name = name;
    this.age = age;

    // 这个位置等价于 ES5 里面的构造函数体
    // 所以这个位置的 this 就是当前实例
    // console.log(this);
  };

  sayHi () {
    console.log('hello class');
    // 这个函数就等价于ES5 原型上的方法
    // 也是一样依靠实例来调用
    // 这里的 this 也是指向当前实例
    // console.log(this);
  };

  play () {
    console.log('play')
  };
  
};

let s1 = new Student('Rose', 20);

s1.sayHi();

console.log(s1);

let s2 = Student();

总结

1、在 ES5 中，向原型上添加方法是
函数.prototype.方法名=function (){}；
2、在 ES6 中的对象的属性都是写在 constructor 关键字里面，方法也都是在原型身上。