• All of the following texts are available in the warehouse: github.com/yayxs/top-f…
  • First published: April 24, 2020
  • Updated on November 25, 2020
  • Recommended Reading Address:… written/new.html
  • Recommended reading duration: 15 minutes
  • Recommended reading target: junior and intermediate front-end engineers, Js enthusiasts

Extended interview questions

Do you have a lot of question marks

  • Question1: What did New do after that?
  • Can I write the principle of the new operator?
  • Q3: What is the difference between creating objects with new and creating objects with literals

MDN description of the new operator keyword

  1. Create an empty simple JavaScript object (i.e{});
  2. Link this object (that is, set its constructor) to another object;
  3. Take the object created in Step 1 as the objectthisContext;
  4. Returns if the function does not return an objectthis.

The above four articles are about the new operator (or keyword) on MDN. It is a simple experience to use the constructor to new an object

function Person(name, age) {
  console.log("this".this);
  this.name = name;
  this.age = age;
}
// Then add the prototype method ** to the ** constructor
Person.prototype.height = 180;
Person.prototype.sayName = function() {
  console.log(this.name);
};
let p = new Person("yayxs".20);
console.log(p.name); // yayxs
console.log(p.age);
20;
p.sayName(); // yayxs
console.log(p.__proto__ === Person.prototype); // The stereotype property of object P (instance) points to the stereotype of the constructor,
Copy the code

Now that we’re customizing it, we’ll use it in much the same way as new.

// ------ when using new

const p = myNew Person('yayxs'.20) // The result is an object

// ---------
Copy the code

The first version of myNew

The idea is to declare an object, take the current constructor and its parameters, have the new object’s prototype attribute point to the constructor’s prototype, and then call the constructor, passing in the object’s parameters

function myNew() {
  let obj = new Object(),constructor.args] = [...arguments];
  obj.__proto__ = constructor.prototype;

  constructor.apply(obj, args);
  return obj;
}
Copy the code

The second edition of myNew

As can be seen from the simple case mentioned above,

  • New A constructor returns an object whose stereotype property (that is, ** proto **) is congruent with the constructor’s stereotype

  • The instance created by new through the constructor Persion has access to properties in the constructor, like this

    console.log(xiaoMing.name); / / xiao Ming
Copy the code

  • To the point: Instance objects from new are linked by a prototype chain and a constructor

A constructor is basically a function, and a function can have a return value

function Person(name) {
  this.name = name;
  // return 1; // Returns the internally created object
  // return "1"; // Returns the internally created object
  // return null; // Returns the internally created object
  // return undefined; // Returns the internally created object
  // return {}; // {} // returns directly
  return function() {}; // Return directly
  return [1]; // [1] // Returns directly
}
let p = new Person("Bill");
console.log(p);
Copy the code

Given the worthwhile idea of returning a constructor, test it out with different data types

  • Different data types return different effects, like the number 1 string “1”, which still returns an internally created object
  • So if you return an object ({}) or an array ([]), it will be returned directly

summary

That is, constructors generally do not need a return

  • Return a generic datatype. It doesn’t work
  • So let’s return an object. What’s the point of new

function myNew(){
  let obj = new Object(),constructor.args] =  [...arguments]
   obj.__proto__ = constructor.prototype;

  let res =  constructor.apply(obj,args)
  return =  typeof res= = = 'object'?res : obj;
}

Copy the code

Write your own myNew summary

If you implement a new yourself, you must first satisfy several of its effects

  1. A constructor that returns an object should have an object in it

    let obj = {};
Copy the code

  2. And points its __proto__ attribute to the constructor’s Prototype attribute

    obj.__proto__ = constructor.prototype;
Copy the code

  3. Call the constructor to bind this

    constructor.apply(obj, args);
Copy the code

  4. The original value should be ignored, and the returned object should be processed normally

    res instanceof Object ? res : obj;
Copy the code

Arrow function usingnew

var Foo = () = > {};
var foo = new Foo(); // TypeError: Foo is not a constructor
Copy the code
  • Cannot be used as constructors, that is, not usednewCommand, otherwise an error will be thrown

thisPointing is fixed, not because there is a binding inside the arrow functionthisThe actual reason for this is that arrow functions don’t have their ownthisLead to internalthisThat’s the outer code blockthis. Precisely because it doesn’tthis, so it cannot be used as a constructor.