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

面试之《原型与原型链》

在 JavaScript 中,原型(Prototype)原型链(Prototype Chain) 是实现对象继承和属性共享的核心机制。以下是详细介绍:

一、原型(Prototype)

  1. 基本概念

    • 每个函数(包括构造函数)都有一个 prototype 属性,指向一个对象,称为原型对象
    • 当使用 new 调用构造函数创建实例时,实例内部会有一个隐藏属性 __proto__(ES6 规范中称为 [[Prototype]]),指向构造函数的原型对象。
    • 原型对象的作用是为所有实例共享属性和方法,避免重复定义。
  2. 示例

    function Person(name) {
      this.name = name;
    }
    
    // 原型对象添加方法
    Person.prototype.sayHello = function() {
      console.log(`Hello, ${this.name}`);
    };
    
    const person = new Person("Alice");
    console.log(person.__proto__ === Person.prototype); // true
    person.sayHello(); // Hello, Alice
    

二、原型链(Prototype Chain)

  1. 基本概念

    • 每个对象(包括原型对象)都有自己的 __proto__,指向其“父级”原型对象,形成一条链式结构,称为原型链
    • 当访问对象的属性或方法时,JavaScript 会沿着原型链向上查找,直到找到目标属性或到达 null(终点)。
  2. 原型链结构

    Object.prototype ← Function.prototype ← ... ← 自定义原型 ← 实例
    
    • 所有对象的最终原型是 Object.prototype,它定义了 toString()valueOf() 等通用方法。
    • 函数的原型是 Function.prototype,而 Function.prototype 的原型是 Object.prototype
  3. 示例

    const obj = {};
    console.log(obj.toString()); // 来自 Object.prototype
    console.log(obj.hasOwnProperty("toString")); // false(属于原型链)
    

三、关键特性

  1. 属性查找规则

    • 优先查找对象自身的属性,若不存在则沿原型链向上查找。
    • 修改对象自身的属性会直接覆盖原型链中的同名属性。
  2. 原型链的继承

    • 通过修改原型对象,可以实现类似“继承”的效果。例如:
      function Animal() {}
      Animal.prototype.eat = function() { console.log("Eating..."); };
      
      function Dog() {}
      Dog.prototype = Object.create(Animal.prototype); // Dog 的原型链继承 Animal
      Dog.prototype.bark = function() { console.log("Woof!"); };
      
      const dog = new Dog();
      dog.eat(); // 继承自动物原型
      dog.bark(); // 自身方法
      
  3. 原型链的终点

    • Object.prototype.__proto__ 的值为 null,表示原型链的结束。

四、相关方法

  1. isPrototypeOf()
    检查一个对象是否是另一个对象的原型:

    console.log(Animal.prototype.isPrototypeOf(dog)); // true
    
  2. hasOwnProperty()
    判断属性是否是对象自身的属性(而非原型链中的属性):

    console.log(dog.hasOwnProperty("bark")); // true
    
  3. Object.getPrototypeOf()
    获取对象的原型(ES6 方法,替代 __proto__):

    console.log(Object.getPrototypeOf(dog) === Dog.prototype); // true
    

五、注意事项

  • 避免原型链过长:过长的原型链会影响属性查找性能。
  • 原型与实例的动态关联:修改原型对象会影响所有后续创建的实例,但已存在的实例不会受影响。
  • class 语法糖:ES6 的 class 本质上仍基于原型链,只是语法糖简化了实现。

总结

  • 原型是对象共享属性和方法的基础。
  • 原型链通过 __proto__ 连接对象,实现属性的继承和查找。
  • 理解原型链有助于掌握 JavaScript 的核心机制(如继承、多态),并避免常见错误。

http://www.kler.cn/a/581504.html

相关文章:

  • LLM剪枝代码解释与实现
  • 企业4A数字化架构演进与治理方案(122页PPT)
  • 【RocketMQ 存储】- 异常退出恢复逻辑 recoverAbnormally
  • RabbitMQ之旅(2)
  • jumpserver 网络安全 网络安全 authenticity
  • VanillaVueSvelteReactSolidAngularPreact前端框架/库的简要介绍及其优势
  • MicroPython 智能硬件开发完整指南
  • Unity DOTS从入门到精通之EntityCommandBufferSystem
  • 【GPT入门】第11课 FunctionCall调用本地代码入门
  • [从零开始学习JAVA] 新版本idea的数据库图形化界面
  • 如何最好地复制MS SQL Server中的整个数据库?
  • Qt for Android(b站讯为QT教程)
  • TinyWebServer项目笔记 ——03 http连接处理(上)
  • 前端生成二维码 + 条形码
  • HTTPS工作原理与安全机制详解(仅供参考)
  • 亚远景-企业如何通过ASPICE评估:汽车软件开发的实践指南
  • 用CSS画一条0.5px的线
  • 深度学习实验
  • 跳表数据结构
  • CNN-BiLSTM、BiLSTM、CNN多变量时间序列光伏功率预测Matlab