(Two) prototype and prototype chain

---

One, prototype and prototype chain

In the contact prototype and prototype chain, I have the following questions:
1. What are the concepts of constructor, object, etc.? What is the prototype object?
2. It's not that only instance objects have __proto__ attributes. Why does prototype (prototype object) also have __proto__ attributes?
3. Why does the constructor separately put some method attributes out and write them into the prototype?

1. Constructor

在原型链中，我们有几个概念：构造函数、原型对象、实例对象。

        function Person(){
    
    }
        Person.prototype.age=18;
        Person.prototype.name=function(){
    
    return 'lk'};
        var person = new Person();
         
       
        console.log(Person.prototype);
        console.log(person.__proto__);
        console.log(Person.prototype.constructor);

We can see that

1. The one created with function is called the constructor, which is a class: Person
2. What is declared with the new keyword is an instance object. Through new Person(), an instance object of the Person constructor is created.
3. Person.prototype is also an object data type.
   

2. Why a prototype object?

  //不写在原型对象里
  function Person(){
    
    
        name:'lk';
        sayhi=function(){
    
    return 'hi'};
        }

If you want to create thousands of instances person1, person2...person10000 for the Person constructor, you have to create the sayhi function constantly; since they all have the same function, write them in one place. These instances of Person go Just take it in one place (prototype object)!
So we write some public properties and methods into the prototype object.

3. Two attributes: prototype and __proto__

1. Each constructor has a prototype attribute , pointing to its own prototype object
2. Each object has a __proto__ attribute , pointing to the prototype object of its own constructor (you need to use a method that is not written in the constructor, so it points to Is the prototype object of the constructor)

Now look at the relationship among instance objects, constructors, and prototype objects. Is it clearer?

4. Prototype chain

We said that the prototype object is also an object, with __proto__ attributes. So it also has its own constructor (Object constructor/constructor in this figure), the __proto__ attribute of the prototype object points to the prototype object of its own constructor (Object.prototype); and the prototype object of Object.prototype is null.
In this way, a route linked by the __proto__ attribute is called a prototype chain.

Two, the difference between new and Object.create

Both new and Object.create can be used to create objects, so why is there another way?

1. Use of Object.create

① Grammar

Object.create(proto,[propertiesObject])

proto: The prototype object of the newly created object
propertiesObject: optional. The enumerable property to be added to the new object.

②Look at a simple chestnut

<script>
        //自己写的原型对象
        const a = {
    
    
            name:'lk',
            sayhi:function(){
    
    console.log('hi')}
        }
        //创建一个新对象，a是它的原型对象
        const abab = Object.create(a,{
    
    
        height:{
    
    
        writable:true,
        configurable:true,
        value:180
        }
        })
        //看看创建的这个对象
        console.log(abab)
        abab.sayhi()
</script>

Correction: The prototype object of the prototype object a in the figure below should be Object.prototype, which is wrong

2. The difference between the two

①Look at the code

//2.细说区别
        //2.1用字面量创建对象：原型对象是Object
        const b = {
    
    
        name:'lk',
        sayhi:function(){
    
    console.log('hi')}
        }
        console.log(b)
        //2.2用Object.create创建对象，给定一个原型对象为null
        var baby = Object.create(null,{
    
    
            height:{
    
    
                value:18
            }
        })
        console.log(baby)

Through the above prototype and prototype chain learning, we can guess that the prototype object of the baby object is empty.

Through the above prototype and prototype chain learning, we can guess that the prototype object of the baby object is empty. We can also speculate on these objects (and the abab object in 1):
1. The prototype object of the abab object is a, and the prototype object of a is Object.prototype. The abab object can use the properties and methods in Object.prototype. On the prototype chain .
2. The b object created with literals can of course also use the properties and methods in Object.prototype.
3. The prototype object of the baby object is null, there is no way.

Try:

//2.3看看对象abab、b、baby的原型链上的方法toString
        console.log(abab.toString());
        console.log(b.toString());
        console.log(baby.toString());//报错

Of course, if we specify the prototype object as Object.prototype, it will be exactly the same as the object created with the literal /new.

//3.指定原型对象为Object.prototype
        var cdcd =Object.create(Object.prototype);
        console.log(cdcd);
        console.log(cdcd.toString())

②Summary.
In fact, the difference between the two is already well known:
Object.create can specify any prototype object, and is often used to create an instance with an empty object as the prototype object.