It’s a new journey. Go for it.

preface

This chapter is about the new keyword. First, let’s take a look at the use of the new keyword.

function Person(name, age) { this.name = name; this.age = age; } person.prototype. say = function() {console.log(' name: '+ this.name +', age: '+ this.age); } var p = new Person(' orange ', 18); console.log(Person.prototype) console.log(p) console.log(Person.prototype === p.__proto__) console.log(typeof p) console.log(p.name); console.log(p.age); p.say();Copy the code

From the above examples, we can draw the following conclusions:

  • Instantiating an instance of the constructor with the new keyword returns a new object.
  • constructionalthisWe need to point to something new so we can get throughp.nameAccess the corresponding property, because we are in the constructor is thenameProperty place constructorthisOn the.
  • New object prototype (__proto__) points to the prototype of the constructor (prototype), so we can access the constructor prototype directlysay()Methods. For those of you who are not yet familiar with the prototype, take a look at it.portal

So the new keyword basically does three things: return a new object, constructor this points to the new object, and new object prototype points to constructor prototype!! Returns a new object, constructor this points to the new object, new object prototype points to the constructor prototype!! Returns a new object, constructor this points to the new object, new object prototype points to the constructor prototype!!

Analog implementation

Implement a

Does the new keyword suddenly feel less fashionable? All the time? Em… All right.

Ok, so without further ado, let’s try to implement these three things, don’t we just return a new object and change the associated pointer? Simple, let’s take a look at the code first (note the comments).

Function myNew(constructor) {// define a newObject let newObject = newObject (); // change the newObject's prototype to point to the constructor newobject.__proto__ = constructive.prototype; Constructor. Apply (newObject, [].slice.call(arguments, 1)) // Return newObject; } var p = myNew(Person, 'Person ', 18); console.log(Person.prototype) console.log(p) console.log(Person.prototype === p.__proto__) console.log(typeof p) console.log(p.name); console.log(p.age);Copy the code

The code is not much, and the result of the test code is the same as the original picture above, which indicates success.

becausenewIs a keyword that cannot be used like other primitive methods (call()), so we use a function to simulatenewThe effect.

Function Person(){} var p = new Person(parmas,... ; Var p = myNew(Person, parmas,...) ;Copy the code

The above code focuses on the myNew() aspect, and it’s only four lines of code. The only method of interest is the call() and apply() methods, for those unfamiliar with them. portal

Is that it? Have you finished? I’m sure it’s not. Keep going for it.

Realize the

Let’s focus on the constructor return value problem. Let’s look at the following code.

function Person(params){
  return params;
}

let string = new Person('string');
let number = new Person(100);
let boolean = new Person(true);
let object = new Person({a: 1});
let array = new Person([1]);
let fun = new Person(() => {});

console.log(string);
console.log(number);
console.log(boolean);
console.log(object);
console.log(array);
console.log(fun);
Copy the code

If the new keyword returns a String, Number, or Boolean, then the constructor instantiates the object. If an Object, Array, Function, or other reference type is returned, the values themselves are returned.

Based on the above tests, the myNew() method we implemented has always just returned the new object, but now we need to change that.

function myNew(constructor) { let newObject = new Object(); newObject.__proto__ = constructor.prototype; Let resutl = constructive.apply (newObject, [].slice.call(arguments,)) Return resutl instanceof Object newObject : resutl; }Copy the code

Finally, let’s take a look at the test code.

function Person(params){
  return params;
}

let string = myNew(Person, 'string');
let number = myNew(Person, 100);
let boolean = myNew(Person, true);
let object = myNew(Person, {a: 1});
let array = myNew(Person, [1]);
let fun = myNew(Person, () => {});

console.log(string);
console.log(number);
console.log(boolean);
console.log(object);
console.log(array);
console.log(fun);
Copy the code

That’s the end of this chapter. Thank you for watching.