【JavaScript】new原理解析

✨ 专栏介绍

在现代Web开发中,JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性,还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言,JavaScript具有广泛的应用场景,并且不断发展演进。在本专栏中,我们将深入学习JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。让我们一起开始JavaScript之旅吧!

在这里插入图片描述

文章目录

    • ✨ 专栏介绍
    • 引言
    • new关键字的介绍
    • new关键字的原理
    • new关键字的代码示例
    • new个对象呗
    • new.target
    • 结论
    • 😶 写在结尾
        • `前端设计模式专栏`
        • `Vue专栏`
        • `JavaScript(ES6)专栏`


引言

在JavaScript中,new是一个非常重要的关键字,它用于创建对象实例。虽然new看起来很简单,但它背后隐藏着一些复杂的原理和机制。本文将深入解析JavaScript中的new关键字,介绍其作用、原理,并提供一些代码示例来帮助读者更好地理解。

在这里插入图片描述

new关键字的介绍

在JavaScript中,new是一个用于创建对象实例的关键字。当使用new关键字调用一个函数时,它会执行以下操作:

  1. 创建一个空的简单 JavaScript 对象(即 {} );
  2. 为步骤 1 新创建的对象添加属性 __proto__ ,将该属性链接至构造函数的原型对象;
  3. 将步骤 1 新创建的对象作为 this 的上下文;
  4. 如果该函数没有返回对象,则返回 this

语法

new constructor[([arguments])]

参数

  • constructor

    一个指定对象实例的类型的类或函数。

  • arguments

    一个用于被 constructor 调用的参数列表。

创建一个用户自定义的对象需要两步:

  1. 通过编写函数来定义对象类型。
  2. 通过 new 来创建对象实例。

new关键字的原理

为了更好地理解new关键字背后的原理,我们可以手动实现一个简化版的new操作符。下面是一个示例代码:

function myNew(constructor, ...args) {// 创建一个空对象const obj = {};// 将空对象的原型指向构造函数的prototype属性Object.setPrototypeOf(obj, constructor.prototype);// 将构造函数内部的this指向这个空对象const result = constructor.apply(obj, args);// 如果构造函数返回了一个对象,则返回该对象;否则返回新创建的对象return typeof result === 'object' && result !== null ? result : obj;
}

通过上述代码,我们可以手动实现一个类似于new关键字的操作。

首先,我们创建一个空对象obj,并将其原型指向构造函数的prototype属性。

然后,我们将构造函数内部的this指向这个空对象,并执行构造函数内部的代码。最后,根据构造函数的返回值决定返回新创建的对象还是该返回值。

new关键字的代码示例

下面是一个使用new关键字创建对象实例的示例代码:

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}const john = new Person('John', 25);
john.sayHello(); // 输出:Hello, my name is John and I'm 25 years old.

在上述示例中,我们定义了一个Person构造函数,并在其原型上添加了一个sayHello方法。

然后,通过使用new关键字调用Person构造函数来创建一个名为johnPerson实例。最后,我们调用john实例上的sayHello方法来输出一段问候语。

new个对象呗

function Boyfriend(name, age) {this.name = name;this.age = age;this.gender = "male";this.isCool = true;
}function Girlfriend(name, age) {this.name = name;this.age = age;this.gender = "female";this.isBeautiful = true;
}const john = new Boyfriend("John", 25);
const lisa = new Girlfriend("Lisa", 23);console.log(john); // 输出:Boyfriend { name: 'John', age: 25, gender: 'male', isCool: true }
console.log(lisa); // 输出:Girlfriend { name: 'Lisa', age: 23, gender: 'female', isBeautiful: true }

在上述示例中,我们定义了两个构造函数:Boyfriend和Girlfriend。

这两个构造函数分别用于创建男朋友和女朋友的对象实例。

每个构造函数都接受名字和年龄作为参数,并在对象实例中设置相应的属性(如姓名、年龄、性别和是否正帅气或者漂亮)。通过使用new关键字调用这两个构造函数,我们可以分别创建一个名为john的男朋友对象和一个名为lisa的女朋友对象。最后,我们打印出这两个对象实例,可以看到它们分别具有相应的属性值。

new.target

new.target是一个在构造函数内部可用的元属性(meta property),它提供了一个指向正在被构造的实例的构造函数的引用。它可以用来确定构造函数是通过new关键字被调用还是直接调用。

下面是一些关于new.target的详细介绍:

  1. 使用方式:

    • 在构造函数内部,可以通过访问new.target来获取正在被构造的实例的构造函数。
    • 如果构造函数是通过new关键字被调用,那么new.target将指向该构造函数本身。
    • 如果构造函数是直接调用(而不是通过new关键字),那么new.target将为undefined。
  2. 功能:

    • 可以使用new.target来执行一些特定于构造函数调用的逻辑。例如,可以根据是否使用了new关键字来决定是否执行某些初始化操作。
    • 可以使用new.target来实现基于类的继承。在派生类中,可以通过super关键字和new.target来访问父类的构造函数。

下面是一个示例代码,演示了如何使用new.target:

function Person(name) {if (typeof new.target === "undefined") {throw new Error("Person must be instantiated using new");}this.name = name;
}function Student(name, grade) {Person.call(this, name);this.grade = grade;
}Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;const john = new Person("John"); // 正常调用,创建一个Person实例
console.log(john.name); // 输出:Johnconst lisa = new Student("Lisa", 10); // 正常调用,创建一个Student实例
console.log(lisa.name); // 输出:Lisa
console.log(lisa.grade); // 输出:10const mark = Person.call({}, "Mark"); // 错误调用,没有使用new关键字

在上述示例中,我们定义了一个Person构造函数和一个Student构造函数。

在Person构造函数内部,我们使用new.target来检查是否使用了new关键字。如果没有使用new关键字,则抛出一个错误。

在Student构造函数中,我们通过调用Person.call(this, name)来调用父类的构造函数,并传递相应的参数。然后,我们通过Object.create和prototype链来实现基于类的继承。

结论

本文深入解析了JavaScript中的new关键字,介绍了其作用、原理,并提供了一些代码示例来帮助读者更好地理解。通过对new关键字的详细解析,我们可以更好地理解JavaScript中对象实例的创建过程,从而更加灵活地运用new关键字来构建复杂的应用程序。

new.target是一个在构造函数内部可用的元属性,它提供了一个指向正在被构造的实例的构造函数的引用。它可以用来确定构造函数是通过new关键字被调用还是直接调用,并且可以执行特定于构造函数调用的逻辑或实现基于类的继承。


😶 写在结尾

前端设计模式专栏

在这里插入图片描述
设计模式是软件开发中不可或缺的一部分,它们帮助我们解决了许多常见问题,并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中,我们介绍了所有的前端设计模式,包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式,并将其应用于实际项目中,我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式,写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

在这里插入图片描述

Vue.js是一款流行的JavaScript框架,用于构建用户界面。它采用了MVVM(Model-View-ViewModel)的架构模式,通过数据驱动和组件化的方式,使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中,我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面,并探索其强大的生态系统,如Vue Router和Vuex、Pinia。通过学习这些内容,你将能够成为一名熟练的Vue.js开发者,并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript(ES6)专栏

在这里插入图片描述

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点,是构建现代Web应用程序的重要工具之一。在这个专栏中,我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6(ECMAScript 2015)及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript(ES6)专栏

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频人脸识别马赛克处理

文章目录 前言一、实现思路?二、Coding三、实现效果 前言 前面几篇文章我们尝试了使用opencv完成图像人脸识别以及识别后贴图或者打马赛克的方法。 偶尔我们也会有需求在视频中将人脸马赛克化,opencv也提供了相应的方法来实现这个功能。 一、实现思路&a…

贪心算法的运用

贪心算法(Greedy Algorithm)是一种常用的算法思想,通常用来解决最优化问题。可以使用贪心算法来解决一些问题,例如找零钱、任务调度等。 以找零钱为例,简单介绍一下贪心算法的应用 假设有一堆不同面额的硬币&#xff…

netty源码:(40)ReplayingDecoder

ReplayingDecoder是ByteToMessageDecoder的子类,我们继承这个类时,也要实现decode方法,示例如下: package cn.edu.tju;import io.netty.buffer.ByteBuf; import io.netty.channel.ChannelHandlerContext; import io.netty.handle…

Ubuntu20.04服务器使用教程(安装教程、常用命令、故障排查)持续更新中.....

安装教程(系统、驱动、CUDA、CUDNN、Pytorch、Timeshift、ToDesk) 制作U盘启动盘,并安装系统 在MSDN i tell you下载Ubuntu20.04 Desktop 版本,并使用Rufus制作UEFI启动盘,参考UEFI安装Ubuntu使用GPTUEFI模式安装&am…

【IoT网络层】STM32 + ESP8266 +MQTT + 阿里云物联网平台 |开源,附资料|

目标:实现STM32连接阿里云物联网平台发送数据同时接收数据,IOT studio界面显示数据。具体来说:使用ESP8266 ESP-01来连接网络,获取设备数据发送到阿里云物联网平台并显示且oled显示屏当前的设备数据,通过IOT studio界面…

centos 安装 配置 zsh

centos 编译安装 zsh 和 配置 oh-my-zsh 下载 wget https://jaist.dl.sourceforge.net/project/zsh/zsh/5.9/zsh-5.9.tar.xz依赖 yum install ncurses-devel安装zsh 执行: tar -xvf zsh-5.9.tar.xz cd zsh-5.9 ./configure --prefix/usr/local/zsh5.9 make &am…

Golang学习之路一三基本数据类型

Golang学习之路一三基本数据类型 基本数据类型 int8 是有符号类型,uint8 是无符号类型 go 语言中不同类型的数据不能相加,会编译错误 类型名称长度零值说明bool布尔类型1false值为 true 或 false, 不可以用数字代表byte字节型10uint8rune字符类型40专…

Linux文件和目录管理命令---- less 命令

less 是一个强大的命令行工具,用于在 Unix 和 Unix-like 系统中查看(不编辑)大文件的内容。与 more 命令类似,但提供更多的功能和灵活性。在本博客中,本文将深入探讨 less 的各种用法,并展示相应的控制台命…

OpenHarmony城市技术论坛武汉站:探索大模型时代的终端操作系统创新

2023年12月23日下午,OpenHarmony城市技术论坛(以下简称“技术论坛”)——第6期(武汉站)于华中科技大学梧桐语问学中心明德报告厅圆满举办。本次技术论坛聚焦“大模型时代的系统软件”,旨在探索AI大模型在终端操作系统领域的创新趋势和挑战。论坛从“终端操作系统十大技术挑战”…

Ndk编译hevc静态库

源码下载: https://hg.videolan.org/x265 然后执行以下脚本: #!/bin/bash# 设置NDK路径,根据你的实际安装路径修改 NDK_PATH/mnt/c/Users/Administrator/ubuntu_dev/ndk/android-ndk-r21e# 设置目标平台和ABI版本,可以根据实际情况修改 aarch64-linux-…

最适合学生用的台灯有哪些?分享高口碑的学生护眼台灯

台灯是我们日常比较实用的一盏桌面照明灯具,不管是休闲看书、学习、办公都会用得上。如果使用了一款光源不好的台灯,时间长了可能就会影响我们的眼睛健康,特别是孩子的眼睛,还没有发育完全,影响更大。因此孩子学习的台…

模式识别与机器学习-SVM(带软间隔的支持向量机)

SVM(带软间隔的支持向量机) 软间隔思想的由来软间隔的引入 谨以此博客作为复习期间的记录。 软间隔思想的由来 在上一篇博客中,回顾了线性可分的支持向量机,但在实际情况中,很少有完全线性可分的情况,大部分线性可分…

思考:怎样卖猪

© Conmajia, 2016 Miscellaneous 167.4 卖猪的思考 养猪的人通常不会等着猪猪长到最肥最大的时候才卖。他们通常会在某个时间提前卖掉还没长到最大的猪。虽然笨猪们这时还没有完全长大,但养猪人的利润却能达到最高。这是为什么呢?考虑到有些逆天跟…

识别pdf中论文标题并重命名PDF名称(2023.12.27)

改进思路: 当一个pdf文件重命名失败时不要终止程序,继续对下一个pdf文件进行操作 已打包成exe文件,链接放在评论区 import os import timeimport fitzdef find_largest_font_sentence(pdf_path):largest_font_size 0largest_font_sentence…

MYSQL高级SQL语句

目录 一、环境准备 二、高级SQL语句 三、通配符(通常通配符都是跟 LIKE 一起使用的) 四、函数 一、环境准备 create database kgc; use kgc; create table location (Region char(20),Store_Name char(20)); insert into location values(East,Bost…

【算法与数据结构】860、LeetCode柠檬水找零

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析:本题的思路比较简单,首先要保存收到的零钱,其次计算找零,最后分解找…

前缀和——OJ题(二)

📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、和为 k 的子数组1、题目讲解2、思路讲解3、代码实现 二、和可被 K 整除的⼦数组1、题目讲…

【Pytorch】学习记录分享9——PyTorch新闻数据集文本分类任务实战

【Pytorch】学习记录分享9——PyTorch新闻数据集文本分类任务 1. 认为主流程code2. NLP 对话和预测基本均属于分类任务详细见3. Tensorborad 1. 认为主流程code import time import torch import numpy as np from train_eval import train, init_network from importlib impo…

adb和logcat常用命令

adb的作用 adb构成 client端,在电脑上,负责发送adb命令daemon守护进程adbd,在手机上,负责接收和执行adb命令server端,在电脑上,负责管理client和daemon之间的通信 adb工作原理 client端将命令发送给ser…

STM32 基础知识(探索者开发板)--103讲 通用定时器

定时器溢出时间计算方法: Tout ((arr 1) * (psc 1)) / Ft us arr:自动重装载值 psc:时钟预分频数 定时器相关实验通用步骤 1.定时器初始化 a.定义结构体句柄 b.设基地址 c.设分频系数 d.设自动重装载值 e. 设计数模式 f.初始化定时器 2.外设模式配置 a.设置模式 d.映…