Handwritten js new, what really happens in the process of new
In JavaScript, the application of the new keyword can be said to be more than usual, the most basic new Array (), new Set (), and then is new a constructor created by themselves, that is, to create an example of the constructor. Such as: var person1 = new Person ("an apple", 18); but do you really understand new and its underlying principles, this article will give a few examples and handwritten a new to take you in-depth understanding.
new
Usage of new
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const car1 = new Car('Eagle', 'Talon TSi', 1993);
(); //Output: "Eagle"
So what happened to the new process?
-
Create an empty object: Creates an empty simple JavaScript object. For convenience, we'll call thisnewInstance。
-
Specify the prototype chain: WillnewInstance The [[Prototype]] of the [[Prototype]] points to the constructor'sprototype attribute, otherwise thenewInstance will remain a normal object with a [[Prototype]] of
-
Change this to point to: Execute the constructor with the given parameters andnewInstance The context to bind to this.
-
return value: ReturnnewInstance。
Handwrite a new
function myNew(Fun, ...args) {
let obj = {}
obj.__proto__ =
(obj, args)
return obj
}
function Person(name,age) {
= name
= age
}
let apple = myNew(Person, 'An apple.','18')
(); //exports：An apple.
(); //exports：18
-
...args: Put all the remaining elements into theargscenter
-
obj. __ proto __ = : Willobj The prototype chain points to the constructor'sprototype causality
-
(obj, args): binds this inside the constructor to theobjon it and executes the constructor
With this sequence of operations, we can get the constructor'snamerespond in singingageProperties.。
It looks like it's done, but it's actually missing a very important point.
Recall that when we create an object through the new function, what else do we do besides referencing its properties?
let arr = new Array()
(4)
(3)
(arr);
Of course it is to use its own methods, but the above does not give a reference on the method. This will have to introduce the knowledge of the prototype chain, we just need to add to the prototype chain of Person's methods we want to be able to realize the code is as follows:
function myNew(Fun, . .args) {
let obj = {}
obj.__proto__ =
(obj, args)
return obj
}
function Person(name,age) {
= name
= age
}
= function () {
('I am an instance object of Person'); }
}
= function () {
()
}
let p = myNew(Person, 'an apple')
(); // Output: I am an instance object of Person
(); // Output: an apple
(); // Output: an apple
That's our final answer, give it to the interviewer, PERFECT!
function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } const car1 = new Car('Eagle', 'Talon TSi', 1993); (); //Output: "Eagle"
-
Create an empty object: Creates an empty simple JavaScript object. For convenience, we'll call this
newInstance。 -
Specify the prototype chain: Will
newInstanceThe [[Prototype]] of the [[Prototype]] points to the constructor'sprototypeattribute, otherwise thenewInstancewill remain a normal object with a [[Prototype]] of。 -
Change this to point to: Execute the constructor with the given parameters and
newInstanceThe context to bind to this. -
return value: Return
newInstance。
Handwrite a new
function myNew(Fun, ...args) {
let obj = {}
obj.__proto__ =
(obj, args)
return obj
}
function Person(name,age) {
= name
= age
}
let apple = myNew(Person, 'An apple.','18')
(); //exports：An apple.
(); //exports：18-
...args: Put all the remaining elements into the
argscenter -
obj. __ proto __ = : Will
objThe prototype chain points to the constructor'sprototypecausality -
(obj, args): binds this inside the constructor to the
objon it and executes the constructor
With this sequence of operations, we can get the constructor'snamerespond in singingageProperties.。
It looks like it's done, but it's actually missing a very important point.
Recall that when we create an object through the new function, what else do we do besides referencing its properties?let arr = new Array()
(4)
(3)
(arr);Of course it is to use its own methods, but the above does not give a reference on the method. This will have to introduce the knowledge of the prototype chain, we just need to add to the prototype chain of Person's methods we want to be able to realize the code is as follows:
function myNew(Fun, . .args) {
let obj = {}
obj.__proto__ =
(obj, args)
return obj
}
function Person(name,age) {
= name
= age
}
= function () {
('I am an instance object of Person'); }
}
= function () {
()
}
let p = myNew(Person, 'an apple')
(); // Output: I am an instance object of Person
(); // Output: an apple
(); // Output: an apple