JavaScript之手撕new

[](()举个例子

// 现实中瘦不了，但网络中一定要保持苗条

function Thin_User(name, age) {

this.name = name;

this.age = age;

}

Thin_User.prototype.eatToMuch = function () {

// 白日 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 做梦吧，留下肥胖的泪水

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指向新对象

• 返回新对象

[](()补充说明

由于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](()

学习完这些，我们就可以编写第一版代码：

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