Prototype mode story chain--the process of new an object

Previous general title : https: //segmentfault.com/a/11 ...
Question: Do you have an object?
Answer : No.
stupid! Wouldn't it be good if the new one!

Question: Why should I understand the process of new an object?
Answer: If you do n’t understand this process, you do n’t know why it ’s just a new one. This example can use various methods of the prototype.

The process of new an object: need to go through 4 steps, combined with the prototype model in the previous chapter as an example.
var cat = new Animal ('orange cat');

1. Create a new empty object.
var cat = {}

2. Set the implicit prototype of the new object to point to the explicit prototype of its constructor
cat._proto_ = Animal.protype

3. Execute the constructor code, this points to this new object.
Animal.call (cat)

4. Return the object (return this)
var cat = new Animal ();
(Save the returned object in the variable cat, so this cat is an instance of this object, so cat itself is also an object)

Alright, you have an object. You are out of order.
If it is still difficult to understand, let me just say it in plain terms: the
original code looks like this.

    //构造函数
    function Animal(name){
        this.name = name;
        //为什么在原型里的方法放到构造函数里呢，因为2.设置新的对象的隐式原型指向其构造函数的显式原型
        this.eat = function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }

This becomes the case after using the new operator.

    //构造函数
    function Animal(name){
        //1.创建一个空的对象（为了方便理解我们让这个对象就叫this）
        var this = {};
        
        //3.执行构造函数代码，往this里添加属性和方法。
        this.name = name;
        this.eat = function(val){
            console.log(this.name + ' like eat '+ val);
        }
        
        //4.返回该对象（返回this）
        return this;
    }

So when we var cat = new Animal ('orange cat');
it is equivalent to var cat = this; // The method attribute cat in this can be used.

Verification: Let's verify whether we have done the above things.
Verification Step 2:
Output the log in the console:
image description

As you can see from the picture above, cat._proto_ and Animal.protype are completely equal. Description 2 holds.

Verify steps 3 and 4:

//构造函数
    function Animal(name){
        this.name = name;
        console.log('this:',this)
    }
    
    // 原型
    Animal.prototype = {
        eat:function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }
    
    Animal();//window

As can be seen from the above, when there is no instantiation (when there is no new), this refers to the window.
Then see if this will point to this new object after new.

//构造函数
    function Animal(name){
        this.name = name;
        console.log('this:',this)
    }
    
    // 原型
    Animal.prototype = {
        eat:function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }

    // 实例化
    var cat = new Animal('橘猫');

    console.log('cat就是：',cat)

The console output log is as follows:
image description

Both are identical, so we can verify that steps 3 and 4 are true. The constructor is executed and this points to this new object.

Question: What are implicit prototypes and explicit prototypes? Why can cat call something in the explicit prototype?
Next time: prototype chain https: //segmentfault.com/a/11 ...

Guess you like