通过构造函数中设置_前端培训

通过构造函数中设置

this.name = ‘jszhang’;let Foo = function() {  this.name = ‘zhazhazhang’;}let foo = new Foo();console.log(foo.name); // 输出啥？console.log(window.name); // 输出啥？

答案是：

• zhazhazhang
• jszhang

在将这个答案的缘故之前，我们看下 new Foo() 中，JavaScript 引擎做了什么事：

• 首先创建一个空对象 tempObj = {}。
• 接着调用 Foo.apply 方法，将 tempObj 作为 apply 方法的参数，这样当 Foo 的执行上下文创建时，它的 this 就指向 tempObj 对象。
• 然后执行 Foo 函数，此时的 Foo 函数执行上下文中的 this 指向了 tempObj 对象。
• 最后返回 tempObj 对象。

如上，我们可以看到此时 this 是属于 tempObj 的，绑定到 foo 上去了，从而获取到：

• zhazhazhang
• 25
• jszhang

当然，了解到这里，我们还是完善下 new 这个手写方法，免得误导小伙伴们觉得 new 就做了那么点事：

function myNew(func, …args) {  // 1. 判断方法体  if (typeof func !== ‘function’) {    throw ‘第一个参数必须是方法体’;  }   // 2. 创建新对象  const obj = {};   // 3. 这个对象的 __proto__ 指向 func 这个类的原型对象  // 即实例可以访问构造函数原型（constructor.prototype）所在原型链上的属性  obj.__proto__ = Object.create(func.prototype);   // 为了兼容 IE 可以让步骤 2 和 步骤 3 合并  // const obj = Object.create(func.prototype);   // 4. 通过 apply 绑定 this 执行并且获取运行后的结果  let result = func.apply(obj, args);    // 5. 如果构造函数返回的结果是引用数据类型，则返回运行后的结果  // 否则返回新创建的 obj  const isObject = typeof result === ‘object’ && result !== null;  const isFunction = typeof result === ‘function’;  return isObject || isFunction ? result : obj;}// 测试function Person(name) {  this.name = name;  return function() { // 用来测试第 5 点    console.log(‘返回引用数据类型’);  };}// 用来测试第 2 点和第 3 点Person.prototype.sayName = function() {  console.log(`My name is ${this.name}`);}const me = myNew(Person, ‘jszhang’); // 用来测试第 4 点me.sayName(); // My name is jszhangconsole.log(me); // Person {name: ‘jszhang’}// 用来测试第 1 点// const you = myNew({ name: ‘jszhang’ }, ‘jszhang’); // 报错：第一个参数必须是方法体

这样，我们就知道构造函数中的 new 是怎么一回事了。