The interviewer asked: can you simulate the new operator of JS

1.  Preface

Hello everyone , I am a

If Chuan

.

In order to help more interested in the source code 、 Want to learn to read the source code 、 Students who improve their front-end technical ability

. I tried my best to organize recently

Source code co reading activity

, Three months have passed , Let's exchange and study together , Common progress , Many people said they had gained a lot .

This is the first in the interviewer's question series , Designed to help readers improve

JS

Basic knowledge of , contain

new、call、apply、this、 Inherit

Related knowledge .<br>

Interviewer asks series

The article is as follows ： Interested readers can click to read .<br>1.

Interviewer asked ： Can we simulate it JS Of new The operator

<br>2.

Interviewer asked ： Can we simulate it JS Of bind Method

<br>3.

Interviewer asked ： Can we simulate it JS Of call and apply Method

<br>4.

Interviewer asked ：JS Of this Point to

<br>5.

Interviewer asked ：JS Inheritance

<br>

Used to

Vuejs

All of my classmates know that , Need to use

new

Operator to instantiate .

new Vue({
 el: '#app',
 mounted(){},
});


Then the interviewer may ask if he thought about

new

What did you do , How to simulate the implementation .

Attach a paragraph from a previous article ： There are already many simulation implementations

new

Operator article , Why should I write it again . Learning is like a mountain , People climb mountains along different roads , Share the scenery you see . You don't have to be able to see what others see , Feel the feelings of others . Only go climbing by yourself , To see different landscapes , Experience is more profound .

2. new  What did you do

First look at the simple

Example 1

：

//  Example 1
function Student(){
}
var student = new Student();
console.log(student); // {}
// student  It's an object .
console.log(Object.prototype.toString.call(student)); // [object Object]
//  We know that we can also declare objects with new Object();  It just looks more complicated
//  By the way  `new Object`( Not recommended ) and Object() The same effect
//  It can be guessed that an internal judgment has been made , use new call
/** if (!(this instanceof Object)) {
* return new Object();
* }
*/
var obj = new Object();
console.log(obj) // {}
console.log(Object.prototype.toString.call(student)); // [object Object]

typeof Student === 'function' // true
typeof Object === 'function' // true


From this example , We can see that ： A function uses

new

Operator to call , A completely new object is generated . and

Student

and

Object

It's all functions , It's just

Student

It's our custom ,

Object

yes

JS

Built in . Let's take a look at the console output diagram , Interested readers can try it on the console .

And

new Object()

  The difference between the generated objects is

new Student()

There is also a layer nested in the generated object

__proto__

, its

constructor

yes

Student

This function .

//  in other words ：
student.constructor === Student;
Student.prototype.constructor === Student;


2.1  Summary 1： From this simple example ,

new

The operator does two things ：

• A new object is created .

• This object will be executed
  [[Prototype]]
  （ That is to say
  __proto__
  ） link .

Next, let's look at the upgraded version

Example 2

：

//  Example 2
function Student(name){
 console.log(' Before assignment -this', this); // {}
 this.name = name;
 console.log(' After the assignment -this', this); // {name: ' If Chuan '}
}
var student = new Student(' If Chuan ');
console.log(student); // {name: ' If Chuan '}


From this we can see that ： here

Student

Function

this

Point to

new Student()

Generated objects

student

.

2.2  Summary 2： From this example ,

new

The operator does one more thing ：

• The generated new object is bound to the function call
  this
  .

Next, let's move on to the upgraded version

Example 3

：

//  Example 3
function Student(name){
 this.name = name;
 // this.doSth();
}
Student.prototype.doSth = function() {
 console.log(this.name);
};
var student1 = new Student(' if ');
var student2 = new Student(' sichuan ');
console.log(student1, student1.doSth()); // {name: ' if '} ' if '
console.log(student2, student2.doSth()); // {name: ' sichuan '} ' sichuan '
student1.__proto__ === Student.prototype; // true
student2.__proto__ === Student.prototype; // true
// __proto__  It is the prototype scheme of browser implementation .
//  use ES5  It is ：
Object.getPrototypeOf(student1) === Student.prototype; // true
Object.getPrototypeOf(student2) === Student.prototype; // true


About JS I saw this picture before , I think it's very good , Share with you .

2.3  Summary 3： This example 3 Once again

Summary 1

Medium

The first 2 spot

. That is, the object will be executed

[[Prototype]]

（ That is to say

__proto__

） link . And through

new Student()

Each object created will eventually be

[[Prototype]]

Link to this

Student.protytype

On the object .

Careful students may find that the functions in these three examples have no return values . So what happens when there is a return value . So next, let's look at

Example 4

//  Example 4
function Student(name){
 this.name = name;
 // Null（ empty ） null
 // Undefined（ Undefined ） undefined
 // Number（ Numbers ） 1
 // String（ character string ）'1'
 // Boolean（ Boolean ） true
 // Symbol（ Symbol ）（ New in the sixth edition ） symbol

 // Object（ object ） {}
 // Function（ function ） function(){}
 // Array（ Array ） []
 // Date（ date ） new Date()
 // RegExp（ Regular expressions ）/a/
 // Error （ error ） new Error()
 // return /a/;
}
var student = new Student(' If Chuan ');
console.log(student); {name: ' If Chuan '}


After I tested these seven types

MDN JavaScript type

, The result is ： The first six basic types will return normally

{name: ' If Chuan '}

, hinder

Object

( contain

Functoin

, 

Array

, 

Date

, 

RegExg

, 

Error

) Will return these values directly .

2.4  The resulting   Summary 4：

• If the function does not return an object type
  Object
  ( contain
  Functoin
  , 
  Array
  , 
  Date
  , 
  RegExg
  , 
  Error
  ), that
  new
  The function call in the expression automatically returns the new object .

Combine these summaries , Put it together ：

• A new object is created .

• This object will be executed
  [[Prototype]]
  （ That is to say
  __proto__
  ） link .

• The generated new object is bound to the function call
  this
  .

• adopt
  new
  Each object created will eventually be
  [[Prototype]]
  Linked to this function
  prototype
  On the object .

• If the function does not return an object type
  Object
  ( contain
  Functoin
  , 
  Array
  , 
  Date
  , 
  RegExg
  , 
  Error
  ), that
  new
  The function call in the expression automatically returns the new object .

3. new  Simulation Implementation

Knowing these phenomena , We can simulate the implementation

new

The operator . Post code and comments directly

/**
 *  Simulation Implementation  new  The operator
 * @param {Function} ctor [ Constructors ]
 * @return {Object|Function|Regex|Date|Error} [ Return results ]
 */
function newOperator(ctor){
 if(typeof ctor !== 'function'){
 throw 'newOperator function the first param must be a function';
 }
 // ES6 new.target  Is pointing to the constructor
 newOperator.target = ctor;
 // 1. Create a new object ,
 // 2. And perform [[Prototype]] link
 // 4. adopt `new` Each object created will eventually be `[[Prototype]]` Linked to this function `prototype` On the object .
 var newObj = Object.create(ctor.prototype);
 // ES5 arguments Turn it into an array   You can also use it ES6 [...arguments], Aarry.from(arguments);
 //  remove ctor The rest of the arguments to the constructor
 var argsArr = [].slice.call(arguments, 1);
 // 3. The generated new object is bound to the function call `this`.
 //  Get ctor Function returns the result
 var ctorReturnResult = ctor.apply(newObj, argsArr);
 //  Summary 4  Of these types, only Object and Function Two types of  typeof null  It's also 'object' So it's not equal to null, exclude null
 var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
 var isFunction = typeof ctorReturnResult === 'function';
 if(isObject || isFunction){
 return ctorReturnResult;
 }
 // 5. If the function does not return an object type `Object`( contain `Functoin`, `Array`, `Date`, `RegExg`, `Error`), that `new` The function call in the expression automatically returns the new object .
 return newObj;
}


Finally, it is realized by simulation

newOperator

Function to verify the previous

Example 3

：

//  Example 3  Add one more parameter
function Student(name, age){
 this.name = name;
 this.age = age;
 // this.doSth();
 // return Error();
}
Student.prototype.doSth = function() {
 console.log(this.name);
};
var student1 = newOperator(Student, ' if ', 18);
var student2 = newOperator(Student, ' sichuan ', 18);
// var student1 = new Student(' if ');
// var student2 = new Student(' sichuan ');
console.log(student1, student1.doSth()); // {name: ' if '} ' if '
console.log(student2, student2.doSth()); // {name: ' sichuan '} ' sichuan '

student1.__proto__ === Student.prototype; // true
student2.__proto__ === Student.prototype; // true
// __proto__  It is the prototype scheme of browser implementation .
//  use ES5  It is ：
Object.getPrototypeOf(student1) === Student.prototype; // true
Object.getPrototypeOf(student2) === Student.prototype; // true


It can be seen that , Quite in line with

new

The operator . The reader finds something wrong or can be improved , Welcome to point out . Review the simulation

new

function

newOperator

Realization , The greatest hero should belong to

Object.create()

This

ES5

Provided

API

.

4. Object.create()  Usage example

I also mentioned in a previous article , You can look through

JavaScript  Object all API analysis

MDN Object.create()

Object.create(proto, [propertiesObject])

Method creates a new object , Using an existing object to provide a newly created object __proto__. It takes two parameters , But the second optional parameter is the property descriptor （ Not commonly used , The default is

undefined

）.

var anotherObject = {
 name: ' If Chuan '
};
var myObject = Object.create(anotherObject, {
 age: {
 value：18,
 },
});
//  Get its prototype
Object.getPrototypeOf(anotherObject) === Object.prototype; // true  explain anotherObject The prototype is Object.prototype
Object.getPrototypeOf(myObject); // {name: " If Chuan "} //  explain myObject The prototype is {name: " If Chuan "}
myObject.hasOwnProperty('name'); // false;  explain name It's a prototype .
myObject.hasOwnProperty('age'); // true  explain age It's self
myObject.name; // ' If Chuan '
myObject.age; // 18;


For not supporting

ES5

Browser ,

MDN

I have provided

ployfill

programme .

if (typeof Object.create !== "function") {
 Object.create = function (proto, propertiesObject) {
 if (typeof proto !== 'object' && typeof proto !== 'function') {
 throw new TypeError('Object prototype may only be an Object: ' + proto);
 } else if (proto === null) {
 throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
 }

 if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");

 function F() {}
 F.prototype = proto;
 return new F();
 };
}


Here we are , The article is basically finished . Thank you for reading here .

5.  So to conclude ：

• new
  What did you do ：

• A new object is created .

• This object will be executed
  [[Prototype]]
  （ That is to say
  __proto__
  ） link .

• The generated new object is bound to the function call
  this
  .

• adopt
  new
  Each object created will eventually be
  [[Prototype]]
  Linked to this function
  prototype
  On the object .

• If the function does not return an object type
  Object
  ( contain
  Functoin
  , 
  Array
  , 
  Date
  , 
  RegExg
  , 
  Error
  ), that
  new
  The function call in the expression automatically returns the new object .

• How to simulate

//  Removed comments
function newOperator(ctor){
 if(typeof ctor !== 'function'){
 throw 'newOperator function the first param must be a function';
 }
 newOperator.target = ctor;
 var newObj = Object.create(ctor.prototype);
 var argsArr = [].slice.call(arguments, 1);
 var ctorReturnResult = ctor.apply(newObj, argsArr);
 var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
 var isFunction = typeof ctorReturnResult === 'function';
 if(isObject || isFunction){
 return ctorReturnResult;
 }
 return newObj;
}


The reader finds something wrong or can be improved , Welcome to point out . In addition, I think it's well written , You can like it , It's also a kind of support for me .

Finally, you can continue to pay attention to me  @ If Chuan . Welcome to communicate with me , Participate in  

Source code read together

  Activities , We study together every week  200  Lines of source code , Common progress .