js new 运算符 自定义实现

原文链接: js new 运算符 自定义实现

上一篇: js null undefine

下一篇: 使用class和function创建对象的区别

https://juejin.im/post/5bde7c926fb9a049f66b8b52

通过new创建对象经历4个步骤

1、创建一个新对象；[var o = {};]

2、将构造函数的作用域赋给新对象（因此this指向了这个新对象）；[Person.apply(o)] [Person原来的this指向的是window]

3、执行构造函数中的代码(为这个新对象添加属性)；

4、返回新对象。

创建一个对象类型，需要创建一个指定其名称和属性的函数；对象的属性可以指向其他对象，看下面的例子：

当代码 new Foo (...) 执行时，会发生以下事情：

1. 一个继承自 Foo .prototype 的新对象被创建。
2. 使用指定的参数调用构造函数 Foo ，并将 this 绑定到新创建的对象。 new Foo 等同于 new Foo () ，也就是没有指定参数列表， Foo 不带任何参数调用的情况。
3. 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

你始终可以对已定义的对象添加新的属性。例如， car1.color = "black" 语句给 car1 添加了一个新的属性 color ，并给这个属性赋值 " black "。但是，这不会影响任何其他对象。要将新属性添加到相同类型的所有对象，你必须将该属性添加到 Car 对象类型的定义中。

你可以使用 Function.prototype 属性将共享属性添加到以前定义的对象类型。这定义了一个由该函数创建的所有对象共享的属性，而不仅仅是对象类型的其中一个实例。下面的代码将一个值为 null 的 color 属性添加到 car 类型的所有对象，然后仅在实例对象 car1 中用字符串 " black " 覆盖该值。详见 prototype 。

原生使用new

  function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function () {
      alert(this.name);
    };
  }

  let person1 = new Person("yan", 23, "stu");
  let person2 = new Person("sun", 23, "stus");
  console.log(person1.__proto__ === person2.__proto__);//true
  console.log(person1.__proto__ === Person.prototype);//true
  console.log(Person.prototype.constructor === Person);//true
  //因此person1.__proto__ = person2.__proto__ = Person.prototype
  console.log(person1.name);//yan

构造和实现自己的New

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
    alert(this.name);
  };
}

let New = function (P) {
  let o = {};
  let arg = Array.prototype.slice.call(arguments, 1);

  o.__proto__ = P.prototype;
  P.prototype.constructor = P;

  P.apply(o, arg);

  return o;
};
let p1 = New(Person, "Ysir", 24, "stu");
let p2 = New(Person, "Sun", 23, "stus");
console.log(p1.name);//Ysir
console.log(p2.name);//Sun
console.log(p1.__proto__ === p2.__proto__);//true
console.log(p1.__proto__ === Person.prototype);//true

第二种自定义方式

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
    alert(this.name);
  };
}

function New(F) {
  var obj = {'__proto__': F.prototype};  /*第一步*/
  return function () {
    F.apply(obj, arguments);           /*第二步*/
    return obj;                        /*第三步*/
  }
}

let p1 = New(Person)("Ysir", 24, "stu");
let p2 = New(Person)("Sun", 23, "stus");
console.log(p1.name);//Ysir
console.log(p2.name);//Sun
console.log(p1.__proto__ === p2.__proto__);//true
console.log(p1.__proto__ === Person.prototype);//true