前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[前端][原型链]一道题串联原型链易混淆点的整理

[前端][原型链]一道题串联原型链易混淆点的整理

作者头像
Tuzei
发布2020-03-16 17:16:08
4220
发布2020-03-16 17:16:08
举报
文章被收录于专栏:Tuzei的笔记

题目

看到别人问这个问题,自己输入了一下发现输出的是a,感觉和想象中的不一样于是分析了一下,顺便回顾一下关于原型链的知识点。

首先,我们很多人都知道一般情况下,一个对象如果本身没有这个属性,就会去它的原型链上去找。

1. prototype和__proto__的区别

最开始太久没有看这方面的知识点就有点混淆了prototype和__proto__。所以先把这两个概念区分开来。

[[Prototype]](也就是__proto__):是一个特殊的内置属性,几乎所有对象在创建的时候就有了这个[[Prototype]],在有些浏览器下会通过__proto__暴露出来(否则要通过Object.getPrototypeof()来获取)。 而这里说的对象,是不限于平时所说的Object类型,而是通过一个构造函数创建出来的都算,他们都有__proto__。 像 String、Number、Boolean这些基本类型,同样也是通过构造函数创建出来的。 var a = 'string'; 事实上就和var a = new String('string')一样都是通过String函数创建出来的。number,boolean同理。包括array和function也一样。所以他们都有__proto__

prototype: 是函数才有的属性。它的值是一个对象,包含一个constructor属性。constructor指向这个函数本身。类似下面这样。

代码语言:javascript
复制
      a.prototype = {
          constructor: a
      }

但是为什么打印出来还能看到一个__proto__属性呢,是因为prototype本身是一个对象,对象都有__proto__

大概总结来说就是 __proto__大家都有,prototype函数才有

2. __proto__指向

除了用Object.create 创建的对象,其他对象的__proto__指向这个对象的构造函数的prototype。

3. 回到题目

function Person() { } 这个函数的__proto__是指向它的构造函数的prototype的,而函数的构造函数就是Function,所以,如果我们输出Person.a,Person自身没有a这个属性就去__proto__也就是Function.prototype上找:

代码语言:javascript
复制
console.log(Person.a) // a1

而对于ibtool,它的__proto__指向它的构造函数Person的prototype,而Person的prototype上没有a这个属性,就往Person的prototype,这个对象的__proto__上找。因为上面说过prototype本身是一个对象,对象都有__proto__,一个object的__proto__指向它的构造函数(Object)的prototype,所以

代码语言:javascript
复制
console.log(ibtool.a) // a

再假如去掉Function.prototype.a = 'a1'这行,那Person.a也会等于a,因为Function的prototype也是个对象,这个对象的__proto__也指向Object的prototype。

注意:如果是通过Object.create的方式实现函数间的继承,那么就不一定了。 例如

代码语言:javascript
复制
function LivingThing () {}
LivingThing.prototype.a = 'a2'
function Person () {}
Person.prototype = Object.create(LivingThing.prototype)
//  Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
// 也就是Person.prototype这个对象的__proto__指向的是LivingThing.prototype

var ibtool = new Person()
console.log(ibtool.a) // a2

补充:关于Object.prototype 和 Function.prototype

我的理解是: Object.prototype是一切对象的爸爸 Function.prototype是一切函数的爸爸 下面有几个问题: 1.Function.prototype指向哪?

输出出来是这样一段,应该是浏览器引擎创建的,最初始的,一切的源头。

  1. Object.__proto__指向哪? Object也是个函数,它的构造函数是Function,Object.__proto__就指向Function.prototype,也就是第一问的内容。
  2. Function.__proto__指向哪? 同理也Function是个函数,它的构造函数也是Function,Function.__proto__就指向Function.prototype,也就是第一问的内容。
  3. Object.prototype是什么? Object.prototype也是一个对象,
  1. Object.prototype.__proto__指向哪里? 一般来说一个对象的__proto__指向它的构造函数的prototype,如果按照这个规则, Object.prototype.__proto__应该指向对象的构造函数Object的prototype,这样就形成了一个循环。 所以这里是一个例外,Object.prototype.__proto__默认是指向null的。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. prototype和__proto__的区别
  • 2. __proto__指向
  • 3. 回到题目
  • 补充:关于Object.prototype 和 Function.prototype
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档