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

原型和原型链

原型(Prototype) 和 原型链(Prototype Chain) 是 JavaScript 中非常重要的概念,它们是 JavaScript 实现继承和共享属性和方法的核心机制。理解原型和原型链可以帮助你更好地掌握 JavaScript 的面向对象编程(OOP)特性。

1. 原型(Prototype)
什么是原型?
在 JavaScript 中,每个对象都有一个隐藏的 [[Prototype]] 属性(可以通过 __proto__ 访问),它指向另一个对象,这个对象就是当前对象的 原型。
原型是一个对象,它包含了一些属性和方法,可以被其他对象共享。
原型的作用:
共享属性和方法:通过原型,多个对象可以共享相同的属性和方法,而不需要每个对象都单独定义。
实现继承:原型是 JavaScript 实现继承的基础。
例子:

const person = {name: "Alice",greet: function() {console.log(`Hello, my name is ${this.name}`);}
};const student = Object.create(person); // 以 person 为原型创建 student 对象
student.name = "Bob";student.greet(); // Hello, my name is Bob

解释:
person 是一个普通对象,它有一个 name 属性和一个 greet 方法。
student 对象通过 Object.create(person) 创建,它的原型是 person。
因此,student 可以访问 person 的属性和方法。
2. 原型链(Prototype Chain)
什么是原型链?
原型链是由对象的原型组成的链式结构。当访问一个对象的属性或方法时,JavaScript 会沿着原型链向上查找,直到找到该属性或方法,或者到达原型链的顶端(null)。
原型链的工作原理:
当访问一个对象的属性或方法时,JavaScript 会先在对象自身查找。
如果找不到,就会去它的原型([[Prototype]])中查找。
如果原型中也没有,就会继续去原型的原型中查找,直到找到或到达 null。
例子:

const animal = {eat: function() {console.log("Eating...");}
};const dog = Object.create(animal); // dog 的原型是 animal
dog.bark = function() {console.log("Woof!");
};const myDog = Object.create(dog); // myDog 的原型是 dog
myDog.name = "Buddy";myDog.eat(); // Eating...
myDog.bark(); // Woof!
console.log(myDog.name); // Buddy

解释:
myDog 对象自身有 name 属性,所以直接访问 myDog.name。
myDog 没有 eat 方法,所以去它的原型 dog 中查找,dog 也没有 eat 方法,继续去 dog 的原型 animal 中查找,找到了 eat 方法。
myDog 没有 bark 方法,去它的原型 dog 中查找,找到了 bark 方法。
3. 构造函数与原型
构造函数:
构造函数是用来创建对象的函数,通常以大写字母开头。
通过 new 关键字调用构造函数时,会创建一个新对象,并将该对象的原型指向构造函数的 prototype 属性。
例子:

function Person(name) {this.name = name;
}Person.prototype.greet = function() {console.log(`Hello, my name is ${this.name}`);
};const alice = new Person("Alice");
alice.greet(); // Hello, my name is Alice

解释:
Person 是一个构造函数。
Person.prototype 是 Person 的原型对象,它包含了一个 greet 方法。
通过 new Person("Alice") 创建的对象 alice,它的原型是 Person.prototype,因此可以访问 greet 方法。
4. 原型链的顶端
原型链的顶端是 Object.prototype,它是所有对象的最终原型。
Object.prototype 的原型是 null,表示原型链的结束。
例子:

console.log(Object.prototype.__proto__); // null

5. 原型链的应用

(1) 实现继承

通过原型链,可以实现对象之间的继承。

例子:
function Animal(name) {this.name = name;
}Animal.prototype.eat = function() {console.log(`${this.name} is eating.`);
};function Dog(name, breed) {Animal.call(this, name); // 调用父类构造函数this.breed = breed;
}// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复构造函数指向Dog.prototype.bark = function() {console.log("Woof!");
};const myDog = new Dog("Buddy", "Golden Retriever");
myDog.eat(); // Buddy is eating.
myDog.bark(); // Woof!
解释:
  1. Dog 继承了 Animal 的属性和方法。
  2. Dog.prototype 的原型是 Animal.prototype,因此 Dog 的实例可以访问 Animal 的方法。

(2) 共享方法

通过原型,可以让多个对象共享相同的方法,节省内存。

例子:
function Car(make, model) {this.make = make;this.model = model;
}Car.prototype.drive = function() {console.log(`Driving ${this.make} ${this.model}`);
};const car1 = new Car("Toyota", "Corolla");
const car2 = new Car("Honda", "Civic");car1.drive(); // Driving Toyota Corolla
car2.drive(); // Driving Honda Civic

解释:
drive 方法定义在 Car.prototype 上,所有 Car 的实例共享这个方法,而不是每个实例都单独定义。
6. 总结
概念    描述
原型    每个对象都有一个原型,原型是一个对象,包含共享的属性和方法。
原型链    由对象的原型组成的链式结构,用于查找属性和方法。
构造函数    用于创建对象的函数,通过 new 调用时会创建一个新对象。
继承    通过原型链实现对象之间的继承。
共享方法    将方法定义在原型上,可以让多个对象共享相同的方法,节省内存。
原型和原型链的核心:
原型:每个对象都有一个原型,用于共享属性和方法。
原型链:当访问对象的属性或方法时,JavaScript 会沿着原型链向上查找。
通过理解原型和原型链,你可以更好地掌握 JavaScript 的继承机制和对象模型,写出更高效、更灵活的代码!

http://www.xdnf.cn/news/422821.html

相关文章:

  • list基础用法
  • API安全
  • 【PmHub后端篇】PmHub中基于自定义注解和AOP的服务接口鉴权与内部认证实现
  • 【fastadmin开发实战】在前端页面中使用bootstraptable以及表格中实现文件上传
  • 我的五周年创作纪念日
  • 系统稳定性之上线三板斧
  • 嵌入式开发学习日志(数据结构--顺序结构单链表)Day19
  • upload-labs通关笔记-第4关 文件上传之.htacess绕过
  • Spring Boot 应用中实现基本的 SSE 功能
  • 鸿蒙 核心与非核心装饰器
  • [Java实战]Spring Boot 3 整合 Ehcache 3(十九)
  • Python慕课学习记录报告
  • c# UTC 时间赋值注意事项
  • Linux:进程控制2
  • 医疗实时操作系统方案:手术机器人的微秒级运动控制
  • 单反和无反(私人笔记)
  • 高并发系统设计需要考虑哪些问题
  • 极限学习机进行电厂相关数据预测
  • 目标检测任务常用脚本1——将YOLO格式的数据集转换成VOC格式的数据集
  • 滑动窗口——水果成篮
  • 正则表达式常用验证(一)
  • vim,gcc/g++,makefile,cmake
  • 如何用URDF文件构建机械手模型并与MoveIt集成
  • 获取accesstoken时,提示证书解析有问题,导致无法正常获取token
  • do while
  • 从代码学习深度学习 - 全卷积神经网络 PyTorch版
  • 【网络编程】七、详解HTTP 搭建HTTP服务器
  • MySQL 5.7在CentOS 7.9系统下的安装(上)——以rpm包的形式下载mysql
  • 音频特征工具Librosa包的使用
  • Windows Java gRPC 示例