返回顶部
首页 > 资讯 > 精选 >怎么在JavaScript中实现new
  • 807
分享到

怎么在JavaScript中实现new

2023-06-15 01:06:55 807人浏览 安东尼
摘要

这期内容当中小编将会给大家带来有关怎么在javascript中实现new,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。创建一个空对象,将它的引用赋给 this,继承函数的原型;通过 this 将属性和方法

这期内容当中小编将会给大家带来有关怎么在javascript中实现new,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创建一个空对象,将它的引用赋给 this,继承函数的原型;通过 this 将属性和方法添加至这个对象;最后返回 this 指向的新对象,也就是实例。

一般来说在js中大概是这样的:

function Mynew(parent,...rest){let obj={};obj.__proto__=parent.prototype;let res=parent.apply(obj,rest);return typeof res=="object"?res:obj;}

上面提到的“空对象”只是简称。事实上,就算是定义一个 {} ,它也会从 Object.prototype 上继承很多方法和属性。
《JavaScript语言精髓与编程实践》中提出了一个“更加空白的对象”:它有两种情况 —— Constructor.prototype 值为null;或者Object.getPrototypeOf(obj) 值为null。

但通常我们还能见到另一种写法:

function Mynew_2(parent,...rest){let child=Object.create(parent.prototype);let result=parent.apply(child,rest);return typeof result=="object"?result:child;}

这两种实现的不同无疑引起了我的兴趣!


Object.create()是怎么实现的?

我们来看一段代码:

var Best1=function(){this.a=2;}var o1=Object.create(Best1);var o2=Object.create(Best1.prototype);console.log(o1.a); // undefinedconsole.log(o2.a); // undefined

怎么在JavaScript中实现new

可以看到,以 o1 为例,Object.create() 失去了对原来对象属性的访问,而 o2 …同理。

再来看另一段代码:

var Best=function(){this.a=2;}Best.prototype.a=3;var o1=Object.create(Best);var o2=Object.create(Best.prototype);console.log(o1.a); // undefinedconsole.log(o2.a); // 3

怎么在JavaScript中实现new

到这里,我似乎明白了什么,又似乎没明白…

我决定这么做:

let b=new Best();console.log(b);

怎么在JavaScript中实现new

console.log(Best.prototype);

怎么在JavaScript中实现new

恍然大悟!

原来我们平时说的 “当读取实例属性时,如果找不到,就会查找与对象关联的原型中的属性;如果还找不到,就去找原型的原型,直到最顶层(__proto__ 为null)为止” 是指 “一直顺着 __proto__ 向上查找”(注意:不经过prototype!)。

__proto__prototype 之间又有什么呢?

console.log(b.__proto__);console.log(Best.prototype);

怎么在JavaScript中实现new

哦!这就是我们常听到的“实例的 __proto__ 等于对象的 prototype ”吧。

那现在回过头来,打印一下 o2 这个对象:

console.log(o2);

怎么在JavaScript中实现new

你有没有想到什么?

根据上面所描述的那样,o2 就是 Best 的实例啊!

所以说,create() 函数实际上返回了一个对象的实例?

但 o1 仍然“不为所动”!

怎么在JavaScript中实现new

所以我们能否猜测:在 Object.create() 函数中应该是拿到对象的原型并以实例的形式返回:

Object.create=function(o){let F=function(){};F.prototype=o;return new F();}

为什么这里要用函数再 new 的方式?而不是直接用对象去接收?

怎么在JavaScript中实现new

这和“为什么Vue中data是一个函数而不是直接的对象”其实是一个问题:JavaScript中的对象是引用类型,在一个实例中改变某一个元素的值其余实例的值都会发生改变!

而通过create函数则不会:

怎么在JavaScript中实现new

JavaScript是什么

JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于WEB开发,可以给网站添加各种各样的动态效果,让网页更加美观。

上述就是小编为大家分享的怎么在JavaScript中实现new了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网精选频道。

--结束END--

本文标题: 怎么在JavaScript中实现new

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

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

猜你喜欢
  • 怎么在JavaScript中实现new
    这期内容当中小编将会给大家带来有关怎么在JavaScript中实现new,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。创建一个空对象,将它的引用赋给 this,继承函数的原型;通过 this 将属性和方法...
    99+
    2023-06-15
  • 怎么实现JS中的new
    这篇文章主要介绍“怎么实现JS中的new”,在日常操作中,相信很多人在怎么实现JS中的new问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么实现JS中的new”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-25
  • javascript中new方法怎么使用
    这篇文章主要介绍“javascript中new方法怎么使用”,在日常操作中,相信很多人在javascript中new方法怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • Javascript中new()有什么用
    小编给大家分享一下Javascript中new()有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要创建 Person 的...
    99+
    2024-04-02
  • JavaScript中new有什么用
    这篇文章给大家分享的是有关JavaScript中new有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。为了保证可读性,本文采用意译而非直译。当你使用new的时候,会:创建一...
    99+
    2024-04-02
  • JavaScript中的new关键字怎么用
    这篇文章主要介绍了JavaScript中的new关键字怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。new 关键字JavaScript是什么JavaScript是一种直...
    99+
    2023-06-27
  • 怎么在JavaScript中实现深拷贝
    怎么在JavaScript中实现深拷贝?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Java有哪些集合类Java中的集合主要分为四类:1、List列表:有序的,...
    99+
    2023-06-14
  • 如何在JavaScript中使用new操作符
    本篇文章给大家分享的是有关如何在JavaScript中使用new操作符,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1、说明(1)创建一个空对象。(2)将对象的__proto指...
    99+
    2023-06-15
  • JavaScript中new操作符的原理与实现详解
    目录一、new做了哪些事二、返回不同类型时有哪些表现三、手写new的实现原理一、new做了哪些事 先看看new的使用场景: // 1、创建一个构造函数 function Vehicl...
    99+
    2022-11-13
    JavaScript new操作符 JavaScript new
  • 怎么在javascript中实现页面跳转
    本篇文章给大家分享的是有关怎么在javascript中实现页面跳转,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。javascript实现页面跳转的方法:1、通过修改窗体对象wi...
    99+
    2023-06-14
  • 怎么在Javascript中实现异步等待
    本篇文章给大家分享的是有关怎么在Javascript中实现异步等待,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。async/await 是javascript中的一种模式,可使...
    99+
    2023-06-15
  • 怎么在JavaScript中实现事件委托
    怎么在JavaScript中实现事件委托?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。事件委托利用事件冒泡,指定一个事件处理程序,管理一系列的所有事件事件委托利用DOM元素...
    99+
    2023-06-15
  • JavaScript中实现new的两种方式引发的探究
    前言 当你 new 一个构造函数时发生了什么? “众所周知”的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型;通过 this 将属性和方法添加至这个对象;最后返回 ...
    99+
    2024-04-02
  • 如何自己实现JavaScript的new操作符
    目录构造函数new 操作符自己实现一个 new构造函数 在介绍new之前,必须要知道什么是构造函数。 构造函数和普通函数在写法上没有任何区别,当一个函数通过new Fun()调用时,...
    99+
    2024-04-02
  • 手写实现JS中的new
    目录1 new 运算符简介2 new 究竟干了什么事3 模拟实现 new 运算符4 补充⚠ 预备知识: 了解原型和原型链 了解this绑定 1 new...
    99+
    2024-04-02
  • 怎么在JavaScript中实现休眠或等待
    这篇文章将为大家详细讲解有关怎么在JavaScript中实现休眠或等待,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝大多...
    99+
    2023-06-14
  • 怎么在JavaScript中实现同步和异步
    本篇文章为大家展示了怎么在JavaScript中实现同步和异步,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JavaScript可以做什么1.可以使网页具有交互性,例如响应用户点击,给用户提供更好的...
    99+
    2023-06-14
  • 怎么在JavaScript中实现对象深拷贝
    这篇文章给大家介绍怎么在JavaScript中实现对象深拷贝,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaSc...
    99+
    2023-06-14
  • 怎么在javascript中实现原型链继承
    本篇文章给大家分享的是有关怎么在javascript中实现原型链继承,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1、说明构造函数、原型与实例的关系,每个构造函数都有一个原型对...
    99+
    2023-06-15
  • 怎么在javascript中实现寄生式继承
    今天就跟大家聊聊有关怎么在javascript中实现寄生式继承,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1、说明在原型式继承的基础上,增强对象,返回构造函数。函数的主要作用是为构...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作