1.函数也是对象

有时我们会好奇为什么能给一个函数添加属性，函数难道不应该就是一个执行过程的作用域吗？

var fn=function(){
    this.name='手机'
}
fn.age=11
console.log(fn.age)  //11

console.log(fn)
// function(){
//  this.name='手机'
// }

其实，在JS里，函数就是一个对象，所有的函数都是Function的实例.即

  console.log(a.__proto__==Function.prototype) //true

不明白上面的代码是什么意思？咱们先往下看。

2.构造函数和普通函数的区别

function fn(){
    this.name='手机'
    console.log(this)
}
fn()

//此时这里面的this表示window

var m=new fn()

//此时this表示m对象。

• 用关键词new 调用的函数叫做构造函数
• 虽然没有硬性规定，为了和普通函数区分，构造函数一般首字母大写。

3.构造函数和实例的关系

function Person(name) {
    this.name = name
}
let p = new Person('Tom');
console.log(p) //{name:'Tom'}

上面代码，我们通过new关键字调用Person生成的对象p就是构造函数的实例。

现在我们修改代码：

<!-- demo1 -->
function Person(name) {
    this.name = name
    return {}
}
let p = new Person('Tom');
console.log(p) //{}

<!-- demo2 -->
function Person(name) {
    this.name = name
    return name;
}
let p = new Person('Tom');
console.log(p) //{name:'Tom'}

从上面代码我们可以看出两次生成的实例并不一样。这是为什么？

其实，构造函数不需要显示的返回值。使用new来创建对象 (调用构造函数) 时，

• 如果不返回值，实例为生成的新对象
• 如果返回number、string、boolean、symbol类型、undefined、null，会忽略返回值，实例为生成的新对象
• 如果返回对象、数组、函数，实例为为返回的对象

4.函数和原型的关系

function Fn(name){
    this.name=name
    this.kind='电子产品'
}
var m1=new Fn('手机');
var m2=new Fn('电脑');

结果会生成两个m1,m2对象。

m1={
    name:'手机',
    kind:'电子产品'
}
m2={
    name:'电脑',
    kind:'电子产品'
}
//每一个实例对象，都有自己的属性和方法的副本。修改任何一个都不会影响另一个。
这不仅无法做到数据共享，也是极大的资源浪费。

function Fn(name){
    this.name=name
}
Fn.prototype = { kind : '电子产品' };
var m1=new Fn('手机');
var m2=new Fn('电脑');

结果会生成两个m1,m2对象。

m1={
    name:'手机',
    kind:'电子产品'
}
m2={
    name:'电脑',
    kind:'电子产品'
}
//kind属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，
就会同时影响到两个实例对象。

• JS里，我们创建的每一个函数都有一个prototype（原型）属性，这个属性指一个——用于包含该对象所有实例的共享属性和方法——的对象。
• 原型对象同时包含一个指针指向这个这个函数，这个指针就是constructor，这个函数也就是构造函数。

了解了原型和constructor指针后，我们通过一个例子以及一张图来进一步了解这两者的关系。

function Person(){
    this.age=10
}

Person.prototype.name = 'Nicholas';
Person.prototype.age = 24;
Person.prototype.sayAge = function () {
    alert(this.age);
};
console.log(Person.prototype.constructor===Person); //true

1.png

5.原型和实例的关系

function Person(){
    this.age=10
}

Person.prototype.name = 'Nicholas';
Person.prototype.age = 24;
Person.prototype.sayAge = function () {
    alert(this.age);
};

//实例
var person1 = new Person('Lee');
var person2 = new Person('Lucy');

我们新建了两个实例person1和person2，这些实例的内部都会包含一个指向其构造函数的原型对象的指针（内部属性），不是对外访问的API，这个指针叫[[Prototype]]，在ES5的标准上没有规定访问这个属性，所以在浏览器上是不能console出这个属性的，会报错。但是大部分浏览器通过__proto__的属性来访问它，成为了实际的通用属性，于是在ES6的附录里写进了该属性。

prototype和__proto__都叫原型，如果非要区分，prototype我们称为显示原型，__proto__我们称为隐式原型。

22.png

person1.__proto__ == Person.prototype // true
person1.__proto__.constructor===Person.prototype.constructor  //true

6.__proto__和prototype的关系

1. 只有对象才具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。
2. 方法（函数）是个特殊的对象，除了和其他对象一样有上述__proto__属性之外，还有自己特有的属性——原型属性（prototype），这个属性指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性指回原构造函数。

举个例子：

    var Foo=function(){}
    var f1=new Foo()
    var f2=new Foo()

    console.log(f1.__proto__  === Foo.prototype); //true
    console.log(f2.__proto__ === Foo.prototype); //true
    console.log(Foo.__proto__ === Function.prototype); //true
    console.log(Function.prototype.__proto__===Object.prototype); //true
    console.log(Object.prototype.__proto__===null); //true

1. f1和f2是Foo这个对象的两个实例，这两个对象也有属性__proto__，指向构造函数的原型对象，这样子就可以访问Foo的原型对象的所有方法了
2. 构造函数Foo()除了是方法，也是对象啊，它也有__proto__属性，指向谁呢？指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛(function Function(){})，因此这里的__proto__指向了Function.prototype。
3. Function.prototype是个对象，那么他有__proto__属性，指向谁呢？指向它的构造函数的原型对象呗。对象的构造函数不就是Object嘛(function Object()),因此Function.prototype.__proto__===Object.prototype
4. 最后，Object.prototype的__proto__属性指向null。

总结：

1. 对象有属性__proto__,指向该对象的构造函数的原型对象。
2. 方法除了有属性__proto__,还有属性prototype，prototype指向该方法的原型对象。

7.原型链

function Person(){
    this.age=10
}

Person.prototype.name = 'Nicholas';
Person.prototype.age = 24;
Person.prototype.sayAge = function () {
    alert(this.age);
};

//实例
var person1 = new Person();

前面的demo中我们举了一个类似这样的例子。
我们尝试输出实例的属性。

person1.age; // 10
person1.name; // Nicholas
person1.toString; // function toString() { [native code] }
person1

我们输出一下person1试试

im.jpg

从上例中，我们可以看出，Person有自己的原型，即Person.prototype,同样Person.prototype也有自己的原型，即Person.prototype.__proto__属性，我们输出下试试。

console.log(Person.prototype)
console.log(Person.prototype.__proto__)
console.log(Person.prototype.__proto__.__proto__)

结果如下。

img1.jpg

我们来总结下原型链。

当我们访问实例对象的一个属性时候，如果不存在，就去实例的原型对象里面找，这个原型对象也有自己的原型对象。就这样一直找就构成了我们常说的线性原型链。

上面代码的age来自于自身属性，name来自于原型属性，toString( )方法来自于Person原型对象的原型Object的原型。当我们访问一个实例属性的时候，如果没有找到，我们就会继续搜索实例的原型，如果还没有找到，就递归搜索原型链直到原型链末端。

我们来验证下

Person.prototype.__proto__ == Object.prototype // true

继续深入验证

Person.__proto__ == Function.prototype // true
Function.prototype.__proto__ == Object.prototype // true

我们会发现Person是Function对象的实例，Function是Object对象的实例，Person原型是Object对象的实例。

最后，奉上一张原型大图

33.jpg

• 构造函数和对象原型一一对应，他们与实例一起作为三要素构成了三面这幅图。最左侧是实例，中间是构造函数，最右侧是对象原型。
• 最最右侧的null告诉我们：Object.prototype.__proto__ = null，也就是Object.prototype是JS中一切对象的根源。其余的对象继承于它，并拥有自己的方法和属性。

最后的最后，说了这么多，实际怎么用？大家下去可以看一下，js面向对象的三大特性：
封装、继承、多态

原型链主要用于继承特性。

参考来源:

• 剖析JS的原型链和继承
• js中proto和prototype的区别和关系？