原型链二：Function的原型链问题

dingda 发布于2019-08-22 17:04 / 1329人阅读

摘要：每个函数都有一个属性构造函数指向实例原型如下图重点理解实例对象指向实例原型对象参考原博客的那个部分挖来下图理解之后我们来看在声明函数的时候有一种声明方法是构造函数下面参考阮一峰第三种声明函数的方式是构造函数。

理解关于Function的原型链问题

关于Function的原型链问题的一些个人粗略理解,欢迎指正错误的地方

可以看这篇文章：https://github.com/KieSun/Blo...

要理解Function的原型链的问题
首先深入理解__proto__
__proto__的含义是 实例对象指向实例原型!!

实例的原型对象就是构造函数.prototype
例如

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

所以:

每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型(对象)。

每个函数都有一个 prototype 属性,构造函数指向实例原型,如下图

重点理解: 实例对象.__proto__指向实例原型对象
参考原博客__proto__的那个部分
挖来下图

理解之后我们来看 Function
1
在声明函数的时候
有一种声明方法是Function 构造函数

下面参考阮一峰
第三种声明函数的方式是Function构造函数。

var add = new Function(
  "x",
  "y",
  "return x + y"
);

// 等同于
function add(x, y) {
  return x + y;
}

也就是说Function是一个构造函数,用来生成函数的构造函数.那么,String(),Boolean(),Number()这些函数都是Function构造出来的,new出来的,也就是说String(),Boolean(),Number()这些函数(函数也是广义对象)是Function的实例对象.那么 实例对象.__proto__指向实例原型对象
也就是说

String.__proto__===Function.prototype//true
Number.__proto__===Function.prototype//true
Boolean.__proto__===Function.prototype//true

Object.__proto__ === Function.prototype//true

不只是上述构造函数,实际上,
任意函数的__proto__都===Function.prototype
即

所有函数.__proto__===Function.Prototype

因为任意函数都是Function() new(构造)出来的.
任意函数都是Function()构造函数的实例

关于Function 最奇特 的是

Function.__proto__===Function.Prototype//true

因为 所有函数实例.__proto__就是Function构造函数的原型(Function.Prototype),函数而函数实例也包括他自己.

深入理解:

Function作为一个函数对象实例,他有__proto__,指向原型

Function又作为一个构造函数,他有自己的protoype,指向原型

所以

而

Function.__proto__===Object.Protoype//false

也就是说
更深层次的理解:

Function优先是一个函数实例

自身是构造函数,自身又是自身构造函数的实例

其次才是广义的对象.

2
Function也可以看作是String()或者Boolean()或Number()同等地位

因为所有函数.prototype虽然是实例原型,但是实例原型本质还是一个对象,也就是说所有的实例原型对象是Object()构造函数的实例,即

String.prototype.__proto__=== Object.prototype//true
Number.prototype.__proto__=== Object.prototype//true
Boolean.prototype.__proto__=== Object.prototype//true
//同理
Function.prototype.__proto__=== Object.prototype//true

Function总结:

如果把函数看成对象，那么函数.__proto__ === Function.prototype

如果把 Function 看成对象，那么 Function.__proto__ === Function.prototype

最终总结

实例对象.__proto__===构造函数.prototype

其中实例对象是构造函数构造的实例.

原型链:
每层的__proto__都指向上一层的原型,所以一层一层的__proto__组成的链就成为原型链.

最终

Object.prototype.__proto__
//null

GPU云服务器云服务器 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94833.html

JavaScript继承的六种方式

这是最近在学习js继承时看了多篇文章以及自我总结的学习笔记。目录：一：原型链二：构造函数三：原型链和构造函数组合继承四：原型式五：寄生式六：寄生组合式 1、原型链 function Super(){ this.name = lily; this.age = 21; this.arr = [1,2,3] } function Sub(){} Sub.prototype = new S...

wujl596 2019-08-21 11:22 评论0 收藏0
JavaScript面向对象---原型链继承

摘要：因为这造成了继承链的紊乱，因为的实例是由构造函数创建的，现在其属性却指向了为了避免这一现象，就必须在替换对象之后，为新的对象加上属性，使其指向原来的构造函数。这个函数接收两个参数子类型构造函数和超类型构造函数。最近一直在研究js面向对象，原型链继承是一个难点，下面是我对继承的理解以下文章借鉴自CSDN季诗筱的博客原型链继承的基本概念： ES中描述了原型链的概念，并将原型链作为实现...

vspiders 2019-08-20 13:33 评论0 收藏0
JavaScript中的原型与原型链

摘要：前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。那么你是否清楚完整的了解它呢？国际惯例，让我们先抛出问题：什么是原型、原型链它们有什么特点它们能做什么怎么确定它们的关系或许你已经有答案，或许你开始有点疑惑，无论是 get 新技能或是简单的温习一次，让我们一起去探究一番吧如果文章中有出现纰...

laoLiueizo 2019-08-23 16:58 评论0 收藏0
JS面向对象的程序设计之继承的实现 - 原型链的注意点

摘要：第一种方式是使用操作符，只要检测的实例对象中的原型链包含出现过的构造函数，结果就会返回。而这也正是组合使用原型模式和构造函数模式的原因。在构造函数模式中定义属性，在原型模式中定义共享的方法。前言：最近在细读Javascript高级程序设计，对于我而言，中文版，书中很多地方翻译的差强人意，所以用自己所理解的，尝试解读下。如有纰漏或错误，会非常感谢您的指出。文中绝大部分内容引用自《Ja...

pf_miles 2019-08-23 12:26 评论0 收藏0
进击JavaScript之（四）原型与原型链

摘要：每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能，因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象，我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。本文您将看到以下内容：传统构造函数的问题一些相关概念认识原型构造、原型、实例三角结构图对象的原型链函数的构造函数Function 一句话说明什么...

XBaron 2019-08-20 10:45 评论0 收藏0