前言
什么是new
呢?
new
运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。
光看定义还是有几分晦涩,直接看一个具体的例子,来了解一下JavaScript
中的new
实现的功能。
举个例子
// 现实中瘦不了,但网络中一定要保持苗条 function Thin_User(name, age) { this.name = name; this.age = age; } Thin_User.prototype.eatToMuch = function () { // 白日做梦吧 console.log('i eat so much, but i\'m very thin!!!'); } Thin_User.prototype.isThin = true; const xiaobao = new Thin_User('zcxiaobao', 18); console.log(xiaobao.name); // zcxiaobao console.log(xiaobao.age); // 18 console.log(xiaobao.isThin); // true // i eat so much, but i'm very thin!!! xiaobao.eatToMuch(); 复制代码
通过上面这个例子,我们可以发现 xiaobao
可以:
- 访问到构造函数
Thin_User
中属性 - 访问到
Thin_User.prototype
中属性
描述得更直白一点,new
做了这些事:
- 创建了一个空对象,对象的
__proto__->Thin_User.prototype
- 执行构造函数,并将
this
指向新对象 - 返回新对象
MDN
中对new
的描述: 使用new
来构建函数,会执行如下四部操作:
- 创建一个空的简单
JavaScript
对象(即{}
);- 为步骤1新创建的对象添加属性
__proto__
,将该属性链接至构造函数的原型对象 ;- 将步骤1新创建的对象作为
this
的上下文 ;- 如果该函数没有返回对象,则返回
this
。
补充说明
由于 new
是关键字,我们无法像模拟数组高阶方法一样覆盖,因此我们写一个函数 createObject
,来模拟 new
的效果。使用具体如下:
function Thin_User(name, age) {} const u1 = new Thin_user(...) const u2 = createObject(Thin_User, ...a) 复制代码
初步模拟
根据上面分析,createObject
编写的大致步骤为:
- 创建一个新对象
obj
- 设置
obj.__proto__->constructor.prototype
(但 JavaScript 不推荐直接修改 proto 属性,提供了 setPrototypeOf 方法来专门修改原型) - 使用
constructor.call/apply(obj, ...)
,将属性添加到obj
上 - 返回
obj
__proto__和prototype
,可以看JavaScript之彻底理解原型与原型链call/apply
,可以看[JavaScript之手撕call、apply]juejin.cn/post/702094…
学习完这些,我们就可以编写 new
初版代码:
function createObject(Con) { // 创建新对象obj // var obj = {};也可以 var obj = Object.create(null); // 将obj.__proto__ -> 构造函数原型 // (不推荐)obj.__proto__ = Con.prototype Object.setPrototypeOf(obj, Con.prototype); // 执行构造函数 Con.apply(obj, [].slice.call(arguments, 1)); // 返回新对象 return obj; } 复制代码
返回值处理
众所周知,函数是有返回值的,那构造函数如果有返回值,最终执行 new
后返回的结果会是怎样?
返回值为基本类型
假设构造函数返回值为一个基本类型,我们来看一下最后的返回结果:
function Thin_User(name, age) { this.name = name; this.age = age; return 'i will keep thin forever'; } Thin_User.prototype.eatToMuch = function () { console.log('i eat so much, but i\'m very thin!!!'); } Thin_User.prototype.isThin = true; const xiaobao = new Thin_User('zcxiaobao', 18); console.log(xiaobao.name); // zcxiaobao console.log(xiaobao.age); // 18 console.log(xiaobao.isThin); // true // i eat so much, but i'm very thin!!! xiaobao.eatToMuch(); 复制代码
最后的返回结果好像受到任何干扰,难道构造函数不会对返回值进行处理吗?
不急,我们来接着测试一下返回值为对象的情况。
返回值为对象
function Thin_User(name, age) { this.name = name; this.age = age; return { name: name, age: age * 10, fat: true } } Thin_User.prototype.eatToMuch = function () { // 白日做梦吧,留下肥胖的泪水 console.log('i eat so much, but i\'m very thin!!!'); } Thin_User.prototype.isThin = true; const xiaobao = new Thin_User('zcxiaobao', 18); // Error: xiaobao.eatToMuch is not a function xiaobao.eatToMuch(); 复制代码
当我执行eatToMuch
时,控制台直接报错,没有当前函数,于是我打印了xiaobao
对象:
发现xiaobao
对象的age
发生了改变,而且增加了fat
属性,正好与构造函数的返回值一样。
看完这两个例子,基本可以理清构造函数有返回值的情况:当构造函数返回值为对象时,直接返回这个对象。
终版模拟
function createObject(Con) { // 创建新对象obj // var obj = {};也可以 var obj = Object.create(null); // 将obj.__proto__ -> 构造函数原型 // (不推荐)obj.__proto__ = Con.prototype Object.setPrototypeOf(obj, Con.prototype); // 执行构造函数,并接受构造函数返回值 const ret = Con.apply(obj, [].slice.call(arguments, 1)); // 若构造函数返回值为对象,直接返回该对象 // 否则返回obj return typeof(ret) === 'object' ? ret: obj; } 复制代码
往期精彩文章
- 牛客最新前端JS笔试百题
- 原生JavaScript灵魂拷问(二),你能全部答对吗?
- 原生JavaScript灵魂拷问(一),你能答上多少?
- JavaScript之彻底理解原型与原型链
- JavaScript之预编译学习
- JavaScript之彻底理解EventLoop
- 《2w字大章 38道面试题》彻底理清JS中this指向问题
后语
如果大家感觉此文对你有一些帮助,希望能点个赞,鼓励鼓励阿包,阿包会不断努力的。另外如果本文章有问题,或者对文章其中一部分不理解,都可以评论区回复我,我们来一起讨论,共同学习,一起进步!
如果感觉评论区说不明白,也可以添加我的微信或者 qq 详细交流,名字都是战场小包。