Function

构造函数的 return

默认情况下，没有 return 的函数默认返回值为 undefined。

构造函数比较特殊， new 一个没有 return 的构造函数，默认返回新创建的对象。
而有 return 时有两种情况：

• 返回值为基本数据类型，则返回新创建的对象，即 this。
• 返回值为引用数据类型，返回这个引用数据类型对象，丢弃 this。

function IntNumber(a) {
  this.b = 2;
  return a;
}

new IntNumber(1); // { b: 2 }

function PlainObject(a) {
  this.b = 2;
  return {
    a,
  };
}

new PlainObject(1); // { a: 1 }

new

new 执行过程：

1. 创建一个原型为构造函数的新对象
2. 执行构造函数，并将 this 指向对象
3. 返回值是基本数据类型，返回新创建的对象；是引用数据类型，返回这个引用数据类型对象。

源代码：手写 new

export function New(...argv: any): object | Function {
  const constructor: unknown = Array.prototype.shift.call(arguments);
  if (typeof constructor !== 'function') {
    throw new Error(`Uncaught TypeError: constructor should be a function`);
  }
  // 创建一个原型为构造函数的新对象
  const obj = Object.create(constructor.prototype);
  // 执行构造函数，并将 this 指向对象
  const res = constructor.apply(obj, arguments);
  // 执行结果是引用类型，则返回执行结果；是值类型，则返回创建的对象
  if (res !== null && (typeof res === 'object' || typeof res === 'function')) {
    return res;
  } else {
    return obj;
  }
}

代码效果

import { New } from 'sth';

function Person(name: string, age: number) {
  this.name = name;
  this.age = age;
  this.introduce = function (): string {
    return 'My name is ' + this.name + ', ' + this.age + ' years old.';
  };
}

const person: any = New(Person, 'Li Lei', 18);
person.name ; // 'Li Lei'
person.age; //18
person.introduce(); // 'My name is Li Lei, 18 years old.'

function PlainObject(a: any) {
  this.b = 2;
  return {
    a,
  };
}

const object: any = New(PlainObject, 1);
object.a; // 1

function IntNumber(a: number) {
  this.b = 2;
  return a;
}

const number = new IntNumber(1);
number; // { b: 2 }

箭头函数

箭头函数不能作为构造函数使用。

箭头函数没有 arguments。

箭头函数没有 prototype。

箭头函数中 this 的指向在它在定义时已经确定了，且之后不会改变。
箭头函数会继承自己作用域的上一层的 this 。

// ES6
function getArrow() {
  return () => {
    console.log(this);
  };
}

// ES5，由 Babel 转译
function getArrow() {
  var _this = this;
  return function () {
    console.log(_this);
  };
}