JavaScript面向对象编程（构造函数，new，this）

---

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();

---

构造函数

1. “类”就是对象的模板，对象就是“类”的实例。
2. JavaScript 语言的对象体系，基于构造函数（constructor）和原型链（prototype）。
3. JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓构造函数，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。
   例如：

function Person(name) {  // 这就是一个构造函数
    this.name = name; 
}

为了与普通函数区别，构造函数名字的第一个字母通常大写。

构造函数的特点有两个：

1. 函数体内部使用了this关键字，代表了所要生成的对象实例。
2. 生成对象的时候，必须使用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其实默默做了这些事情：

1. var 临时对象 = {}
2. 临时对象.__proto__ = Person.prototype // 帮我绑定原型
3. 临时对象.name = name
4. return 临时对象

例子：

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

1. 看源码中对应的函数是怎么被 call 的（这是最靠谱的办法）
2. 看文档
3. console.log(this)
4. 不要瞎猜，很可能猜错

• 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还是指向函数的实例。