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.
- constructional
this
We need to point to something new so we can get throughp.name
Access the corresponding property, because we are in the constructor is thename
Property place constructorthis
On 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.
becausenew
Is a keyword that cannot be used like other primitive methods (call()
), so we use a function to simulatenew
The 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.