ES6class与ES5 构造函数区别及联系

首先我们来了解一下类定义

类

类是用来描述现实事物的，由属性和行为组成。可以看成是一类事物的模板，使用事物的属性特征和行为特征来描述该类事物。

constructor

一个类只能有一个constructor方法
在function定义的构造函数中，其prototype.constructor属性指向构造器自身
在class定义的类中，constructor其实也相当于定义在prototype属性上

class Pon{
  constructor(a) {
    // ...这了可以定义实例属性
    this.a = a;
  }
 int(){   }
}

// 等同于
function Pon(){
	 this.a = a;
}
Pon.prototype.int= function (){   }

ES6 class与ES5 构造函数区别

声明区别

ES6 中的 class 是不可以重复定义的重复定义是会报错的

ES5中的function 声明构造函数会却覆盖之前定义的方法

class没有变量提升是没有变量提升的
function 声明构造函数会却变量提升（js预编译）

枚举区别

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

  int() {
	console.log(x,y)
  }
}
Object.keys(Point.prototype)
Object.getOwnPropertyNames(Point.prototype)

 function Point1 (x, y) {
	this.x = x;
	this.y = y;
};
Point1.prototype.int = function() {
 console.log(x,y)
};
Object.keys(Point1.prototype)
Object.getOwnPropertyNames(Point1.prototype)

class中定义的方法不可用Object.keys(Point.prototype)枚举到
function构造器原型方法可被Object.keys(Point.prototype)枚举到
但是不管是class还是function，constructor属性默认不可枚举

ES6中的Object.getOwnPropertyNames()可以枚举到每个属性

调用区别

class必须使用new调用，不用new调用会报错。普通构造函数不用new也可以执行。

class Point {
	constructor(x, y) {
		this.x = x;
		this.y = y;
	}
	
	int() {
		console.log(x,y)
	}
}
const p = new Point()
console.log(p)
const p1 = Point()
console.log(p1)

function Point1(x, y) {
	this.x = x;
	this.y = y;
};
Point1.prototype.int = function() {
   console.log(x,y)
};
const pf = new Point1()
console.log(pf)
const pf1 = Point1()
console.log(pf1)

new.target属性指向当前的构造函数,不能在构造函数外部调用会报错，

function Person(name) {
	console.log(new.target);
		  if (new.target !== undefined) {
		    this.name = name;
		  } else {
		    throw new Error('必须使用new生成实例');
		  }
	}
}

静态属性的区别

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。
class内部没有静态属性，只能在外面通过类名定义

class Foo {
}
Foo.x= 1;xx
Foo.x // 1
上面的写法为Foo类定义了一个静态属性x
 ES6 明确规定，Class 内部只有静态方法，没有静态属性。

calss的关键字static 只能在class中使用 .定义的静态方法前加static关键字。

class Point {
	static x = 1;
	static y = 2;	
	static int() {
		console.log(this.x)
	}
}

class Point {
	constructor(){
		static x = 1;
		static y = 2;
	}
		
	static int() {
		console.log(this.x)
	}
}