Javascript构造函数

也许你会问为什么我们的教程要在对象和函数之间来回穿插，这是因为对象和函数在Javascript中有很深的关系，函数本身也是是一种对象，而对象又是通过函数创建的。

JavaScript不是严格意义面向对象的语言，通常叫做基于对象的语言，如果你学习过其他面向对象的语言，可能会比较困惑，因为JavaScript中没有class,但并不意味着JavaScript中没有类，这只是说法的不同，在ES6之前class不是关键字，JavaScript通过构造函数来模拟类，用new操作符调用函数就实现了实例化一个对象，这个对象具有构造函数定义的变量（属性）和函数（方法）。

任何函数，只要通过 new 操作符来调用，那它就可以作为构造函数，构造函数也叫构造器。

构造函数有点像生产对象的模具，假设有一个生产五金的厂家，生产一种产品之前需要开模，如要生产一个扳手，那么可以首先制作扳手模具，我们就叫它Spanner，已经规定了大小形状等等，生产一把扳手只要new一次就可以，我们可以把构造函数的参数想象成原材料，用这个方法：new Spanner(‘Fe’)，我们制作了一把铁扳手。

var Spanner= function (material) {
	this.material= material;
}
var s1 = new Spanner("Fe");   //实例化了一个铁扳手
var s2 = new Spanner("Cu");   //实例化了一个铜扳手

一、构造函数与普通函数的区别

在这之前我们讲过的函数是普通函数,实际上构造函数与普通函数没有本质上的区别，它们的最重要的区别在于调用它们的目的不同，一个函数既可以像普通函数那样调用，也可以用构造函数的方式（new关键字）调用。

function fun() {
  console.log(this);
  return 1;
}
console.log(fun());	//普通函数调用方式
console.log(new fun());	//构造函数调用方式

1. 构造函数用new关键字调用

这样调用的结果是返回一个对象，我们也称之为实例化，返回的对象也称为构造函数的实例。

2. 构造函数内部使用this关键字

在构造函数内部，this指向的是构造出的新对象。用this定义的变量或函数，就是实例的属性和方法。需要用实例才能访问到，不能用类型名访问。

3.函数内部this指向不同

• 普通函数的this指向是执行上下文被创建时确定的。
  在一个函数环境中，this由调用者决定，函数作为对象的方法调用时this指向这个对象，独立调用时严谨模式this指向undefined，非严谨模式下this指向window。
• 构造函数的this也是执行上下文被创建时确定的。this指向的是构造出的新对象。

"use strict";
var Spanner= function (material) {
  console.log(this);  //普通函数独立调用时打印window或undefined,构造函数调用方式打印Spanner {}
  this.material= material;
}
console.log(Spanner("Fe")); //undefined
console.log(new Spanner("Fe")); //Spanner {material: "Fe"}

4. 构造函数默认不需要return返回值

构造函数是不需要用return显式返回值的，默认会返回this，也就是新的实例对象。
当手动添加返回值后（return语句）：
return基本数据类型–>真正的返回值还是那个新创建的对象
return复杂数据类型（对象）–>真正的返回值是这个对象

5. 构造函数命名建议首字母大写

这样做是为了与普通函数区分开，并不是命名规范，但是大部分编码人员会遵守这一规则。

二、使用new关键字实例化的时候发生了什么？

var s1=new Spanner();

当我们写下这段代码时，解释器实际上做了这些事情：

var s1= {};   //1 首先创建一个新的临时对象
s1.__proto__ = Spanner.prototype;      //2 将构造函数Spanner的原型对象赋值给对象的__proto__属性
Spanner.call(s1);      //执行构造函数Spanner,并改变函数Spanner作用域中的this为s1

1. 首先创建一个空的对象:var s1= {};
2. 新对象的_proto_属性指向构造函数的原型对象。
3. 将构造函数的作用域赋值给新对象->this指向新对象。
4. 执行构造函数内部的代码->为新对象s1添加属性。
5. 返回新对象。

三、构造函数的原型对象prototype

JS中函数本身包含一个属性prototype，称之为原型，而prototype的属性值还是一个对象。如果作为普通函数其prototype似乎没有什么意义，但作为构造函数，原型就很重要。
原型对象怎么来理解呢？还是刚才的扳手的例子，扳手的材料是每个扳手（对象）的自有属性，“修改一个对象的自有属性，不会对其他对象产生影响”；
同一个模具生产的扳手，必然有相同的大小、形状等等。也就是这类对象的共有的属性，一旦修改了原型，这些对象相应的属性都会随之变化，这些属性被称为继承属性。

var Spanner= function (material) {
	this.material= material;
}
Spanner.prototype.width=100;
Spanner.prototype.operation=function(){
	console.log('扭螺丝');
}
console.log(new Spanner("Fe"));
console.log(new Spanner("Cu"));

在控制台中，我们看到的两个对象是这样的：它们有相同的__proto__，__proto__属性指向的就是构造函数的原型对象。

prototype对象默认有一个属性constructor，指向这个函数本身。

PS:prototype和__proto__的区别，在上图中我们打印出的对象包含属性__proto__，它指向构造函数的prototype属性，是不是有一点蒙?记住:__proto__是对象的属性，prototype是函数特有的属性，函数也是对象，所以函数有prototype和__proto__属性。
instanceof运算符用于判断一个实例是否属于某种类型, instanceof可以在继承关系中用来判断一个实例是否属于它的父类型。

下面的代码中，可以看到s1是Spanner的实例，所以属于Spanner类型，在原型链(proto)中又属于Object类型。

四、给一个实例对象设置属性值

当给一个实例对象设置属性值时，会在实例对象中找这个属性：

• 找到：直接把值赋给这个属性；
• 没找到：会直接给这个实例对象添加一个新的自有属性，并不会再去原型对象中找该属性，即使原型对象中有这个属性，也不会改变原型对象中的这个值。

//定义构造函数Person
function Person(name,gender){
  this.name=name;
  this.gender=gender;
};
//重写构造函数的原型对象
Person.prototype={
  constructor:Person,
  name:'人类',
  walkingMode:'直立行走',
  genders:['male','female'],
  say:function () {
  }
};
//给一个实例对象设置属性值
var p1=new Person('Perter','male');
p1.name='彼得';
p1.walkingMode='爬行';
p1.genders.push('第三性');
console.log(p1);

PS:虽然说了实例对象不能改变构造函数的原型，但是这么说并不确切，上例中，原型对象的属性genders是个数组，在实例对象中给数组增加一个元素，客观上就改变了原型。

实例对象和原型对象命名冲突问题

当实例对象中和原型对象中存在同名的属性时，通过对象.属性名或者对象[‘属性名’] 方式访问的是实例对象中的自有属性（屏蔽法则），如果删除实例中的属性或方法，或在实例后加上__proto__属性可以访问原型中的方法和属性。
在上面的对象p1中，有自有属性walkingMode和继承属性walkingMode

console.log(p1.walkingMode);  //爬行
console.log(p1.__proto__.walkingMode);  //直立行走
delete p1.walkingMode;
console.log(p1.walkingMode);  //直立行走