博客
关于我
重新认识原型和原型链二
阅读量:519 次
发布时间:2019-03-07

本文共 1974 字,大约阅读时间需要 6 分钟。

原型(Prototype)、proto 和 constructor 是 JavaScript 中非常重要的概念,了解它们对于理解对象创建和继承 mechanism 是必不可少的。今天我将带你深入探讨这些属性,并通过实例解释它们的作用。

1. 原型(Prototype)和 constructor 属性

原型(Prototype)是一个非常重要的概念,它既是原型属性也是原型对象。每个函数在定义时都带有 prototype 属性,而构造函数(如 User)的 prototype 属性包含常规方法和属性,这些方法和属性可以被所有该构造函数创建的实例共享和继承。

通过以下代码可以观察到这一点:

function User() {}console.log(User.prototype); // 输出: { constructor: (function User()), __proto__: Object }

这里可以看到, User 函数的 prototype 属性指向了一个对象,其中包含 constructor 属性。由于constructor 属性本身也是一个函数,它指向当前的 User 函数,这就形成了一个循环:

User.prototype.constructor = User; // 造成循环

constructors 的主要作用是什么?它为构造函数提供了一种方式,以便原型链上的方法能够正确地指向构造函数。虽然这一特性在现代 JavaScript 中不太常用,但了解它有助于理解原型机制的基础。

2. proto(隐式原型)

proto 是 JavaScript 中的隐式原型属性,它指向构造函数的显式原型(prototype)。简单来说,每个对象(甚至包括数据类型)都有一个 proto 属性,而这个属性会指向它的显式原型。如果没有显式指定,隐式原型会指向 Object 的原型。

例如:

function User() {}var user = new User();console.log(user.__proto__); // 输出: User.prototype

通过上述代码可以看出,用户对象的 proto 指向了 User 构造函数的显式原型。这种机制允许用户对象能够访问构造函数原型中定义的属性和方法。

3. 数据类型的隐式原型

除了对象,所有数据类型(包括 null 和 undefined 之外)都有自己的隐式原型。例如:

console.log(10.__proto__); // 输出: Number.prototypeconsole.log('10'.__proto__); // 输出: String.prototypeconsole.log(true.__proto__); // 输出: Boolean.prototypeconsole.log("{}).__proto__; // 输出: Object.prototype

这些隐式原型允许 JavaScript 实例能够访问与它们对应的数据类型相关的属性和方法。例如,数值对象可以通过 Number.prototype 方法获取到 to string 等方法。

4. 构造函数和实例对象

构造函数和实例对象之间的关系是通过原型链实现的。构造函数的显式原型(prototype)包含了一系列方法和属性,而实例对象的隐式原型(proto)则指向构造函数的显式原型。

例如:

function Date() {}var time = new Date();console.log(time.__proto__ === Date.prototype); // 输出: true

这一机制允许实例对象能继承构造函数原型中的方法和属性,从而实现代码复用和代码共享。

5. 特殊情况注意事项

  • null 和 undefined:这些值的 proto 属性是 undefined。
  • Object.prototype 没有构造函数:注意到,在 Object.prototype 中,构造函数是 Object(即 Object 构造函数)。
  • 数组和对象的原型链:数组和对象实例的 proto 指向不同的显式原型。

6. 结论

原型、proto 和 constructor 属性共同构成了 JavaScript 中对象的 inheritance mechanism。理解这些属性的作用有助于更好地理解 JavaScript 的对象模型,从而提高代码的维护性和可读性。在实际开发中,合理利用原型链可以显著提升代码性能,减少 memory leak。希望你对这些概念有了更深入的理解,欢迎继续探索 JavaScript 的其他奥秘。如果你有任何问题,欢迎在评论区与我交流。

转载地址:http://bhnnz.baihongyu.com/

你可能感兴趣的文章
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询,正数降序排序,负数升序排序
查看>>
MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
查看>>
mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
查看>>
mysql 死锁(先delete 后insert)日志分析
查看>>
MySQL 死锁了,怎么办?
查看>>