JavaScript进阶之new的实现

落落落洛克 等级 720 0 0
标签: httpsJavascript

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读

JavaScript进阶之new的实现

JavaScript进阶之new的实现

new

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

new 操作符会做什么操作❓

new操作符做了这些事:

  • 它创建了一个全新的对象。
  • 它会被执行 [[Prototype]](也就是 __proto__)链接。
  • 它使 this指向新创建的对象,也就是new操作会改变this指向
  • 通过 new创建的每个对象将最终被 [[Prototype]]链接到这个函数的 prototype对象上。
  • 如果函数没有返回对象类型 Object(包含 Functoin,Array,Date,RegExg,Error),那么 new表达式中的函数调用将返回该对象引用。

那么我们用函数来模拟new操作符的实现吧

如何调用

const obj=New(Constructor)

实现

 function New() {

     var obj = new Object(),

     Constructor = [].shift.call(arguments); // 为什么是这样因为调用 const obj=New(Constructor)

     obj.__proto__ = Constructor.prototype;

     var ret = Constructor.apply(obj, arguments); // arguments类数组为引用类型

     return (typeof ret === "object" || typeof ret === "function") && ret !== null ? ret : obj;

 };

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读

JavaScript进阶之new的实现

JavaScript进阶之new的实现

收藏
评论区

相关推荐

JavaScript进阶之new的实现
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
FCF学习笔记三之setDataXML与setDataURL
先贴下使用setDataXML的例子: <div id="chartdiv" align="center"> 存放fusionChartsdiv区域 </div> <script type="text/javascript"> var myCharts = new FusionCharts("FusionCharts/Column3D.s
JavaScript 内存详解 & 分析指南
![](https://oscimg.oschina.net/oscnet/74587263-715c-49e9-abc1-c4a7d37b2cef.gif "引导关注") 前言 == JavaScript 诞生于 1995 年,最初被设计用于网页内的表单验证。 这些年来 JavaScript 成长飞速,生态圈日益壮大,成为了最受程序员欢迎的开发语言之
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的 JavaScript 概念,但绝对不是说JavaScript 开发人员只需要知道这些就可以了。 01-变量赋值(值与引用) Java
JavaScript中的“ new”关键字是什么?
### 问题: _The `new` keyword in JavaScript can be quite confusing when it is first encountered, as people tend to think that JavaScript is not an object-oriented programming languag
JavaScript基础2
普通的JavaScript对象是命名值的无序集合,JavaScript同样定义了一种特殊的对象-数组array,表示带编号的值的有序集合,JavaScript为数组定义了专用的语法,使得数组具有区别于普通对象而独有的行为特性 JavaScript还定义了另一种特殊对象--函数,函数是具有与它相关联的可执行代码的对象,通过调用函数来运行可执行代码并返回运算结
JavaScript基础之创建对象
![](https://oscimg.oschina.net/oscnet/361b5f13-d45b-403e-bff3-9a63013a7644.png)JavaScript对象的创建 ![](https://oscimg.oschina.net/oscnet/c5d755a1-2cca-4c62-8dba-372da7d7ab3b.jpg) 在Ja
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript实现显示在线时间的功能
<script type="text/javascript"> function showTime(){ var divOne=document.getElementById("one"); var d=new Date(); var timStr=d.getFullYe
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Javascript – How Prototypal Inheritance really ...
Everywhere on the web we read that Javascript has prototypal inheritance. However Javascript only provides by default a specific case of prototypal inheritance with the new oper
Javascript相关学习
JavaScript ---------- 发现了一个不错的学习JavaScript的网站,就是MDN,具体见[JavaScript 参考](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaS
Js原型链题目1
<script type="text/javascript"> function A(){ } A.prototype.n = 1 let b = new A()
Node.js简介及如何学习Node.js
本文介绍Node.js的诞生史以及如何学习Node.js。 Node.js简史 --------- 从Node.js的命名上可以看到,Node.js的官方开发语言是JavaScript。之所以选择使用JavaScript,显然与JavaScript的开发人员多有关。总所周知,JavaScript是伴随着互联网的发展而火爆起来的,JavaScript也是前
Python 与 Javascript 之比较
最近由于工作的需要开始开发一些Python的东西,由于之前一直在使用Javascript,所以会不自觉的使用一些Javascript的概念,语法什么的,经常掉到坑里。我觉得对于从Javascript转到Python,有必要总结一下它们之间的差异。 ### **基本概念** [Python](https://www.oschina.net/action/G