返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中的new操作符的具体使用
  • 344
分享到

JavaScript中的new操作符的具体使用

JavaScript new操作符js new运算符 2023-05-18 17:05:30 344人浏览 八月长安
摘要

javascript中的new操作符是一个非常重要的概念,它可以让我们创建一个自定义的对象类型或者一个内置的对象类型,比如Array、Date、Function等。那么,new操作符

javascript中的new操作符是一个非常重要的概念,它可以让我们创建一个自定义的对象类型或者一个内置的对象类型,比如Array、Date、Function等。那么,new操作符到底做了什么呢?我们来一步一步分析。

new做了什么?

首先,当我们使用new操作符调用一个函数时,这个函数就会被当作一个构造函数,也就是说,它会用来创建一个新的对象实例。例如:

function Person(name) {  
    this.name = name;
}  
var p1 = new Person("Allen");  

这里,我们定义了一个Person函数,然后用new操作符创建了一个p1对象,这个对象的类型是Person,它有个name属性,赋值为"Allen"

那么,具体来说,new操作符做了哪些事情呢?我们可以总结为以下四个步骤:

  • 创建一个空的JavaScript对象,我们暂且叫它newInstance
  • 将newInstance的[[Prototype]]属性指向构造函数的prototype属性,如果prototype是一个对象的话。否则,newInstance保持为一个普通对象,它的[[Prototype]]指向Object.prototype。注意:[[Prototype]]是一个内部属性,它表示对象的原型链。通过这一步,newInstance就可以继承构造函数原型上的属性和方法。
  • 执行构造函数,并将newInstance作为this的上下文(也就是说,在构造函数中所有对this的引用都指向newInstance)。这样,构造函数就可以给newInstance添加一些自身的属性和方法。
  • 如果构造函数返回了一个非原始值(比如一个对象或者一个函数),那么这个返回值就会成为整个new表达式的结果。否则,如果构造函数没有返回任何值或者返回了一个原始值(比如一个数字或者一个字符串),那么newInstance就会成为整个new表达式的结果。(通常情况下,构造函数不会返回任何值,但是它可以选择这样做来覆盖正常的对象创建过程。)

例如:

function Foo(bar) {  
    this.bar = bar;  
}  
Foo.prototype.baz = function() {  
    console.log(this.bar);  
};  
var f1 = new Foo("Hello"); // f1是Foo类型的对象,它有bar属性和baz方法  
var f2 = new Foo("World"); // f2也是Foo类型的对象,它也有bar属性和baz方法  
f1.baz(); // Hello  
f2.baz(); // World  
function Bar() {  
    return {  
        name: "Bar"  
    };  
}  
var b1 = new Bar(); // b1是一个普通对象,它有name属性  
console.log(b1 instanceof Bar); // false  

这里,我们定义了两个函数Foo和Bar,并用new操作符创建了f1、f2和b1三个对象。可以看到,f1和f2都是Foo类型的对象,它们继承了Foo.prototype上的baz方法,并且有自己的bar属性。而b1则是一个普通对象,它只有name属性,并不属于Bar类型,因为Bar函数返回了一个对象。

如何手写一个new

底层实现上,class还是基于原型继承和构造函数的。基于这个理解:

function newInstance(constructor, ...args) {
  // 创建一个空对象,且 __proto__ 指向 constructor.prototype
  const obj = Object.create(constructor.prototype);
  // 执行构造函数并绑定 this 到新对象上
  const result = constructor.apply(obj, args);
  // 如果构造函数返回了一个对象,则返回该对象
  if (result && (typeof result === "object" || typeof result === "function")) {
    return result;
  }
  // 否则返回新对象
  return obj;
}
// 示例使用
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}.`);
};
const person1 = newInstance(Person, "Allen");
person1.greet(); // 输出 "Hello, I'm Allen."

上述代码中,myNew 函数模拟了 new 操作符的行为,它接受两个参数:构造函数和构造函数的参数,返回一个新的实例对象。在函数内部,首先创建了一个新的空对象 obj,然后将该对象的 __proto__ 属性指向构造函数的原型对象,从而实现了原型继承。接着将构造函数的 this 绑定到新对象上,并执行构造函数。如果构造函数返回的是一个对象,则直接返回该对象,否则返回新创建的对象 obj

到此这篇关于JavaScript中的new操作符的具体使用的文章就介绍到这了,更多相关JavaScript new操作符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中的new操作符的具体使用

本文链接: https://lsjlt.com/news/212303.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中的new操作符的具体使用
    JavaScript中的new操作符是一个非常重要的概念,它可以让我们创建一个自定义的对象类型或者一个内置的对象类型,比如Array、Date、Function等。那么,new操作符...
    99+
    2023-05-18
    JavaScript new操作符 js new运算符
  • JavaScript中new操作符的作用是什么
    这篇文章给大家介绍JavaScript中new操作符的作用是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript的特点1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScrip...
    99+
    2023-06-06
  • 如何在JavaScript中使用new操作符
    本篇文章给大家分享的是有关如何在JavaScript中使用new操作符,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1、说明(1)创建一个空对象。(2)将对象的__proto指...
    99+
    2023-06-15
  • JavaScript中new操作符有什么用
    这篇文章给大家分享的是有关JavaScript中new操作符有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 js模拟new操作符的实现这个问题如果你在掘金上搜,...
    99+
    2024-04-02
  • C#中is操作符的具体应用
    这篇文章主要讲解了“C#中is操作符的具体应用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“C#中is操作符的具体应用”吧!C# 操作符之is应用C# 操作符之is操作符用于检查运行时对象类...
    99+
    2023-06-17
  • 怎么使用JS中new操作符
    这篇文章主要讲解了“怎么使用JS中new操作符”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用JS中new操作符”吧!首先我们来看一下实例化一个对象做...
    99+
    2024-04-02
  • JavaScript中new操作符的原理示例详解
    new的用处 new的作用是通过构造函数来创建一个实例对象,该实例与原型和构造函数之间的关系如下图所示: 先来总结一下 创建一个空对象 空对象的内部属性 __pr...
    99+
    2024-04-02
  • MySQL操作符(and、or、in、not)的具体使用
    目录1、简介2、正文2.1 and操作符2.2 or操作符2.3 in操作符2.4 not操作符2.5 操作符顺序1、简介 在MySQL中使用where子句对查询数据进行...
    99+
    2024-04-02
  • JavaScript中new操作符的原理与实现详解
    目录一、new做了哪些事二、返回不同类型时有哪些表现三、手写new的实现原理一、new做了哪些事 先看看new的使用场景: // 1、创建一个构造函数 function Vehicl...
    99+
    2022-11-13
    JavaScript new操作符 JavaScript new
  • 如何自己实现JavaScript的new操作符
    目录构造函数new 操作符自己实现一个 new构造函数 在介绍new之前,必须要知道什么是构造函数。 构造函数和普通函数在写法上没有任何区别,当一个函数通过new Fun()调用时,...
    99+
    2024-04-02
  • C#中new操作符的工作机制
    使用new操作符来创建对象,其背后到底发生了什么? 有一个父类Animal,Dog派生于Animal。 class Program { static ...
    99+
    2024-04-02
  • JS中new操作符有什么用
    这篇文章将为大家详细讲解有关JS中new操作符有什么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。new操作符的基本过程:1.创建一个新的空对象。2.将构造函数的作用域...
    99+
    2024-04-02
  • QtQFile文件操作的具体使用
    目录QFile文件操作QFile+QTextStreamQFile+QDataStream很多应用程序都需要具备操作文件的能力,包括对文件内容进行读/写、创建和删除文件等,甚至某些应...
    99+
    2024-04-02
  • JavaScript对象的构造函数和new操作符怎么用
    本篇内容主要讲解“JavaScript对象的构造函数和new操作符怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript对象的构造函数和new...
    99+
    2024-04-02
  • 详解JavaScript中常用操作符的使用
    目录1、可选链操作符(optional chaining operator)2、空值合并操作符(nullish coalescing operator)3、箭头函数(Arrow Fu...
    99+
    2023-05-17
    JavaScript操作符使用 JavaScript操作符
  • JavaScript中强大的操作符使用详解
    目录一、一元操作符1. 递增和递减操作符(++ --)2. 加和减操作符二、位操作符1. 按位与操作符(&)2. 按位或操作符(|)3. 按位非操作符 (~)4. 按位异或运...
    99+
    2024-04-02
  • c++中new运算符的作用
    new 运算符用于在运行时从堆中动态分配内存并创建对象,返回一个指向新创建对象的内存地址的指针,特点包括延迟对象创建、可变大小分配、在堆上分配和需要手动释放内存。 C++ 中 new ...
    99+
    2024-04-28
    c++
  • JavaScript WeakMap的具体使用
    目录前言一、为何选用WeakMap1. Map2. WeakMap二、WeakMap原型方法总结前言 我在处理一个复杂对象的深拷贝方法时接触到WeakMap, 其作为缓存结构以解决对...
    99+
    2023-02-17
    JavaScript WeakMap
  • JavaScript的typeof操作符怎么使用
    本篇内容介绍了“JavaScript的typeof操作符怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2024-04-02
  • Shell中通配符的具体使用
    目录1. 通配符(Wildcard)2. 转义字符3. 例子4. 分清楚通配符表达式和正则表达式1. 通配符(Wildcard) 在 Shell 中命令中,通常会使用通配符表达式来匹配一些文件,如以下命令可以查找当前目录...
    99+
    2023-05-06
    Shell 通配符
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作