草庐IT

记录--JavaScript原型和原型链复习笔记

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

原型和原型链

1. 原型

每个JS对象一定对应一个原型对象，并从原型对象继承属性和方法

1.1 __proto__

对象的__proto__属性值就是对象的原型对象

此属性是过时的语法，现在建议使用Object.getPrototypeof(obj)

函数也是对象，因此也有__proto__属性

1.2 Prototype

函数的prototype属性值就是函数的原型对象

定义：给其他对象提供共享属性的对象，prototype 本身也是对象，只是被用以承担某个职能

当说 prototype 对象时，实际上说的是 “xxx 函数对象的 prototype 对象”

1.3 constructor

每个原型都有一个 constructor 属性指向关联的构造函数

实例访问 constructor 属性是获取的原型对象的构造函数

function Person(age) {
    this.age = age;
}
let p = new Person(50);
console.log(Person.prototype.constructor === Person); // true
console.log(p.constructor === Person); // true 会查找原型对象

对于引用类型来说 constructor 属性值是可以修改的，但是对于基本类型来说是只读的,因为创建他们的是只读的原生构造函数（native constructors）

2. 原型链

每个对象拥有一个原型对象，通过 __proto__ 指针指向上一个原型 ，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null。这种关系被称为原型链 (prototype chain)，通过原型链一个对象会拥有定义在其他对象中的属性和方法。

因此，当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

2.1 原型链知识点

  • 原型链的尽头（root）是Object.prototype。所有对象(除null)均从Object.prototype继承属性

  • Object.prototype.__proto__值是null，原型链终止

  • Function.prototype和Function.__proto__为同一对象

    意味着： Object/Array/String等等构造函数本质上和Function一样，均继承于Function.prototype

  • Function.prototype直接继承root（Object.prototype）

  • 继承的原型链：Object.prototype(root)<---Function.prototype<---Function|Object|Array...

  • 对象的__proto__指向自己构造函数的prototype

  • ES规范定义对象字面量（{}）的原型就是Object.prototype

2.2 Object和Function的鸡和蛋的问题

  • Function.prototype是个不同于一般函数（对象）的函数（对象）
    • Function.prototype像普通函数一样可以调用，但总是返回undefined。
    • 普通函数实际上是Function的实例，即普通函数继承于Function.prototype。func.__proto__ === Function.prototype。
    • Function.prototype继承于Object.prototype，并且没有prototype这个属性。func.prototype是普通对象，Function.prototype.prototype是null。
    • 总结，Function.prototype其实是个另类的函数，可以独立于/先于Function产生。
  • Object本身是个（构造）函数，是Function的实例，即Object.__proto__就是Function.prototype

问题总结：

先有Object.prototype（原型链顶端），Function.prototype继承Object.prototype而产生，最后，Function和Object和其它构造函数继承Function.prototype而产生

2.3 原型链图解

原型和原型链经典关系图

自己画的原型图

图解描述：

Person、Object、Function是函数对象，具备prototype属性，其他对象是只有__proro__

获取原型对象

Person.__proto__及Object.__proto__与Function.__proto__相等，是ƒ () { [native code] }

Person.__proto__及Object.__proto__与Function.__proto__的原型对象为Object.prototype

Function.__proto__和Function.prototype值相等，为空函数： ƒ () { [native code] }

Person.constructor、Object.constructor与Function值相等，为： ƒ Function() { [native code] }

原型链代码输出结果

function Person(name) {
    this.name = name
}
var p2 = new Person('king');
console.log(p2.__proto__) //Person.prototype
console.log(p2.__proto__.__proto__) //Object.prototype
console.log(p2.__proto__.__proto__.__proto__) // null
console.log(p2.__proto__.__proto__.__proto__.__proto__)
//null后面没有了，报错
console.log(p2.__proto__.__proto__.__proto__.__proto__.__proto__)
//null后面没有了，报错
console.log(p2.constructor)//Person
console.log(p2.prototype)//undefined p2是实例，没有prototype属性

console.log(Person.constructor)//Function 一个空函数
console.log(Person.prototype)
//打印出Person.prototype这个对象里所有的方法和属性
console.log(Person.prototype.constructor)//Person
console.log(Person.prototype.__proto__)// Object.prototype
console.log(Person.__proto__) //Function.prototype
console.log(Function.prototype.__proto__)//Object.prototype
console.log(Function.__proto__)//Function.prototype
console.log(Object.__proto__)//Function.prototype
console.log(Object.prototype.__proto__)//null

console.log(Function); // ƒ Function() { [native code] }  空函数，名为Function
console.log(Object.constructor); // ƒ Function() { [native code] } 
console.log(Person.constructor); // ƒ Function() { [native code] } 
console.log(Function === Object.constructor); // true
console.log(Function === Person.constructor); // true

console.log(Function.__proto__); // ƒ () { [native code] }
console.log(Function.prototype); // ƒ () { [native code] }
console.log(Function.__proto__ == Function.prototype); // true
console.log(Function.__proto__.__proto__ === Object.prototype) // true
console.log(Function.prototype.__proto__ === Object.prototype) // true

本文转载于:

https://juejin.cn/post/7086376102238617614

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

JavaScript复习codeprototypeFunction

有关记录--JavaScript原型和原型链复习笔记的更多相关文章

  1. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  2. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  3. Matlab imread（）读到了什么 （浅显 当复习文档了） - 2

    matlab打开matlab，用最简单的imread方法读取一个图像clcclearimg_h=imread('hua.jpg');返回一个数组（矩阵），往往是a*b*cunit8类型解释一下这个三维数组的意思，行数、数和层数，unit8：指数据类型，无符号八位整形，可理解为0~2^8的数三个层数分别代表RGB三个通道图像rgb最常用的是24-位实现方法，即RGB每个通道有256色阶（2^8）。基于这样的24-位RGB模型的色彩空间可以表现256×256×256≈1670万色当imshow传入了一个二维数组，它将以灰度方式绘制；可以把图像拆分为rgb三层，可以以灰度的方式观察它figure(1

  4. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  5. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  6. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  7. ruby-on-rails - 在 Rails 中更高效地查找或创建多条记录 - 2

    我有一个应用需要发送用户事件邀请。当用户邀请friend(用户)参加事件时，如果尚不存在将用户连接到该事件的新记录，则会创建该记录。我的模型由用户、事件和events_user组成。classEventdefinvite(user_id,*args)user_id.eachdo|u|e=EventsUser.find_or_create_by_event_id_and_user_id(self.id,u)e.save!endendend用法Event.first.invite([1,2,3])我不认为以上是完成我的任务的最有效方法。我设想了一种方法，例如Model.find_or_cr

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？ 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  10. ruby - Sinatra 中的全局救援和日志记录异常 - 2

    如何在出现异常时指定全局救援，如果您将Sinatra用于API或应用程序，您将如何处理日志记录？ 最佳答案 404可以在not_found方法的帮助下处理，例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理，例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问，如下所示:errordo'Anerroroccured:'+request.env['si

随机推荐