深入浅出理解JS（2）-- prototype原型

在上一节中我们重点讲了对象和函数，得出的结论是：函数也是一种对象，对象都是通过函数创建的。

还记得上一节留下的问题吗？回顾一下：

var obj = new Object();
obj.a = 10;
obj.b = 20;
 
var arr = new Array();
arr[0] = 5;
arr[1] = 'x';
 
console.log(typeof obj);       //object
console.log(typeof arr);       //object
 
console.log(typeof Object);   //function
console.log(typeof Array);    //function

我们可以看到，Object和Array都是函数，说明对象是函数创建的。但是，到底是为什么呢？

接下来，就是揭秘时刻了：

在 JavaScript 中，每当定义一个对象的时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。

那你可能会问了，函数对象和原型对象是什么？

1. 什么是函数对象

举个小例子：

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();

function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');

console.log(typeof Object); //function 
console.log(typeof Function); //function  

console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   

console.log(typeof o1); //object 
console.log(typeof o2); //object 
console.log(typeof o3); //object

虽然 ”万物皆对象“，但是，对象也是分为函数对象和普通对象的。

首先，声明一点，Object和Function是函数对象，它俩是JS自带的函数对象。

从上面的例子我们可以知道，o1,o2,o3是普通对象，f1,f2,f3是函数对象。怎么区分普通对象和函数对象呢？其实，只要记住一点，那就是通过new Function 创建出来的对象都是函数对象，其他都是普通对象。f1和f2归根到底也是Function创建出来的，当然，Object也不例外。

理解了函数对象，我们接着往下说，每个函数都有一个prototype属性，而这个属性值是一个对象，默认只有一个constructor的属性，指向这个函数的本身。

怎么理解呢？

var f = function(){};
console.log(f.prototype);

可以看到我创建了一个函数，在控制台输出它的原型，结果如下：

这印证了我们上面所说的，函数默认的只有constructor这一个属性，而我们可以看到，里面的constructor默认还指向一个函数，而这个函数就是它本身。这里你可能会问了，为什么constructor展开后，还有一个__proto__属性，不要着急，接下来会细讲这一块。现在先来看看，为什么constructor指向的是函数本身。

展开之后，我们发现，里面constructor的prototype属性不就是咱们这个函数的原型吗？所以，答案很明显了。为了更好的理解呢？看看这张图：

f 是一个函数，右边的是它的原型，想必这个指向已经很明确了吧，那函数的原型是这个样子，对象呢？

说到这里不得不再啰嗦一句，前面我们已经知道，函数也是对象，那对象既然作为属性的集合，当然不可能像函数那么单纯啦，先打印出来看看：

console.log(Object.prototype);

结果是啥呢？

相较于函数，确实是多了好几个属性。但是，别忘了，对象我们是可以自定义属性的哦。那前面的函数来举例，默认是只有constructor一个属性的。

var Person = function(){};
Person.prototype.name = 'hsl';
Person.prototype.setAge = function() {
	return 18;
}
console.log(Person.prototype);

新增了两个属性，name和setAge，看看效果：

这样做有什么用呢？当然是为了new出来的对象能够调用里面的方法啊。接着往下看：

	function Person(){};
    Person.prototype.name = 'hsl';
    Person.prototype.setAge = function() {
        return 18;
    }

    var person = new Person();
    console.log(person.name);      //  hsl
    console.log(person.setAge());  //  18
    console.log(Person.prototype);

Person是一个函数，person对象是从Person函数new出来的，这样的话，person对象就可以调用Person.prototype的属性了。

2. 什么是原型对象

之前提到过函数对象默认的constructor属性指向的函数的原型对象，但是，好像一直也不是很清楚，何为原型对象。原型对象，其实也就是一个普通对象，简单点来说，上面例子的原型对象就是Person.prototype，为啥呢？那咱们把上面的例子改改：

	function Person(){};
    Person.prototype = {
        name: 'hsl',
        setAge: function () {
            return 18;
        }
    }

    var person = new Person();
    console.log(person.name);      //  hsl
    console.log(person.setAge());  //  18
    console.log(Person.prototype);

最后，你会发现是一样的结果，也就相当于是两种为对象添加属性的方法吧。

经过上面的一些小例子，我们来总结一下，以上面的代码为例：

1. 一个对象的原型对象就相当于是Person.prototype
2. Person.prototype.constructor == Person
3. person.constructor == Person

简单的解释一下，在默认的情况下，所有的原型对象（Person.prototype）都会获得一个constructor属性，这个属性指向prototype属性所在的函数（Person）。对了，这里插播一句，每个对象都有__proto__属性，但是只有函数对象才有prototype属性。当然啦，Function.prototype除外，它是函数对象，但是没有prototype属性。

对于第三条结论，不知道大家还记得构造函数不，其实和我们上面的例子也是区别不大的。构造函数的目的就是为了实例化，在这里，person就相当于是Person的实例，person也有一个constructor的属性，该属性就是指向Person的，看下面的例子：

	function Person(name, age) {
        this.name = name;
        this.setAge = function() {
            return age;
        }
    }
    var person = new Person('hsl', 18);
    
    console.log(person.constructor == Person);   // true

根据这个例子又可以得出一个小结论啦，那就是实例的constructor指向构造函数。

说了半天的原型对象，那它是干啥的？前面提到过调用自定义的属性，这里想说的是，主要是为了继承，其实，意思也是差不多。

	var Person = function(name){
        this.name = name;
    };
    Person.prototype.setName = function(){
        return this.name;
    }
    var person = new Person('hsl');
    person.setName();     //  hsl

我们给Person定义了一个setName属性，person作为Person的实例继承了这个属性，所以我们可以得到setName`的数据。至于怎么实现继承的，就是接下来我们要讲的原型链了。