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

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

Function函数解析

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

js是函数式编程,最重要的就是prototypeconstructor

prototype原型对象

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

constructor构造器

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

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

微信截图_20200229193425.png

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

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

微信截图_20200229194518.png

就是这样的关系,不过这个不能单独理解,且听我下面讲完__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属性

微信截图_20200229202819.png

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原型模式的应用。

阅读 458

推荐阅读