JS中对象的进化史

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_38102188/article/details/83619333

• 阶段1
  人们习惯用字面量的形式定义对象：

var obj =  {
	name: 'zyp',
	age: 18,
	like: function() {
   	console.log('爱睡觉！')
   }
   /**  ES6写法
   **	like() {
   **	console.log('爱睡觉！')
   **	}
}

这时如果人们想批量定义100个objs时（这些objs往往具有相同的属性），不得不重复定义100遍obj，这样不仅代码繁杂，因为每个对象都会在堆内存中占用一定的空间，因此非常的浪费内存。

• 阶段2
  这时人们想到不是可以用函数的方式返回对象吗？那么我们就可以使用构造函数来返回对象吧。但是这个专门用来返回对象的函数为了能和其他的函数区分开来，一般用大写字母开头，同时我们可以把那些公用的属性定义在原型链上，这样这些共有属性就存在同一块内存中了，不是可以节省很多开销了吗？

function Obj(name, age) {
   var obj = {};
   obj.name = name;
   obj.age = age;
   obj.__proto__ = Obj.prototype
   return obj;
}
//假设大家的共同爱好是睡觉啊
Obj.prototype = {
   constructor: Obj,
   like: function() {   //当然这里函数也可以采用ES6的方法定义
   	console.log('爱睡觉！') 
   }
}

• 阶段3
  这时出现了new关键字，这个关键字其实是一个语法糖，它帮我们将代码进行了简化，这样我们在定义构造函数时就可以这样定义了：

function Obj(name, age) {
   this.name = name;
   this.age = age;
}
Obj.prototype = {
   constructor: Obj,
   like: function() {   //当然这里函数也可以采用ES6的方法定义
   		console.log('爱睡觉！') 
   	}
}

我们可以看到，new关键字自动帮我们写了以下代码：

	var obj = {};
	obj.__proto__ = Obj.prototype
   return obj;

• 阶段4
  ES6中直接用class的写法代替了构造函数的写法

class Obj {
   constructor(name, age) {
   	this.name = name;
   	this.age = age;
   }
   like() {
   	console.log('爱睡觉！') 
   }
}

这里class其实也是一个语法糖，它也帮我们省略了

   constructor: Obj,