【JavaScript 14】对象 构造函数 new命令 实例对象 直接调用 全局对象 全局变量 ‘use strict‘命令 new的原理 new.target属性 Object.create()

对象

OOP是现在主流的编程范式
Object Oriented Programming
每个对象都是一个功能中心，分工明确，可以接受信息，处理数据，输出信息
对象可以复用，通过继承还可以定制
因此OOP灵活，代码可复用，高度模块化，易于开发与维护
相对于一系列函数与命令组成的传统过程式编程（procedual programming）更适合多人合作的大型项目
对象的理解：

1. 单个实物的抽象
2. 封装有**属性（property）和方法（method）**的容器
   属性是对象的状态，方法是对象的行为

构造函数

面向对象编程的首步是生成对象
通常需要一个用于表示某类实物共同特征的模版，而后对象根据模版生成

我们学过的OOP语言如Java和C++都有类（class）的概念
类是对象的模版，对象是类的实例
但是JS的对象体系不是基于类，而是基于构造函数（constructor）和原型链（prototype）

JS使用构造函数作为对象模版，描述实例对象的基本结构
constructor是专门用于生成实例对象的函数，可以生成多个具有相同结构的实例对象

构造函数是普通函数，但是具有自己的特征和用法

var Vehicle = function () {
	this.price = 1000;
};

上面代码中，Vehicle就是构造函数
为了与普通函数区别，构造函数名字的第一个字母通常大写
constructor的特点有二：

1. 函数体内部使用 this 关键字，代表所要生成的对象实例
2. 生成对象时必须使用 new 命令

new 命令

1 基本用法

new命令的作用就是执行构造函数，返回一个实例对象

var Vehicle = function () {
	this.price = 1000;
};

var v = new Vehicle();
v.price // 1000

上面代码通过new命令，让构造函数Vehicle生成一个实例对象，保存在变量v中
新生成的实例对象，从构造函数Vehicle得到了price属性

使用new命令时，根据需要，构造函数也可以接受参数

var Vehicle = function (p) {
	this.price = p;
};

var v = new Vehicle(500);

new命令本身即可执行构造函数
因此后面的构造函数可以带括号也可以不带括号
下面的两行代码是等价的，但是为了表示函数调用推荐使用括号

// 推荐的写法
var v = new Vehicle();
// 不推荐的写法
var v = new Vehicle;

若忘记使用new命令，直接调用构造函数会发生什么事ni
此时构造函数会成为普通函数，不会生成实例对象
并且this此时代表全局对象，可能会出现想象不到的结果

var Vehicle = function () {
	this.price = 1000;
};

var v = Vehicle();
v // undefined
price // 1000

上面代码中调用Vehicle构造函数时，忘了加上new命令
结果变量v变成了undefined，而price属性变成了全局变量
因此应该非常小心，避免不使用new命令，直接调用构造函数

为了保证构造函数必须与new命令一起使用
可以在构造函数内部使用严格模式
之后一旦忘记使用new命令直接调用构造函数即会报错

function Fubar(foo, bar) {
	'use strict';
	this._foo = foo;
	this._bar = bar;
}

Fubar()
// TypeError: Cannot set property '_foo' of undefined

上面代码的Fubar为构造函数，'use strict’命令保证了该函数在严格模式下运行
由于严格模式中，函数内部的this不能指向全局对象，默认等于undefined，又因为JavaScript 不允许对undefined添加属性，导致不加new调用会报错

另一个解决办法，构造函数内部判断是否使用new命令，如果发现没有使用，则直接返回new一个实例对象

function Fubar(foo, bar) {
	if (!(this instanceof Fubar)) {
		return new Fubar(foo, bar);
	}

	this._foo = foo;
	this._bar = bar;
}

Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1

上面代码中的构造函数不管加不加new命令，都会得到同样的结果

2 原理

使用new命令后
紧跟的函数将依次执行以下步骤：

1. 创建空对象作为将要返回的对象实例
2. 将此空对象的原型指向构造函数的prototype属性
3. 将此空对象赋值给函数内部的this关键字
4. 开始执行构造函数内部的代码

也就是说构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上
如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象
否则就会不管return语句，返回this对象

var Vehicle = function () {
	this.price = 1000;
	return 1000;
};

(new Vehicle()) === 1000
// false

上面代码中构造函数Vehicle的return语句返回一个数值
这时new命令就会忽略这个return语句，返回构造后的this对象

但是如果return语句返回的是一个跟this无关的新对象，new命令会返回这个新对象，而不是this对象

var Vehicle = function () {
	this.price = 1000;
	return { price: 2000 };
};

(new Vehicle()).price
// 2000

上面代码中构造函数Vehicle的return语句返回的是一个新对象
new命令会返回这个对象而不是this对象

另一方面如果对普通函数（内部没有this关键字的函数）使用new命令，则会返回一个空对象

function getMessage() {
	return 'this is a message';
}

var msg = new getMessage();

msg // {}
typeof msg // "object"

上面代码中getMessage是一个普通函数返回一个字符串，new命令直接忽略该return语句
对此函数使用new命令，则会得到一个空对象
因为new命令总是返回一个对象，要么是实例对象，要么是return语句指定的对象

new命令简化的内部流程，可以用下面的代码表示

function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
	// 将 arguments 对象转为数组
	var args = [].slice.call(arguments);
	// 取出构造函数
	var constructor = args.shift();
	// 创建一个空对象集成构造函数的prototype属性
	var context = Object.create(constructor.prototype);
	// 执行构造函数
	var result = constructor.apply(context, args);
	// 若返回结果是对象则直接返回，否则返回context对象
	return (typeof result === 'object' && result != null) ? result : context;
}

// 实例
var actor = _new(Person, '张三', 28);

3 new.target

函数内部可以使用new.target属性
如果当前函数是new命令调用，new.target指向当前函数，否则为undefined

function f() {
	console.log(new.target === f);
}

f() // false
new f() // true

使用这个属性，可以判断函数调用的时候，是否使用new命令
下面的构造函数f调用时，没有使用new命令，就抛出一个错误

function f() {
	if (!new.target) {
		throw new Error('请使用 new 命令进行调用！');
	}
	// ...
}

f() // Uncaught Error: 请使用 new 命令调用！

Object.create() 创建实例对象

构造函数作为模板可以生成实例对象
但是有时拿不到构造函数，只能拿到一个现有的对象
我们希望以这个现有的对象作为模板生成新的实例对象，这时就可以使用Object.create()方法

var person1 = {
	name: 'Zane';
	age: 21;
	greeting: function() {
		console.log('Hi! I\'m ' + this.name + '.');
	}
};

var person2 = Object.create(person1);

person2.name // Zane
person2.greeting() // Hi! I'm Zane.

上面代码中对象person1是person2的模板，后者继承了前者的属性和方法