草庐IT

javascript - 学习.prototype

coder 2024-07-19 原文

编辑:对于那些将来看到这篇文章的人,this site毫无疑问,这对我消化 Javascript 至关重要。如果您来自传统的 OOP 背景,我强烈推荐它。 UML-esq 图非常棒。

我仍然无法理解 Javascript 中的 .prototype 属性是什么。它只是对另一个对象的引用吗?或者它是指向另一个对象的指针的引用?我来自 C/C++/x86,只是看不到它是如何工作的。让我们看一些我目前如何看待事物的例子;它有助于指出我的错误,看看事情是如何工作的。我什至不知道其中一些是否是有效的语法。 ObjectFunction分别是全局对象/函数对象。

1                                        // Global.prototype = ??
2                                        // Function.prototype = ??
3 
4   var obj1 = {};                       // obj1.prototype = Object 
5   obj2 = {};                           // obj2.prototype = Object
6
7   var func1 = function() {};           // func1.prototype = Function
8   func2 = function() {};               // func2.prototype = Function
9   function func3() {}                  // func3.prototype = Function  
10

我很困惑。

11  var Foo = function() { this.prop1 = 0; }
12  var foo = new Foo();                 // should it be 'new Foo' or 'new Foo()'?
13  // Foo.prototype = Function
14  // foo.prototype = Foo
15  var Goo = function() { this.prop2 = 0; }
16  var goo = new Goo();
17  // goo.prototype = Goo
18  goo.prototype = new Foo();
19  // goo.prop1 now exists ?

我也不明白交换原型(prototype)。

20  function A () {
21     this.prop1 = 1;
22  }
23  function B () {
24     this.prop2 = 2;
25  }
26  function C () {
27     this.prop3 = 3;
28  }
29  C.prototype = new B();
30  var c = new C();
31  // c.prop1 = 1
32  // c.prop2 = 2
33  // c.prop3 = undefined
34  C.prototype = new A();
35  // c.prop2 = 2???
36  // c.prop3 = 3

我无法理解这个概念。我不太明白。我不明白克隆对象如何获得它们自己的本地数据副本,但对原始对象(原型(prototype))的更改以某种方式级联到克隆。我一直在摆弄 FigureBug 尝试解决问题,但在精神上我无法想出一个与我见过的每个例子都一致的想法

C++ 可能是一个巨大的怪物,但至少我确切地知道发生了什么。在这里...我正在使用我最好的猜测.. 我想这只是一个新范例。无论如何,如果你能帮忙,谢谢...我对这个 .prototype 感到很困惑。

最佳答案

哇,这么多问题。让我们来解决它们。

Is it simply a reference to another object? Or is it a reference to a pointer to another object?

JavaScript 中没有指针。然而,持有“对象”的变量或属性实际上持有对该对象的引用,因此其他变量可以持有对同一对象的引用。

Global.prototype = ??

定义所有全局变量的全局对象(window)没有原型(prototype)(不关心某些环境中的异常)。

I still can't get my head around what the .prototype property in Javascript is.

.prototype 属性是所有函数对象都具有的属性,指向它们的原型(prototype)对象(普通对象)。

您不能将它与每个对象具有的内部原型(prototype) 引用混淆。 原型(prototype) 指向对象,在该对象中查找对象本身没有的属性。

Function.prototype = ??

这是所有 Function 对象继承自的对象。它包含诸如 callbind 之类的内容。

var obj1 = {};              // obj1.prototype = Object
var func1 = function() {};  // func1.prototype = Function

是的,有点。我认为您已经了解了这个概念,但不知道术语。虽然 func.prototype 是另一回事,但 obj.prototype 属性甚至不存在。但是,您指的是内部原型(prototype) - 我们可以通过 Object.getPrototypeOf 函数访问它们。而且它们不引用构造函数,而是引用它们的原型(prototype)对象。更正如下:

Object.getPrototypeOf(obj1) === Object.prototype
Object.getPrototypeOf(func1) === Function.prototype

should it be 'new Foo' or 'new Foo()'?

没关系,它们是等价的。当您想要传递参数时,您只需要显式地使用方括号。

var Foo = function() { this.prop1 = 0; }
var foo = new Foo();

同样,您的假设是正确的,但表达错误。让我们详细了解一下。

上面,我谈到了“原型(prototype)对象”。那些是什么?它们是通过每个函数隐式创建的普通对象。在本例中,它是 Foo.prototype - 一个空对象。所以我们在这里处理三个对象:Foo 构造函数、它的 Foo.prototype 原型(prototype)对象和 foo 实例。

foo 有什么特别之处?这是 new 运算符做的第一件事。当一个函数作为构造函数被调用时 - 使用 new - 然后它的 .prototype 属性被访问并用它的内部原型(prototype) 设置为该原型(prototype)对象。这就是神奇的事情。之后在新实例上调用该函数,这样 this 就是新对象;在您的情况下,它会在实例上创建 .prop1 属性。然后返回结果(并分配给 foo)。

现在如何使用那个魔法?重点是在原型(prototype)对象上创建属性,然后将继承这些属性。

// modify `Foo.prototype`, the object which `foo` inherits from:
Foo.prototype.prop2 = 1;
console.log(foo.prop2); // 1!

I also don't understand swapping prototypes around.

问题是这是不可能的。一旦实例化,一个对象的原型(prototype)链是相当静态的。但是,您并不经常需要这样做。

goo.prototype = new Foo();

这不起作用,因为 .prototype 属性不是您所期望的。

var c = new C();
C.prototype = new A();

这只起到了一点点作用。看看上面的 new 做了什么——它只查找构造函数的 .prototype 属性一次。内部 prototype 然后保持锁定状态 - 您不会更改 c 实例。但是,如果您现在要创建一个新实例 var d = new C(),那么它将继承自 A 实例。

希望对您有所帮助;如果您还有其他问题,请发表评论。

关于javascript - 学习.prototype,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17660090/

有关javascript - 学习.prototype的更多相关文章

  1. LC滤波器设计学习笔记(一)滤波电路入门 - 2

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

  2. CAN协议的学习与理解 - 2

    最近在学习CAN,记录一下,也供大家参考交流。推荐几个我觉得很好的CAN学习,本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门,真的通透;秀!靠这篇我竟然2天理解了CAN协议!实战STM32F4CAN!原文链接:https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解(小白教程)原文链接:https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  3. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  4. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  5. 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发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - 我如何学习 ruby​​ 的正则表达式? - 2

    如何学习ruby​​的正则表达式?(对于假人) 最佳答案 http://www.rubular.com/在Ruby中使用正则表达式时是一个很棒的工具,因为它可以立即将结果可视化。 关于ruby-我如何学习ruby​​的正则表达式?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/1881231/

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG(VisualGeometryGroup)是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军,定位竞赛冠军;VGG网络采用连续的小卷积核(3x3)和池化层构建深度神经网络,网络深度可以达到16层或19层,其中VGG16和VGG

  9. 机器学习——时间序列ARIMA模型(四):自相关函数ACF和偏自相关函数PACF用于判断ARIMA模型中p、q参数取值 - 2

    文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式:ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk​=Var(yt​)Cov(yt​,yt−k​)​其中分子用于求协方差矩阵,分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型,求出其滞

  10. Unity Shader 学习笔记(5)Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板,这三个知识点任何一个单拿出来都是一套知识体系,不能一概而论,本文章目的在于将学习和实际工作中遇见的问题进行总结,类似于网络笔记之用,方便后续回顾查看,如有以偏概全、不祥不尽之处,还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略,后续会有完整代码 #pragmamulti_c

随机推荐