迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

详细介绍 JavaScript 中的 Proto 与 Prototype

作者:迹忆客 最近更新:2023/03/10 浏览次数:

在 JavaScript 中,我们说一切都是对象。在本文中,你将更深入地了解 JavaScript 中的 __proto__prototype 是什么,以及为什么一切都是对象这句话成立。

每当你在 JavaScript 中创建数组、对象和函数时,你可能知道你可以访问所有可用的预定义方法。

你有没有想过我们如何获得所有这些方法?

这个问题的答案是因为 JavaScript 自动将 __proto__ 附加到包含所有这些属性和方法的数组、对象或函数。

__proto__ 只是一个对象。无论你是创建数组、对象还是函数,都将为你提供对这些特定方法的访问。

让我们举个例子来理解 __proto__

在这里,我们创建了一个数字数组 arr。如果你在 arr 上控制台 _proto__,你会看到它将列出数组提供的所有属性。

例如,它将提供对其构造函数和所有数组方法(如 push、pop、map、forEach 等)的访问权限。

var arr = [1,2,3];
console.log(arr.__proto__)

输出:

JavaScript 中的 Proto

这不仅适用于数组。无论你在 JavaScript 中创建什么,都会附加一个 __proto__ 对象。

所有这些存在于 __proto__ 中的属性都可以使用点运算符轻松访问。

现在我们了解了 __proto__ 对象,现在让我们看看 JavaScript 中的 prototype 是什么。

为此,我们举个例子。

console.log(arr.__proto__);
console.log(Array.prototype);

输出:

JavaScript 中的原型

假设你打印我们创建的 arr__proto__Array 类的 prototype。然后你会发现它们都是一样的,如上图所示。

这是因为每当我们创建一个数组时,它都会从数组类的原型中获取所有属性和方法,然后将其存储在你创建的数组的 __proto__ 中。

简单来说,prototype 是类的属性,而 __proto__ 是该类实例的属性。它们都是对象。

此外,如果你打印 arr.__proto____proto__ 的输出,你会看到它与 Object 类的 prototype 相同。这说明如下。

console.log(arr.__proto__.__proto__);
console.log(Object.prototype);

输出:

Proto 的输出

在这里,究竟发生的是数组 arr._proto__ 是数组类的原型。而 arr.__proto__.__proto__Object 类原型。

这形成了一个链,所以这个概念在 JavaScript 中被称为原型链。

最后,你可以看到,即使我们创建了一个数组,它也存储了 Object 的引用。

这现在适用于数组,但也适用于我们创建的所有其他东西,比如 JavaScript 中的对象和函数。这就是为什么我们说 JavaScript 中的一切都是对象。

对象原型,即 arr.__proto__.__proto__.__proto__ 只是 null,这意味着它是链的末端。

console.log(arr.__proto__.__proto__.__proto__);

输出:

null

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便