深入理解js中的面向对象与原型、原型链（二）

构造对象

先看一些老式的方法：
我们可以抛开类，使用字面量来构造一个对象：

var obj1 = {
    nick: 'Byron',
    age: 20,
    printName: function(){
        console.log(obj1.nick);
    }
}
var obj2 = {
    nick: 'Casper',
    age: 25,
    printName: function(){
        console.log(obj2.nick);
    }
}

这样构造出来的对象有两个明显的问题。

太麻烦了，每次构建一个对象都是复制一遍代码
如果想个性化，只能通过手工赋值，使用者必需了解对象详细

这两个问题其实也是我们不能抛开类的重要原因，也是类的作用

优化一下使用函数做自动化

function createObj(nick, age){
  var obj = {
      nick: nick,
      age: age,
      printName: function(){
            console.log(this.nick);
        }
  };
  return obj;
}

var obj3 = createObj('Byron', 30);
obj3.printName();

我们通过创建一个函数来实现自动创建的对象的过程，至于个性化通过参数实现，开发者不必再关注细节，只需要传入指定的参数即可。
这样做也有个小问题！
这种方法解决了构造过程复杂，需要了解细节的问题，但是构造出来的对象类型都是Object，没有识别度。
该怎么办呢？这个时候 构造函数 横空出世！！！

构造函数

面向对象编程的第一步，就是要生成对象。前面说过，对象是单个实物的抽象。通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。

典型的面向对象编程语言（比如 C++ 和 Java），都有“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。

JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

构造函数就是一个普通的函数，但是有自己的特征和用法。

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

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

构造函数的特点有两个。

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

new

下面先介绍new命令。


function Person(name) {
    this.name = name
    this.sayName = function() {
        console.log(this.name)
    }
}
var p = new Person('hunger')

以上代码的执行过程如下：

1、执行 new Person

创建一个空对象 {}，假设名字是 tmpObj
执行 Person 函数，执行过程中对 this 操作就是对 tmpObj 进行操作
函数执行完后返回刚刚创建的 tmpObj

2、把 tmpObj 赋值给 p (p也指向同一个对象)

在看下面的例子 new的本质什什么

function Modal(msg){
    this.msg = msg
}
var modal = new Modal()

创建类的实例。这步是把一个空的对象的 proto 属性设置为 Modal.prototype 。
初始化实例。函数 Modal 被传入参数并调用，关键字 this 被设定为该实例。
返回实例，赋值给 modal

instanceof

instanceof是一个操作符，可以判断对象是否为某个类型的实例

p1 instanceof Person; // true
p1 instanceof Object;// true

instanceof判断的是对象

1 instanceof Number; // false

构造函数原型（prototype）

任何函数使用new表达式就是构造函数
每个函数都自动添加一个名称为prototype属性，这是一个对象
每个对象都有一个内部属性__proto__(规范中没有指定这个名称，但是浏览器都这么实现的) 指向其类型的prototype属性，类的实例也是对象，其__proto__属性指向“类”的prototype。

prototype

十分重要的原型图

原型图

通过图示我们可以看出一些端倪，实例可以通过__prop__访问到其类型的prototype属性，这就意味着类的prototype对象可以作为一个公共容器，供所有实例访问。

抽象重复

我们刚才的问题可以通过这个手段解决

所有实例都会通过原型链引用到类型的prototype
prototype相当于特定类型所有实例都可以访问到的一个公共容器

重复的东西移动到公共容器里放一份就可以了看以下代码理解原型链

function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}

var p1 = new Person();
p1.sayName();

这时候我们对应的关系是这样的

原型链

在举几个经典的例子有如下代码画出原型图

function People (name){
  this.name = name;
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}

var p1 = new People('饥人谷');
var p2 = new People('前端');

image.png

其实和上面的是一样的

有如下代码，代码中并未添加 toString方法，这个方法是哪里来的？画出原型链图进行解释

function People(){
}
var p = new People()
p.toString()