【JS】构造函数（自定义）

构造函数（自定义）：主要的作用就是创造对象，实现可重用的对象创建代码

基本语法

• 相当于普通函数，但是有2个约定：

1. 它们只能由 "new" 操作符来执行（必须）
2. 它们的命名以大写字母开头（只是一种规范，不大写也行）

• 当一个函数被使用 new 操作符执行时，它按照以下步骤：

1. 一个新的空对象被创建并分配给 this。
2. 函数体执行。通常它会修改 this，为其添加新的属性。
3. 返回 this 的值。

function User(name) {
  // this = {};（隐式创建）

  // 添加属性到 this
  this.name = name;
  this.isAdmin = false;

  // return this;（隐式返回）
}
var user = new User("jack");
console.log(user)
/*
{
    "name": "jack",
    "isAdmin": false
}
*/

• 不写 new 的时候就是普通函数调用，没有创造对象的能力

function Person(){};
var oa = new Person();	//能得到一个空对象
var oz = Person();	//什么也得不到，这个就是普通函数调用

• 如果没有参数，我们可以省略 new 后的括号（但是规范不建议这样做）

function Person(){};
var oa = new Person();	// 能得到一个空对象
var oz = new Person;	// 能得到一个空对象

• 构造函数内部的 this ，由于和 new 连用的关系，是指向当前实例对象的
• 每次 new 的时候，函数内部的 this 都是指向当前这次的实例化对象

function Person(){
	console.log(this);
}
var oa = new Person();	// 本次调用的时候，this => oa
var oz = new Person();	// 本次调用的时候，this => oz

• 通常，构造器没有 return 语句，也不建议写 return 语句。
• 它们的任务是将所有必要的东西写入 this，并自动转换为结果。

1. 如果 return 返回的是一个对象，则返回这个对象，而不是 this。
2. 如果 return 返回的是一个原始类型，则忽略。

添加方法

• 我们在使用构造函数的时候，可以通过一些代码和内容向当前的对象中添加一些内容

function Person(){
	this.name = 'jack';
	this.age = 18;
}
var oa = new Person();
// 我们得到的两个对象里面都有自己的成员 name 和 age
console.log(oa);
/*
{
	name: 'jack',
	age: 18
}
*/

• 写构造函数的时候，添加一些方法进去

function Person(){
	this.name = 'jack';
	this.age = 18;
	this.sayHi = function(){
		console.log('hello world');
	}
}
var oa = new Person();
var oz = new Person();
oa.sayHi()	//  'hello world'
oz.sayHi()	//  'hello world'

• 但是上例有个缺点： 一摸一样的函数出现了两次，占用了两个空间地址

function Person(){
	this.name = 'jack';
	this.age = 18;
	this.sayHi = function(){
		console.log('hello world');
	}
}
// 第一次 new 的时候，Person这个函数要执行一遍
// 执行一遍就会创造一个新的函数，并且把函数地址赋值给 this.sayHi
var oa = new Person();
// 第二次 new 的时候，Person这个函数要执行一遍
// 执行一遍就会创造一个新的函数，并且把函数地址赋值给 this.sayHi
var oz = new Person();
console.log(oa.sayHi === oz.sayHi)	// false

• 分析：

- 上面的例子，我们两个对象内的sayHi 函数就是一个代码一模一样，功能一模一样
- 但是是两个空间函数，占用两个内存空间
- 也就是说 oa.sayHi 是一个地址，oz.sayHi是一个地址
- 所以我们执行 console.log(oa.sayHi === oz.sayHi) 的到的结果是 false

• 怎么解决这个问题呢？把方法添加到构造函数的原型上就行了

function Person(){
	this.name = 'jack';
	this.age = 18;
	// 在prototype上的属性和方法，会被这个函数new的对象所共享
	Person.prototype.sayHi = function(){
		console.log('hello world');
	}
}
var oa = new Person();
var oz = new Person();
console.log(oa.sayHi === oz.sayHi)	// true