当前位置: 首页 > news >正文

Javascript什么是原型和原型链,八股文

原型:函数都有prototype属性,称之为原型,也称为原型对象
原型可以放一些属性和方法,共享给实例对象使用
原型可以做继承

原型链:对象都有__proto__属性,这个属性指向它的原型对象,原型对象也是对象,也有__proto__属性,指向原型对象的原型对象,这样一层一层形成的链式结构称为原型链,最顶层找不到则返回 null

1.javascript原型链(经典函数构造器 + prototype)

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}`);
};const alice = new Person('Alice');
alice.sayHello();  // Hello, my name is Aliceconsole.log(alice.__proto__ === Person.prototype);  // true
console.log(Person.prototype.__proto__ === Object.prototype);  // true
console.log(Object.prototype.__proto__);  // null

解释:

  • 每个对象都有一个内部属性 [[Prototype]](常用 __proto__ 访问),指向它的原型对象。

  • 当访问对象的属性或方法时,如果自身没有,会沿着 [[Prototype]] 一层层往上找,这个查找链就是原型链

  • 上面例子中,alice 访问 sayHello 方法时没在自身属性里找到,就去它的原型对象 Person.prototype 查找。

  • Person.prototype 的原型是 Object.prototype,这构成了原型链的多层关系。

  • Object.prototype 的原型是 null,链条终点。

2.TypeScript 版本(class 语法)

class Person {name: string;constructor(name: string) {this.name = name;}sayHello() {console.log(`Hello, my name is ${this.name}`);}
}const alice = new Person('Alice');
alice.sayHello();  // Hello, my name is Aliceconsole.log(Object.getPrototypeOf(alice) === Person.prototype);  // true
console.log(Object.getPrototypeOf(Person.prototype) === Object.prototype);  // true
console.log(Object.getPrototypeOf(Object.prototype));  // null

解释:

  • TypeScript 使用 class 关键字声明类,语法更现代,代码更清晰。

  • sayHello 是类的方法,实际挂载在 Person.prototype 上,实例通过原型链访问。

  • Object.getPrototypeOf() 用来获取对象的原型,效果和 __proto__ 类似,但更标准安全。

  • 原型链关系和JavaScript版本完全一样:实例原型 → 类的 prototypeObject.prototypenull

3.总结

  • JavaScript版本用构造函数和显式原型,适合传统理解原型链机制。

  • TypeScript版本用类语法,更符合现代代码风格,本质上还是基于JavaScript原型链实现。

http://www.dtcms.com/a/250547.html

相关文章:

  • 单片机 - STM32F407 ADC 模式详解:单次转换、连续转换、扫描模式、非扫描模式
  • 【飞牛os0.9.9系统使用docker 挂载cgroup2异常问题】
  • platformIO开发ESP32程序时,出现崩溃重启时如何根据堆栈定位到源代码位置
  • 抖音 pc + 翻页
  • 《高等数学》(同济大学·第7版)第五章第一节定积分的概念与性质
  • 动态代理选择:JDK vs CGLIB
  • 荒原之梦:致力于考研数学实战
  • 如何卸载360及360壁纸
  • 【unitrix】 1.6 数值类型基本结构体(types.rs)
  • Java大模型开发入门 (8/15):连接外部世界(上) - RAG入门与文档加载
  • Ubuntu安装Gym及其仿真
  • 永磁同步电机控制算法--双矢量模型预测转矩控制MPTC(占空比)
  • Keepalived 高可用
  • MACD指标
  • java中扩展运算符
  • <11>-MySQL事务管理
  • 算法训练第十七天
  • Hugging face 和 魔搭
  • 浅拷贝 与 深拷贝
  • LeetCode - 35. 搜索插入位置
  • 戴维南端接与 RC端接
  • static的三种作用
  • 重读《人件》Peopleware -(16)Ⅲ 适当人选 Ⅰ霍恩布洛尔因素(上)
  • callback的原理和机制
  • <10>-MySQL索引特性
  • 【电声耦合】TaOsSi和NbOsSi超导中的电子-声子耦合
  • c++编译第三方项目报错# pragma warning( disable: 4273)
  • 多线程下 到底是事务内部开启锁 还是先加锁再开启事务?
  • AnimateCC及CreateJS:打飞机的4版本V1、V2、V3、V4
  • hot100 -- 12.栈系列