new一个对象的原理是怎样的呢？

1. 用new Object() 的方式新建了一个对象 obj
1. 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
1. 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性
1. 使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性
1. 返回 obj

如何模拟实现一个自己的new构造器？

// v1function objectFactory() {var obj = new Object(),// 因为 shift 会修改原数组，所以 arguments 会被去除第一个参数Constructor = [].shift.call(arguments);     // 拿到伪数组中的第一个参数// 取出参数中的第一个参数，就是我们要传入的构造函数，建立继承关系obj.__proto__ = Constructor.prototype;Constructor.apply(obj, arguments);return obj;}// v2 : 还需要判断返回的值是不是一个对象，如果是一个对象，我们就返回这个对象，如果没有，我们该返回什么就返回什么。function objectFactory() {var obj = new Object(),Constructor = [].shift.call(arguments);// 建立继承关系(二者之间的关系)obj.__proto__ = Constructor.prototype;// 开始执行这个构造函数var ret = Constructor.apply(obj, arguments);// 看一下构造函数的返回值，是对象还是一个基本数据类型?return typeof ret === 'object' ? ret : obj;}// v4：Object.create的原理// var obj = Object.create(Constructor.prototype);// 等价于：// var obj = new Object();// obj.__proto__ = Constructor.prototype;const _new = function () {var Constructor = [].shift.call(arguments);// 1. 创建一个对象，这个对象要继承与构造函数的原型对象var obj = Object.create(Constructor.prototype);// 2. 执行这个构造函数var ret = Constructor.apply(obj, arguments);return typeof ret === 'object' ? ret || obj : obj;}// v5: 实现一个自己的new构造函数const _new = function() {// 从Object.prototype上克隆一个对象 var obj = new Object();// 取出来外部传入的构造器var Constructor = [].shift.call(arguments);// 使用一个中间的函数来维护原型的关系var F = function(){};F.prototype = Constructor.prototype;obj = new F();// 开始执行这个构造函数var res = Constructor.apply(obj, arguments);// 确保构造器总是返回一个对象(使用res || obj 的方式来防止返回null参数)return typeof res === 'object' ? res || obj : obj;}

【Javascript高级知识】深入剖析JS中New一个对象的过程（实现原理）相关推荐

JavaScript高级知识汇总（高级篇）
目录 JavaScript高级知识总结(高级篇) 一.深入基础 1.1数据类型 1.2数据变量与内存 1.3对象 1.4函数回调函数 1.5 IIFE 1.6函数中的this 二.函数高级 2.1原 ...
【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
AJAX技术入门第五节 Javascript高级知识
1.数组 Javascript中数组的大小是可以动态改变的数组常用的方法: concat:合并数组,不会改变原数组,返回一个新的数组 join:将数组中的内容按照方法参数指定的字符连接成字符串并返回 ...
JavaScript基础（3）-JS中的面向对象、定时器、BOM、位置信息
一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...
Javascript基础知识 1（JS）
目录 1.了解JavaScript 1.语言: 2.特点: 3.作用 4.js的组成 5.三种书写位置 2.js输入输出语句 1.输出语句 2.输入语句 3.js变量 1.变量 3.变量语法扩展 4. ...
【JavaScript学习笔记2】JS中常见的输出方式-控制台输出信息
引言在编程开发的过程中,输出信息是非常必要的.JS中提供了四种输出方式:弹出显示框.控制台输出.弹出输入框.弹出判断显示框弹出显示框这种方式在上一篇笔记中已经详细介绍,有需要学习的朋友可以跳转到 ...
js中判断一个对象是否存在
一.Boolean()方法用Boolean()方法可以将Js中的任意数据类型转为布尔值: 二.用于判断xx是否存在 js一般会自动执行Boolean()方法,我们可以借此判断某个对象在js当前的执行 ...
JS 中判断一个对象是否为数组对象？
在面向对象中判断一个对象中判断一个对象是否为数组 1 可以查找它的原型 (__proto__) 是否为数组对象的原型对象 var arr1 = [1,2,3];console.log(arr1._ ...
JavaScript 日期比较——如何在 JS 中比较日期
日期是开发人员在创建实际应用程序时最常用的数据类型之一. 但通常,开发人员会在这种数据类型上苦苦挣扎,最终使用像 Moment.js 这样的日期库来完成简单的任务,这些任务不值得安装整个包所带来的大包 ...

【Javascript高级知识】深入剖析JS中New一个对象的过程（实现原理）

new一个对象的原理是怎样的呢？

如何模拟实现一个自己的new构造器？

【Javascript高级知识】深入剖析JS中New一个对象的过程（实现原理）相关推荐

最新文章

热门文章