理解前端开发中的原型链概念

系列文章

前端八股文-类型判断

前端八股文-继承

前端八股文-手写new、bind、call、apply的三两事

写在连载前面的话

毕业出来工作，做前端也有这么几年了，作为非科班出身，且靠自学半路出家，一直在探索前端如何进阶的问题，个人觉得，最终还是回归于基础。不知道大家是否也和我一样，学了好多东西，最后隔一段时间就又忘了，于是我决定写一套基础的文章，以便有所遗忘，需要的时候可以快速的回忆。也许还能对刚入行的同行，有所帮助。与大家共勉。如果有错误的地方，欢迎在评论区里面指出来。

一、prototype与__proto__的区别

• prototype：函数才有的属性(每个函数拥有的一个对象属性，称为原型对象)
• constractor：对创建此对象的函数的引用（prototype中的constractor指向该构造函数）
• __proto__：每个对象(包括函数)都有的属性

注意：大多数情况下，__proto__可以理解为”构造器的原型“，即：
            __proto__ === constractor.prototype
（通过Object.create()创建的对象不适用此等式） 

/*1、字面量方式*/
var a = {};
console.log(a.prototype);  // undefined
console.log(a.constructor === Object);  // Object
console.log(a.__proto__ === Object.prototype); // true
console.log(a.__proto__ === a.constructor.prototype); // true
  
/*2、构造器方式*/
var Foo = function(){};
var foo = new Foo();
console.log(foo.constructor === Foo); // true 实例的constructor指向其构造函数
console.log(foo.constructor === Foo.prototype.constructor); // true 原型上的constructor指向构造函数
console.log(foo.__proto__ === Foo.prototype); // true 实例的__proto__等于构造函数的prototype
console.log(foo.__proto__ === foo.constructor.prototype); //true
  
/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}
console.log(a.__proto__ === a.constructor.prototype); //false

二、原型链

由于__proto__任何对象都有的属性，而js里万物皆对象，所以会形成一条__proto__连起来的链条，递归访问__proto__，最终到null

var A = function(){};
var b = new A();
console.log(b.__proto__ === A.prototype); //（即构造器function A 的原型对象）
console.log(b.__proto__.__proto__ === Object.prototype); // Object {}（即构造器function Object 的原型对象）
console.log(b.__proto__.__proto__.__proto__); //null

三、Function和Object的关系

解决为何：

Function instanceof Object; //true

Object instanceof Function; //true

所有构造器的constructor都指向Function

  1.构造器Function的构造器是它自身
  Function.constructor=== Function; //true

  2.构造器Object的构造器是Function（由此可知所有构造器的constructor都指向Function）
  Object.constructor === Function; //true
  
  3.构造器Function的__proto__是一个特殊的匿名函数function() {}
  
  4.这个特殊的匿名函数的__proto__指向Object的prototype原型。
  Function.__proto__.__proto__ === Object.prototype//true

  5.Object的__proto__指向Function的prototype，也就是上面③中所述的特殊匿名函数
  Object.__proto__ === Function.prototype; // true  
  Function.prototype === Function.__proto__; // true

解惑：

Function instanceof Object; 

Function.__proto__ => 特殊匿名函数
特殊匿名函数.__proto__ => Object.prototype

Object instanceof Function;
Object.constructor = Function;
Object.__proto__ => Function.prototype