JavaScript原型、原型对象、原型链系列详解(二)

(二)、JavaScript原型对象

原型对象

JavaScript 的原型机制是一种非常强大和灵活的面向对象编程概念,它使用一个对象作为另一个对象的模板,从而实现继承。在 JavaScript 中,每个对象都有一个原型对象,它定义了该对象的属性和方法,并且充当着该对象的模板。

原型对象的定义

在 JavaScript 中,我们可以通过使用构造函数来创建一个对象,构造函数中的 this 指向的是当前对象本身。同时,JavaScript 也提供了一种特殊的构造函数,称之为 Object 构造函数,它用来创建一个新的空对象。

当我们使用 Object 构造函数创建一个新的对象时,JavaScript 会自动为该对象创建一个原型对象,该原型对象会包含一些基本的属性和方法,例如 toString()、valueOf() 等。

除了使用 Object 构造函数创建对象之外,我们还可以通过使用原型对象来定义对象的属性和方法。JavaScript 中,每个对象都有一个 proto 属性,它指向该对象的原型对象。通过修改原型对象的属性和方法,我们可以影响到所有继承自该原型对象的对象。

例如,我们可以通过如下方式定义一个构造函数和它的原型对象:

// 定义一个构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 定义 Person 的原型对象
Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name + ', and I am ' + this.age + ' years old.');
};

在上面的例子中,我们定义了一个构造函数 Person,它包含两个属性 name 和 age。同时,我们还定义了一个 sayHello 方法,并将它添加到了 Person 的原型对象中。

原型对象的原理

当我们使用 new 关键字调用构造函数创建一个新的对象时,JavaScript 会自动为该对象创建一个 proto 属性,并将该属性指向构造函数的原型对象。

例如,当我们使用如下代码创建一个 Person 对象时:

var person = new Person('John', 30);

JavaScript 会先创建一个新的空对象,然后将该对象的 proto 属性指向 Person 构造函数的原型对象。接着,JavaScript 会调用 Person 构造函数,并将 this 指向该新创建的对象,最后将 name 和 age 属性添加到该对象中。

当我们调用 person 对象的 sayHello 方法时,JavaScript 首先会查找该对象本身是否具有该方法,由于 person 对象本身并没有该方法,因此 JavaScript 会查找 person 对象的 proto 属性指向的原型对象中是否具有该方法,如果有,就会调用该方法。如果原型对象中也没有该方法,JavaScript 会继续查找原型对象的 proto 属性指向的父原型对象,直到找到该方法为止,或者查找到原型链的末端仍未找到该方法,此时 JavaScript 会抛出一个 TypeError 异常。

在 JavaScript 中,每个对象都有一个原型链,它由一些原型对象构成,这些原型对象通过它们的 proto 属性连接在一起。当我们访问一个对象的属性或方法时,JavaScript 会按照如下的顺序查找该属性或方法:

首先查找该对象本身是否具有该属性或方法; 如果对象本身没有该属性或方法,则查找该对象的原型对象是否具有该属性或方法; 如果原型对象也没有该属性或方法,则查找原型对象的原型对象是否具有该属性或方法; 依次类推,直到找到该属性或方法为止,或者查找到原型链的末端仍未找到该属性或方法,此时 JavaScript 会抛出一个 TypeError 异常。 通过原型链,JavaScript 实现了对象的继承机制,这种继承机制既简单又灵活。当我们修改一个原型对象的属性或方法时,所有继承自该原型对象的对象都会受到影响,从而实现了代码的复用。

例如,我们可以通过如下方式定义一个新的构造函数 Student,并继承自 Person:

// 定义一个新的构造函数 Student
function Student(name, age, major) {
  // 调用父类构造函数,并传入参数
  Person.call(this, name, age);
  this.major = major;
}

// 设置 Student 的原型对象为 Person 的实例,从而继承 Person 的属性和方法
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// 定义 Student 的新方法
Student.prototype.study = function() {
  console.log('I am studying ' + this.major);
};

在上面的例子中,我们首先使用 call 方法调用了父类 Person 的构造函数,并传入了相应的参数。然后,我们将 Student 的原型对象设置为 Person 的实例,并修改该原型对象的 constructor 属性,以便它指向 Student 构造函数。

通过如上的方式,我们实现了一个新的构造函数 Student,并继承自 Person。同时,我们还为 Student 添加了一个 study 方法,以便它具有自己的行为。

总结

JavaScript 的原型机制是一种非常强大和灵活的面向对象编程概念,它通过一个对象作为另一个对象的模板,实现了继承。每个对象都有一个原型对象,它定义了该对象的属性和方法,并充当着该对象的模板。

JavaScript 中,每个对象都有一个 proto 属性,它指向该对象的原型对象。通过修改原型对象的属性和方法,我们可以影响到所有继承自该原型对象的对象。

JavaScript 的原型机制通过原型链实现了对象的继承机制,这种继承机制既简单又灵活,可以在不修改已有对象的基础上,对它们进行扩展和修改,从而实现了代码的复用。

在开发 JavaScript 应用程序时,我们可以使用原型机制来实现对象之间的继承和组合,从而使代码更加简洁、易于维护和扩展。

在使用原型机制时,我们需要注意以下几点:

对象的原型对象可以是另一个对象或 null。 当我们访问对象的属性或方法时,JavaScript 会按照原型链的顺序查找该属性或方法。 对象的原型对象可以通过 proto 属性访问和修改。 我们可以通过修改原型对象的属性和方法,影响到所有继承自该原型对象的对象。

共享资源关注公众号获取

alt

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/484682.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

力扣100热题[哈希]:最长连续序列

原题:128. 最长连续序列 题解: 官方题解:. - 力扣(LeetCode)题解,最长连续序列 :哈希表 官方解题思路是先去重,然后判断模板长度的数值是否存在,存在就刷新&#xff0c…

【4XVR】win11局域网共享3D影片给quest3

准备工作 首先要有一个路由器,使电脑和quest3处于同一个局域网下 一.创建一个离线账户 打开设置选择账户 添加账户 二.共享文件 选择要共享的文件夹,右键打开属性,点击共享 选择刚刚创建的用户,点击共享即可 三.使用quest观影 …

AttributeError: ‘_MSDataLoaderIter‘ object has no attribute ‘_put_indices‘

问题描述 复现代码过程中遇到错误:AttributeError: _MSDataLoaderIter object has no attribute _put_indices 解决方案 出错的原因是代码中使用了不存在的属性"_put_indices"。这个错误可能与你使用的版本不兼容有关。在pytorch1.x版本中,&q…

Unity基础框架

公共模块 单例基类 如果有很多个这样的单例模式对象,创建他们时都要重复的写单例模式代码。那么能不能利用泛型来减少这部分重复的工作量呢。 单例模式基类,最简单的写法 继承MonoBehaviour的单例基类 所以需要做一些改进 获取单例时如果为空,创建一个名字一样的物体,挂…

力扣HOT100 - 283. 移动零

解题思路: 双指针 指针 i 用于寻找不为零的位置 指针 j 用于寻找为零的位置 不为零时,自己与自己交换,i 和 j 同时向下一个位置移动 为零时,nums[ i ]与nums[ j ]交换,使零向后移动 class Solution {public void…

YOLOv8 | 注意力机制 | 添加ResBlock_CBAM注意力机制——论文必备(全网独家)

⭐欢迎大家订阅我的专栏一起学习⭐ 🚀🚀🚀订阅专栏,更新及时查看不迷路🚀🚀🚀 YOLOv5涨点专栏:http://t.csdnimg.cn/96Cv5 YOLOv8涨点专栏:http://t.csdnimg.cn/hmCtL YOLOv7专栏:http://t.csdnimg.cn/lA95R 💡魔改网络、复现论文、优化创新💡

python学习9:python的代码中的数据类型转换

python中数据类型的转换 1.为什么需要转换类型呢? 数据类型之间,在特定的场景下,是可以相互转换的,如字符串转数字,数字转字符串等;数据类型转换,在以后是我们经常使用到的功能,例如…

js工具方法记录

校验数字是否有效的11位手机号 function isValidPhoneNum(value: string) {return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value) }手机号中间4位掩码 function maskPhoneNum(phone: string, space false) {if (!phone) {return }const reg /(\d{3})\d{4}(\d{4})/return pho…

Linux常用命令和基础命令合集---非常推荐

非常好用的Linux通用基础常用命令和高级命令。 下载链接:https://download.csdn.net/download/lishihuijava/89026399

Python Flask 将数据传递给前端

from flask import Flask, render_templateapp Flask(__name__)app.route("/index") def index():data {name: "张三","age": 18,}return render_template("index2.html", datadata)if __name__ __main__:app.run()<!DOCTYPE ht…

OD C卷 - 分披萨

分披萨 有大小不同的奇数块披萨&#xff1b;从A开始轮流取披萨&#xff0c;第一块可以任意选取&#xff0c;其他都必须从缺口开始选&#xff1b;B每次都选最大块的&#xff0c; A知道B的想法&#xff1b;求A能获得的披萨块总和的最大值&#xff1b; 输入描述&#xff1a; 第一…

企业微信变更主体公证怎么弄?

企业微信变更主体有什么作用&#xff1f;现在很多公司都用企业微信来加客户&#xff0c;有时候辛辛苦苦积累了很多客户&#xff0c;但是公司却因为各种各样的原因需要注销&#xff0c;那么就需要通过企业微信变更主体的方法&#xff0c;把企业微信绑定的公司更改为最新的。企业…

Prometheus+Grafana 监控Tongweb嵌入式(by lqw)

文章目录 1.思路2.部署准备3.Grafana仪表盘json文件下载4.tw嵌入式jar包本地引入依赖并测试运行5.运行jmx_prometheus_javaagent-0.19.0.jar形式获取监控数据&#xff08;方法一&#xff09;6.使用Actuator 获取监听数据&#xff08;方法二&#xff09;7.Prometheus部署8.Prome…

【Nebula笔记】简介及安装

目录 一、简介 (一) 什么是图数据库 二、安装 (一) 原生安装 (二) Docker & Docker compose 1. Docker安装 Linux Window 2. 部署NebulaGraph (三) to MAC 三、Nebula Graph Studio (一) 版本兼容性 (二) 原生安装 (三) Docker compose (四) 连接Nebula Gra…

Docker(二):Docker常用命令

docker 查看docker支持的所有命令和参数。 ➜ ~ docker Management Commands:config Manage Docker configscontainer Manage containersimage Manage imagesnetwork Manage networksnode Manage Swarm nodesplugin Manage pluginssecret …

STM32之HAL开发——HAL库框架介绍

HAL库外设设计思想 HAL库借鉴面向对象的设计思想&#xff0c;将外设驱动封装为对象。 HAL库使用主线 HAL使用的主要用在俩个地方&#xff0c;无外乎外设初始化以及外设的使用。想用好这两个功能&#xff0c;我们首先得对外设的封装有一定的了解。 句柄结构体 xx_HandleTypeDef…

JAVA学习笔记19(面向对象编程)

1.面向对象编程 1.1 类与对象 1.类与对象的概念 ​ *对象[属性]/[行为] ​ *语法 class cat {String name;int age; }main() {//cat1就是一个对象//创建一只猫Cat cat1 new Cat();//给猫的属性赋值cat1.name "123";cat1.age 10; }​ *类是抽象的&#xff0c;…

蓝桥杯真题:幸运数字

这道题可以用 integer.string&#xff08;&#xff09;求每个进制的数&#xff0c;但这里要每一位数相加&#xff0c;所以用这个方法会比较麻烦&#xff0c;如下 import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner scan new Sc…

电脑不能读取移动硬盘,但是可以读取U盘解决方法

找到此电脑 右键设备管理器&#xff0c;找到其中的通用串行总线控制器。 注意&#xff0c;凡是插入到电脑当中不能读取的U盘或者移动硬盘&#xff0c;都会在通用串行总线控制器当中显示为USB大容量存储设备 鼠标选中“USB大容量存储设备”&#xff0c;右键卸载它。此时&#x…

软件应用,宠物医院兽医开的处方单管理系统软件教程,宠物店营业软件教程

软件应用&#xff0c;宠物医院兽医开的处方单管理系统软件教程&#xff0c;宠物店营业软件教程 一、前言 以下软件操作教程以 佳易王宠物医院兽医处方软件V17.0为例说明 件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 在开处方单的时候&#xff0c;可以打…