title: JavaScript面向对象编程（构造函数，new，this）
date: 2018-10-12 12:08:50
tags: [JavaScript]
categories: JavaScript
什么是面向对象
面向对象程序设计（Object-oriented programming，简称OOP），概念如下：
把一组数据结构和处理它们的方法组成对象（object），把相同行为的对象归纳为类（class），通过类的封装（encapsulation）隐藏内部细节，通过继承（inheritance）实现类的特化（specialization）／泛化（generalization），通过多态（polymorphism）实现基于对象类型的动态分派（dynamic dispatch）。
上面这段话根本看不懂什么意思，还是先来理解一下面向对象的一些术语吧：
Class 类
定义对象的特征。它是对象的属性和方法的模板定义.
Object 对象
类的一个实例。
Property 属性
对象的特征，比如颜色。
Method 方法
对象的能力，比如行走。
Constructor 构造函数
对象初始化的瞬间, 被调用的方法. 通常它的名字与包含它的类一致.
Inheritance 继承
一个类可以继承另一个类的特征。
Encapsulation 封装
一种把数据和相关的方法绑定在一起使用的方法.
Abstraction 抽象
结合复杂的继承，方法，属性的对象能够模拟现实的模型。
Polymorphism 多态
多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。
面向对象的四个核心概念：抽象、继承、封装、多态 。
命名空间
与其他面向对象编程语言不同，Javascript中创建普通对象和命名空间在写法上没有区别。比如var MySpace = {}，从语言层面上，可以理解成创建了一个名为MySpace的对象，也可以理解为一个名为MySpace的命名空间，到底应该理解成哪一种主要是看你如何使用它。
JavaScript命名空间：一个全局对象被创建，所有的变量，方法和功能成为该对象的属性。使用命名空间也最大程度地减少应用程序的名称冲突的可能性。
举例：
我们来创建一个全局变量叫做 example
var example = example || {};
在上面的代码示例中，我们首先检查example是否已经被定义。
如果是的话，那么使用现有的example全局对象；否则，创建一个名为example的空对象用来封装方法，函数，变量和对象。
然后我们就可以创建子命名空间：
example.event = {};
类
JavaScript是一种基于原型的语言。JavaScript可封装一个函数作类。
举例：
function Person() { }
var Person = function(){ } // 也可以这么写
对象（类的实例）
我们使用 new obj 创建对象obj 的新实例, 将结果（obj 类型）赋值给一个变量方便稍后调用。
举例：我们定义了一个名为Person的类，然后我们创建了两个Person的实例(person1 和 person2).
function Person() { }
var person1 = new Person();
var person2 = new Person();
构造函数
- “类”就是对象的模板，对象就是“类”的实例。
- JavaScript 语言的对象体系，基于构造函数（constructor）和原型链（prototype）。
- JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓构造函数，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。
例如：
function Person(name) { // 这就是一个构造函数
this.name = name;
}
为了与普通函数区别，构造函数名字的第一个字母通常大写。
构造函数的特点有两个：
- 函数体内部使用了this关键字，代表了所要生成的对象实例。
- 生成对象的时候，必须使用new命令。
下面将详细介绍一下new命令和this关键字。
new 命令
new命令的作用，就是执行构造函数，返回一个实例对象。
ES6有 class 关键字，我们先用ES5使用函数来模拟类：
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function(){
console.log( 'Hi, I am ' + this.name)
}
var allen = new Person('Allen')
allen.sayHello // Hi, I am Allen
上面代码通过new命令，让构造函数Person生成一个实例对象，保存在变量allen中。这个新生成的实例对象，从构造函数Person得到了name属性和sayHello方法。
使用new，JS其实默默做了这些事情：
var 临时对象 = {}临时对象.__proto__ = Person.prototype // 帮我绑定原型临时对象.name = namereturn 临时对象
例子：
function fn(){
console.log(this)
}
new fn()
- 请问这个 this 有哪些属性？这个 this 的原型有哪些属性？
this 有属性：__proto__(指向fn.prototype)
原型的属性有constructor: fn 和__proto__(指向Object.prototype)
this关键字
- 什么是this，最本质的概念是：this就是你 call 一个函数时，传入的第一个参数。
- 如果是封装过的函数（比如onclick()、addEventListener()等），如何判断this
- 看源码中对应的函数是怎么被 call 的（这是最靠谱的办法）
- 看文档
- console.log(this)
- 不要瞎猜，很可能猜错
- this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。
例子1：
function a(){
var user = 'Allen';
console.log(this.user); //undefined
console.log(this); //Window
}
a();
例子2：
function X() {
return obj = {
name:'obj',
fn1(x) {
x.fn2()
},
fn2() {
console.log(1)
console.log(this)
}
}
}
var options = {
name:'options',
fn1() {},
fn2() {
console.log(2) // 执行的是这里 打印2
console.log(this) // 执行的是这里 打印options对象
}
}
var x = X()
x.fn1(options)
记住，this永远指向的是最后调用它的对象。
例子3：
function fn1()
{
this.user = 'Allen';
return {};
}
var a = new fn1;
console.log(a.user); //undefined
function fn2()
{
this.user = 'Allen';
return 1;
}
var a = new fn2;
console.log(a.user); //Allen
如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。
