JavaScript把new给拿捏住了 _生活百科

本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于new的相关问题，new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一，希望对大家有帮助。

文章插图

【相关推荐：javascript视频教程】
前言什么是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); // zcxiaobaoconsole.log(xiaobao.age); // 18console.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

补充说明由于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

constructor.call/apply(obj, ...)

obj

__proto__和prototype，可以看JavaScript之彻底理解原型与原型链
call/apply，可以看JavaScript之手撕call、apply

学习完这些，我们就可以编写第一版代码：
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); // zcxiaobaoconsole.log(xiaobao.age); // 18console.log(xiaobao.isThin); // true// i eat so much, but i'm very thin!!!xiaobao.eatToMuch();最后的返回结果好像受到任何干扰，难道构造函数不会对返回值进行处理吗？
不急，我们来接着测试一下返回值为对象的情况。
返回值为对象【JavaScript把new给拿捏住了】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 functionxiaobao.eatToMuch();当我执行eatToMuch时，控制台直接报错，没有当前函数，于是我打印了xiaobao对象：