一文搞懂JavaScript中原型与原型链

yizhihongxing

一文搞懂JavaScript中原型与原型链

在JavaScript中,每个对象都有一个原型对象,这个对象可以拥有自身的属性和方法,并且还可以指向另一个原型对象,称为原型链。理解原型和原型链的概念,对于JavaScript的面向对象编程是非常重要的。在本文中,我们将详细讲解JavaScript中原型和原型链的概念及其实现方式。

原型

在JavaScript中,每个对象都有一个原型对象。原型对象可以为对象提供“继承”功能。我们可以通过使用Object.create()方法创建一个对象的原型对象:

const Person = function(name, age) {
  this.name = name;
  this.age = age;
};
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};
const person1 = new Person("John Doe", 30);
person1.sayHello(); // 输出"Hello, my name is John Doe."

在这个例子中,我们使用了构造函数Person创建了一个Person对象,然后我们在Person.prototype上添加了sayHello方法。这个sayHello方法被person1对象所继承,在person1对象上调用sayHello方法时,将输出“Hello, my name is John Doe.”。

原型链

JavaScript中的对象可以指向一个原型对象,这个原型对象也可以指向另外一个原型对象。这样一直层层链接下去,便形成了原型链。

在JavaScript中,每个对象都有一个原型对象。当我们尝试访问一个对象的属性时,会首先在这个对象本身的属性中查找,如果找不到,就会去它的原型对象中查找。如果还找不到,就会一直顺着原型链向上查找,直到到达一个原型对象为止(通常是Object.prototype)。

让我们来看一个示例:

function TriAngle() {}
TriAngle.prototype.sides = 3;

function Equilateral() {}
Equilateral.prototype = Object.create(TriAngle.prototype);

const equi = new Equilateral();
console.log(equi.sides); // 输出3

在这个例子中,我们定义了两个构造函数TriAngle和Equilateral。TriAngle定义了一个属性sides,值为3。Equilateral对象通过使用Object.create()从TriAngle对象中创建了一个原型对象。最后我们创建了一个新的equi对象,并打印它的sides属性。

在这个示例中,我们通过原型链,从Equilateral对象中找到了TriAngle对象中的sides属性。这是因为在Equilateral对象中没有sides属性,所以在原型链中继续向上查找,找到了TriAngle对象。

总结

本文我们讲解了JavaScript中原型和原型链的概念及其实现方式。在JavaScript中,每个对象都有一个原型对象,原型对象可以为对象提供“继承”功能。原型链则是JavaScript中实现继承的方式之一,通过原型链可以访问一个对象的原型对象。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:一文搞懂JavaScript中原型与原型链 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 浅析Javascript使用include/require

    浅析 Javascript 使用 include / require Javascript 不同于其他编程语言存在预编译及模板引入机制,因此导致在项目开发过程中可能出现一个 JS 文件需要导入其他 JS 文件中的函数或变量的情况,此时就需要使用 include 或 require 进行模块引入操作。 include 与 require include 与 r…

    JavaScript 2023年5月27日
    00
  • JavaScript 中的运算符和表达式介绍

    下面给你详细讲解一下“JavaScript 中的运算符和表达式介绍”的完整攻略。 运算符 在JavaScript中,运算符是用来进行各种数学和逻辑运算的符号。常见的运算符有以下几种。 算术运算符 算术运算符用于执行基本的数学运算,比如加、减、乘和除等。常用的算术运算符如下: 运算符 描述 + 加法 – 减法 * 乘法 / 除法 % 取余 ++ 自增 — 自…

    JavaScript 2023年5月17日
    00
  • Javascript学习笔记一 之 数据类型

    下面是关于“Javascript学习笔记一 之 数据类型”的完整攻略。 Javascript学习笔记一 之 数据类型 基本数据类型 Javascript有以下六种基本数据类型: Number(数字):整数或小数,例如:123 或 3.14。 String(字符串):由单引号或双引号包裹起来的一系列字符,例如:’Hello World’。 Boolean(布尔…

    JavaScript 2023年5月18日
    00
  • JS中BOM相关知识点总结(必看篇)

    那我来给您讲解一下。 JS中BOM相关知识点总结(必看篇) BOM是浏览器对象模型(Browser Object Model)的缩写,是JavaScript与浏览器之间的交互接口,通过它可以获取和操作浏览器的窗口、框架、历史记录等信息。下面是JS中BOM的相关知识点总结: 1. window对象 window对象是指浏览器打开的窗口,它是BOM中的顶层对象。…

    JavaScript 2023年6月11日
    00
  • javascript实现最长公共子序列实例代码

    下面是关于“javascript实现最长公共子序列实例代码”的完整攻略。 完整任务说明 本任务要求实现一个javascript代码,用于寻找两个字符串的最长公共子序列。 功能要求 输入两个字符串,比如”abcdfg”和”abdfg”,程序需要输出它们的最长公共子序列。 实现的算法需要支持对长度为m和n的字符串进行快速计算,时间复杂度需要为 O(m*n)。 背…

    JavaScript 2023年5月28日
    00
  • JavaScript中SetInterval与setTimeout的用法详解

    JavaScript中SetInterval与setTimeout的用法详解 SetInterval 概念 setInterval()是JavaScript中的一个全局函数,用于创建一个可以重复执行的定时器。 语法 setInterval(func, delay, [param1, param2, …]); func:定时器每次运行时要调用的函数 del…

    JavaScript 2023年5月27日
    00
  • js和as的稳定传值问题解决

    下面是 “js和as的稳定传值问题解决”的完整攻略。 问题描述 在从JS向AS3进行通讯时,为了保证数据的正确和稳定传递,需要使用ExternalInterface.call 和 ExternalInterface.addCallback 方法进行数据的传递。但是,在使用过程中,发现有些情况下这些方法并不总是稳定的。 解决方法 为了解决传递数据的稳定性问题,…

    JavaScript 2023年6月11日
    00
  • JS获取html元素的标记名实现方法

    获取 HTML 元素标记名是 JavaScript 中常用的操作,以下是实现方法的详细攻略: 1. 使用 tagName 属性获取标记名 可以使用 tagName 属性来获取 HTML 元素的标记名。该属性只能用于 DOM 对象,对于文本节点和注释节点是无效的。 示例代码如下: // 获取某个元素的标记名 const element = document.g…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部