原型链的原貌

原型链的原貌

先注入一个知识点:函数的本质是一个可以被调用的对象

js 复制代码
    function sum1(a,b){
        return a + b
    }
    
    const sum2 = new Function("a","b","return a+b")
    
    // 以上是一样的效果

下面用一个简单例子来解释原型链:

js 复制代码
    function A(){} //函数
    
    const a = new A()  //通过new得到的实例
    
    a.__proto__ === A.prototype   //会得到true

每个函数都有一个prototype属性,表示这个函数的原型对象 。实例的__proto__会指向函数的原型。

scss 复制代码
如下图:(红色箭头 实例,绿色箭头 原型,黑色箭头 隐式原型)

得到这个基础模型后,我们接着一个一个看,先看A.prototype是哪来的呢?A.prototype 是一个普通对象,那么它实际上就是通过new Objcet得到的 。因此它的函数就是Object,Object也有属于它自己的prototype原型。但接下来会有一个特殊点,Object.prototype的隐式原型则为null,不然就无穷无尽下去了。

那么我们所说的原型链 就是图中的黑色箭头。比如这里问:

对象a的原型链: a->A.prototype->Object.prototype->null 。

ok接下来关注点到Object身上,它本身也是一个函数,所以它是被new Function得到的。而同样的Function也有自己的prototype原型。

好,接下来有一个理解起来有点像悖论的知识。我们在前面知道了A.prototype是通过new Object出来的,那么这里的Function.prototype 也是通过new Object出来的,因此Function.prototype的隐式原型也指向了Object.prototype。

而Function哪来的呢?它是特殊情况,可以理解为JS引擎在启动时,它就已经被安放了,它的隐式原型就直接指向自己的prototype原型。

现在看回到A函数,那么A实际上也是通过new Function得到的,接下来连线(看着乱,但是我们找原型链 只看黑色的链路)

所以每个我们自己定义的A函数 ,既有Function.prototype里的成员 (A.bind、A.call等等)又有Object.prototype里的成员(toString、valueOf等等)。

相关推荐
jktantan3 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么3 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
夕除3 小时前
Redis 过期策略
redis·笔记·面试
2601_962885724 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel4 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓4 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人4 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every5 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad5 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新6 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能