JS中的new操作符

文章目录

  • JS中的new操作符
    • 一、什么是new?
    • 二、new经历了什么过程?
    • 三、new的过程分析
    • 四、总结

JS中的new操作符

参考:https://www.cnblogs.com/buildnewhomeland/p/12797537.html

一、什么是new?

在JS中,new的作用是通过构造函数来创建一个实例对象
和普通函数不一样,当函数用作构造函数时,首字母一般要大写,以作区分。

function Foo(name) {this.name = name;
}
console.log("new Foo('mm')的类型:", typeof new Foo('mm')); // object
console.log("Foo的类型:", typeof Foo);                     // function

二、new经历了什么过程?

Foo明明只是一个函数,可是为什么new Foo()执行后会突然返回一个对象呢?
我们从结果出发可以推断出,既然返回了一个对象,那么这事肯定和对象有关系。

实际上new帮我们做了这样几件事:

1.帮我们创建了一个空对象;
2.将空对象原型的内存地址__proto__指向函数的原型对象;(这里涉及到了原型链的知识)
3.利用函数的`call`方法,将原本指向`window`的绑定对象this指向了obj。(这样一来,当我们向函数中再传递实参时,对象的属性就会被挂载到obj上。)
4.利用函数返回对象obj。

三、new的过程分析

function Foo(name) {this.name = name;return this;
}
var obj = {};
obj.__proto__ = Foo.prototype;
// Foo.call(obj, 'mm');
var foo = Foo.call(obj, 'mm');
console.log(foo);

在这里插入图片描述

分析:
1.预编译,声明提升,解释执行。
2.执行时按照顺序来进行,
3.obj指向空对象;
4.obj的原型地址指向构造函数Foo的原型对象;
5.执行Foo.call(obj, 'mm');
6.this.name = name; 通过函数的call方法将this绑定到obj(也就是说this就是obj),实参mm传入构造函数Foo中,这样this.name = 'mm',那么obj.name = 'mm',也就是说name属性被挂载到obj对象上。
7.return this; 就是return obj,这样obj这个对象就被返回出来了。
8.将结果赋值给变量foo。
9.打印结果。

在这里插入图片描述

四、总结

第三部分的代码直接用new 构造函数效果是相同的。

function Foo(name) {this.name = name;
}
var foo = new Foo('mm');
console.log(foo);

简而言之,new操作符帮我们做了四件事:

  1. 创建空对象;
  2. 空对象的原型指针指向构造函数的原型对象;
  3. 利用函数的call方法改变this指向,在空对象上挂载属性或方法;
  4. 返回对象。

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

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

相关文章

React笔记(八)Redux

一、安装和配置 React 官方并没有提供对应的状态机插件,因此,我们需要下载第三方的状态机插件 —— Redux。 1、下载Redux 在终端中定位到项目根目录,然后执行以下命令下载 Redux npm i redux 2、创建配置文件 在 React 中,…

FreeRTOS的信号量和互斥量之间的区别和联系

文章目录 信号量信号量简介信号量特征 互斥量互斥量的上锁机制互斥量的优先级继承机制 二值信号量和互斥量的作用二值信号量的作用互斥量的作用 二值信号量和互斥锁关系相同点不同点 如何根据场景选择回答信号量和互斥锁之间的区别: 信号量 信号量简介 队列(queue)…

大集合按照指定长度进行分割成多个小集合,用于批量多次处理数据

📚目录 拆分案例拆分的核心代码 通常我们对集合的更新或者保存都需要用集合来承载通过插入的效率,但是这个会遇到一个问题就是你不知道那天那个集合的数量可能就超了,虽然我们连接数据库进行批量提交会在配置上配置allowMultiQueriestrue,但是…

类和对象(下)

💓博主个人主页:不是笨小孩👀 ⏩专栏分类:数据结构与算法👀 C👀 刷题专栏👀 C语言👀 🚚代码仓库:笨小孩的代码库👀 ⏩社区:不是笨小孩👀 🌹欢迎大…

【uniapp】 实现公共弹窗的封装以及调用

图例&#xff1a;红框区域为 “ 内容区域 ” 一、组件 <!-- 弹窗组件 --> <template> <view class"add_popup" v-if"person.isShowPopup"><view class"popup_cont" :style"{width:props.width&&props.width&…

mybatis源码学习-1-调试环境

写在前面,这里会有很多借鉴的内容,有以下三个原因 本博客只是作为本人学习记录并用以分享,并不是专业的技术型博客笔者是位刚刚开始尝试阅读源码的人,对源码的阅读流程乃至整体架构并不熟悉,观看他人博客可以帮助我快速入门如果只是笔者自己观看,难免会有很多弄不懂乃至理解错误…

Spring源码解析-总览

1、前言 Spring源码一直贯穿我们Java的开发中&#xff0c;只要你是一个Java开发人员就一定知道Spring全家桶。Spring全家桶为我们一共一站式服务&#xff0c;IOC、AOP更是Spring显著特性。但是Spring到底怎么为我们提供容器&#xff0c;管理资源的呢&#xff1f;下来&#xff0…

Ubuntu学习---跟着绍发学linux课程记录(第二部分)

文章目录 7 文件权限7.1 文件的权限7.2 修改文件权限7.3 修改文件的属主 8、可执行脚本8.2Shell脚本8.3python脚本的创建 9Shell9.1Shell中的变量9.2 环境变量9.3用户环境变量 学习链接: Ubuntu 21.04乌班图 Linux使用教程_60集Linux课程 所有资料在 http://afanihao.cn/java …

学生管理系统VueAjax版本

学生管理系统VueAjax版本 使用Vue和Ajax对原有学生管理系统进行优化 1.准备工作 创建AjaxResult类&#xff0c;对Ajax回传的信息封装在对象中 package com.grg.Result;/*** Author Grg* Date 2023/8/30 8:51* PackageName:com.grg.Result* ClassName: AjaxResult* Descript…

Java抛出异常

当某个方法抛出了异常时&#xff0c;如果当前方法没有捕获异常&#xff0c;异常就会被抛到上层调用方法&#xff0c;直到遇到某个try ... catch被捕获为止 调用printStackTrace()可以打印异常的传播栈&#xff0c;对于调试非常有用&#xff1b;捕获异常并再次抛出新的异常时&am…

项目-IM

tim-server tim-server启动类实现CommandLineRunner接口&#xff0c;重写run()方法 run()方法开启一个线程&#xff0c;创建zk持久父节点&#xff0c;创建临时顺序子节点&#xff0c;将netty-server信息写入 1.1 用户登录 1.2 gateway向认证授权中心请求token 1.3 从zookee…

在windows上安装Cmake软件

Cmake是一个跨语言、跨平台、开源的编译工具&#xff0c;可以编译C、C、Note.js、JavaScript、C#、Java、Python、Php、Object-C、Ruby等工程&#xff0c;需要设置对应的src源码目录、ext第三方依赖目录、CMakeList.txt构建列表&#xff0c;再使用cmake命令即可。     2023年…

程序员自由创业周记#2:前期准备

感恩 上次公开了创业的决定后&#xff0c;得到了很多亲朋好友和陌生朋友的鼓励或支持&#xff0c;以不同的形式&#xff0c;感动之情溢于言表。这些都会记在心里&#xff0c;大恩不言谢~ 创业方向 笔者是一名资质平平的iOS开发程序猿&#xff0c;创业项目也就是开发App卖&am…

Jmeter(二十九):Jmeter常用场景梳理

一、每秒钟固定调用次数 如果想控制每秒发送请求数量,仅仅通过线程数与循环次数是不够的,因为这只能控制发送总数,而要控制每秒发送数量,需要线程数与常数吞吐量控制器的搭配使用,这种场景在性能测试中使用不多。 例如每秒钟调用30次接口,那么把线程数设置为30,将常数…

Netty-ChannelPipeline

EventLoop可以说是 Netty 的调度中心&#xff0c;负责监听多种事件类型&#xff1a;I/O 事件、信号事件、定时事件等&#xff0c;然而实际的业务处理逻辑则是由 ChannelPipeline 中所定义的 ChannelHandler 完成的&#xff0c;ChannelPipeline 和 ChannelHandler应用开发的过程…

C语言(第三十三天)

3.1.2 画图推演 3.2 举例2&#xff1a;顺序打印一个整数的每一位 输入一个整数m&#xff0c;打印这个按照顺序打印整数的每一位。 比如&#xff1a; 输入&#xff1a;1234 输出&#xff1a;1 2 3 4 输入&#xff1a;520 输出&#xff1a;5 2 0 3.2.1 分析和代码实现 这个题目&a…

数据结构--队列与循环队列

队列 队列是什么&#xff0c;先联想一下队&#xff0c;排队先来的人排前面先出&#xff0c;后来的人排后面后出&#xff1b;队列的性质也一样&#xff0c;先进队列的数据先出&#xff0c;后进队列的后出&#xff1b;就像图一的样子&#xff1a; 图1 如图1&#xff0c;1号元素是…

本地开机启动jar

1&#xff1a;首先有个可运行的jar包 本地以ruiyi代码为例打包 2&#xff1a;编写bat命令---命名为.bat即可 echo off java -jar D:\everyDay\test\RuoYi\target\RuoYi.jar 3&#xff1a;设置为开机自启动启动 快捷键winr----输入shell:startup---打开启动文档夹 把bat文件复…

春秋云镜 CVE-2018-16283

春秋云镜 CVE-2018-16283 WordPress Plugin Wechat Broadcast LFI 靶标介绍 WordPress Plugin Wechat Broadcast LFI 启动场景 漏洞利用 exp # Exploit Title: WordPress Plugin Wechat Broadcast 1.2.0 - Local File Inclusion # Author: Manuel Garcia Cardenas # Date:…

Spring boot 第一个程序

新建工程 选择spring-boot版本 右键创建类TestController&#xff1a; 代码如下&#xff1a; package com.example.demo; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springf…