原生js中的`__proto__`和prototype、原型链 解析

__proto__和prototype是原生js中比较重要的一环，接下来我从函数和对象，两个方面，谈谈我的理解

Function函数解析

js函数是原生js比较重要的一环，先来谈谈我对函数的理解，

js是函数式编程，最重要的就是prototype和constructor

prototype原型对象

首先明确一点，每个函数都有prototype属性，prototype指向了一个对象，这个对象就叫原型对象。

constructor构造器

每个原型对象有一个constructor属性，指向了构造函数本身，

光说还是有点难懂，我先上图

// 代码
function foo() {}
// 原型
console.log(foo.prototype); // {constructor: ƒ}
// 构造器
console.log(foo.prototype.constructor); // ƒ foo() {}

上面代码和图可知foo的prototype属性指向一个对象，然后对象有一个属性constructor 又指向了 foo构造函数，看下图：

就是这样的关系，不过这个不能单独理解，且听我下面讲完__proto__属性

对象的__proto__属性

每个对象都有__proto__属性指向构造函数的prototype属性；

怎么验证呢？

这里首先要先说下创建对象的三种方式了

1、对象字面量（常用）

var _obj = {};

2、构造函数Object

var _obj = new Object();

3、通过Object.create(prototype) 初始化对象;

var _o = {};
var _obj = Object.create(_o);

然后 其实这三种方式都调用了Object函数，生成的对象的__proto__属性，都指向了Object函数的prototype属性

var _obj = {};
console.log(_obj); 

// _obj.__proto__ 指向了Object的原型对象{……}
console.log(_obj.__proto__ === Object.prototype); // true

这样我们验证出来所有对象都有__proto__属性，指向了构造函数的原型对象

然后对象的__proto__和函数的prototype有什么关系呢？

实例化对象验证

我们都知道实例化会生成一个对象，对象都有__proto__属性，指向原型对象，

那就意味着函数的prototype属性，和实例化的__proto__指向同一个对象，验证下。

// 1、__proto__指向的是【构造函数的prototype属性】
function fnxx(){}

// new生成一个实例对象
var _xx = new fnxx();

// 对象的__proto__和函数的prototype
console.log(_xx.__proto__ === fnxx.prototype); // true

上面代码跑了之后，结果为true，说明咱们验证是正确的😄！

然后这有什么用呢？

看下面

原型链

js在创建对象的时候都有__proto__内置属性，用于指向创建它函数对象的原形对象prototype

没错这就是原型链。

_xx.__proto__.__proto_…… 沿着__proto__属性逐层向下查找，这就是一个最简单的原型链，继承的话也是这样一层层向下找。

在深入理解

js中万物皆对象，Function也是对象，所有对象指向了Object对象 ，也就是说Object对象是所有对象的基类;

Object的__proto__属性指向null;

验证下

function fnxx(){}

// 2、对象的__proto__
console.log(fnxx.prototype.__proto__); // 指向Object构造函数的原型对象

console.log(fnxx.prototype.__proto__ === Object.prototype); // true

// Object对象是所有js对象的基类
console.log(Object.prototype.__proto__); // null

至此一个完整的链条就很清晰了；

函数都有一个prototype属性，指向原型对象，原型对象有constructor 属性，指向了构造函数本身。

对象有__proto__属性，指向创建它的原型对象，__proto__用来实现原型链查找，是继承中关键的一环。

js中最重要的两个概念__proto__和prototype这里就讲清楚了，大家有啥不懂的，可以评论留言。

接下来我再出几篇，关于继承，还有prototype原型模式的应用。