构造函数的原型&原型链

代码示例

js 复制代码
// 定义一个构造函数 Test
function Test() {
    this.name = '张三'
};
//向构造函数的原型添加一个属性 age=18
Test.prototype.age = 18;

//使用构造函数 Test 来实例化一个新对象
const test = new Test();

//向 Object.prototype 添加了一个名为 sex 的属性,其值为 '男'
Object.prototype.sex = '男';


/**
 * 原型链就是,以一个对象为基准,以__proto__为链接的这条链条,一直到 Object.prototype 为止到这条链叫原型链
 * 
 * test{
 *  name: '张三'
 *  __proto__: Test.prototype{
 *      age: 18
 *      __proto__:Object.prototype{
 *          sex: '男',
 *          __proto__: null 
 *      }
 *  }
 }
 */

console.log(test.name);//张三
console.log(test.age);//18
console.log(test.sex);//男
console.log(test.dream);//undefined
console.log(Object.prototype.__proto__)// null

代码理解

  1. 定义了一个构造函数Test ,它会在被调用时给新创建的对象添加一个名为name的属性,并将其的值设为"张三"
  2. 向构造函数的原型(Test.prototype)添加一个名为age的属性,值为18。通过 new Test() 创建的实例都会继承这个age属性,除非它们自身覆盖了这个属性。
  3. new Test() 创建了一个新的对象 test,它拥有自己的name 属性,同时也继承了来自Test.prototype age 属性。
  4. 修改了 Object.prototype ,为其添加了一个名为 sex 的属性,其值为 '男'

原型链理解

test 对象的原型链结构。test.__proto__ 指向的是Test.prototype,而 Test.prototype.__proto__ 则指向 Object.prototype。最后Object.prototype.__proto__ null,表示原型链的末端。

综上所述我们可以理解原型链就是:

每个对象都有一个__proto__属性,它指向另一个对象,这个对象称之为对象的原型。当试图访问对象的属性时,javascript 引擎不仅会查找该对象自身拥有的对象,还会沿着__proto__向上查找,直到找到该属性或者到达原型链末端(即null)。即原型链就是,以一个对象为基准,以__proto__为链接的这条链条,一直到 Object.prototype 为止到这条链叫原型链

概念

原型(prototype):是所有由构造函数创建的实例共享的对象,包含了可以被这个实例访问的方法和属性。
__proto__:是对象的内部属性,指向创建它的构造函数的prorotype
原型链 :以对象为基准,以__proto__为链接的这条链条,一直到 Object.prototype 为止到这条链叫原型链。

相关推荐
Bl_a_ck16 分钟前
--openssl-legacy-provider is not allowed in NODE_OPTIONS 报错的处理方式
开发语言·前端·web安全·网络安全·前端框架·ssl
懒羊羊我小弟17 分钟前
手写符合Promise/A+规范的Promise类
前端·javascript
赵大仁30 分钟前
React vs Vue:点击外部事件处理的对比与实现
javascript·vue.js·react.js
Auc241 小时前
OJ判题系统第6期之判题逻辑开发——设计思路、实现步骤、代码实现(策略模式)
java·开发语言·docker·容器·策略模式
向日葵xyz1 小时前
Qt5与现代OpenGL学习(十一)OpenGL Widget鼠标控制直线旋转
开发语言·qt·学习
智慧地球(AI·Earth)1 小时前
OpenAI for Countries:全球AI基础设施的“技术基建革命”
开发语言·人工智能·php
不学无术の码农1 小时前
《Effective Python》第1章 Pythonic 思维总结——编写优雅、高效的 Python 代码
开发语言·python
肥肥呀呀呀2 小时前
在Flutter上如何实现按钮的拖拽效果
前端·javascript·flutter
双叶8362 小时前
(C语言)超市管理系统(测试版)(指针)(数据结构)(二进制文件读写)
c语言·开发语言·数据结构·c++
PXM的算法星球2 小时前
使用CAS操作实现乐观锁的完整指南
开发语言