The most detailed explanation of JS prototype and prototype chain

1. Ordinary objects and function objects

In JavaScript, everything is an object! But the objects are also different. Divided into ordinary objects and function objects, Object and Function are the function objects that come with JS. The following is an example

 var o1 = {}; 
 var o2 =new Object(); var o3 = new f1(); 
 function f1(){}; 
 var f2 = function(){}; var f3 = new Function('str','console.log(str)');
 
 console.log(typeof Object); //function 
 console.log(typeof Function); //function   
 console.log(typeof f1); //function 
 console.log(typeof f2); //function 
 console.log(typeof f3); //function    
 console.log(typeof o1); //object 
 console.log(typeof o2); //object 
 console.log(typeof o3); //object

In the above example, o1 o2 o3 is an ordinary object, and f1 f2 f3 is a function object. How to distinguish is actually very simple. All objects created through new Function() are function objects, and others are ordinary objects. f1, f2, are all created through new Function() in the final analysis. Function Objects are also created through New Function().

Be sure to distinguish between ordinary objects and function objects. We will use it frequently below.

2. Constructor

Let’s review the knowledge of constructor first:

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function() { alert(this.name) } 
 }
 var person1 = new Person('Zaxlct', 28, 'Software Engineer');
 var person2 = new Person('Mick', 23, 'Doctor');

The above example Person1 and person2 are both instances of Person. Both instances have a constructor (constructor) attribute, which (is a pointer) points to Person. That is:

   console.log(person1.constructor == Person); //true
   console.log(person2.constructor == Person); //true

We need to remember two concepts (constructor, instance): person1 and person2 are both instances of the constructor Person A formula: The constructor attribute (constructor) of the instance points to the constructor.

3. Prototype object

In JavaScript, whenever an object (function is also an object) is defined, the object will Contains some predefined properties. Each function object has a prototype attribute, which points to the prototype object of the function. (No matter what is used first, __proto__ will be analyzed in detail in the second lesson)

 function Person() {}
 Person.prototype.name = 'Zaxlct';
 Person.prototype.age  = 28;
 Person.prototype.job  = 'Software Engineer';
 Person.prototype.sayName = function() {
   alert(this.name);
 }   
 var person1 = new Person();
 person1.sayName(); // 'Zaxlct' 
 var person2 = new Person();
 person2.sayName(); // 'Zaxlct' 
 console.log(person1.sayName == person2.sayName); //true

We got the first "law## in this article #》：

 每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性

So what is prototype object? If we change the above example, you will understand:

Person.prototype = {
    name:  'Zaxlct',
    age: 28,
    job: 'Software Engineer',
    sayName: function() {
      alert(this.name);
    }
 }

The prototype object, as the name suggests, is an ordinary object (nonsense = =!). From now on you have to remember that the prototype object is Person.prototype. If you are still afraid of it, think of it as the letter A: var A = Person.prototype

Above we added four attributes to A: name, age, job, sayName. In fact, it also has a default attribute: constructor

By default, all prototype objects will Automatically obtain a constructor (constructor) attribute, which (is a pointer) points to the function where the prototype attribute is located (Person)

constructor Attribute, this attribute is a pointer pointing to Person. That is: Person.prototype.constructor == Person

instance The function attribute (constructor) points to the constructor : person1.constructor == Person

 person1.constructor == Person
 Person.prototype.constructor == Person

Why does Person.prototype have a constructor attribute? ? Likewise, Person.prototype (think of it as A) is also an instance of Person. That is, when Person is created, an instance object is created and assigned to its prototype. The basic process is as follows:

var A = new Person();
Person.prototype = A; // 注：上面两行代码只是帮助理解，并不能正常运行

结论：原型对象（Person.prototype）是 构造函数（Person）的一个实例。

原型对象其实就是普通对象（但 Function.prototype 除外，它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有prototype属性））。看下面的例子：

  function Person(){};
  console.log(Person.prototype) //Person{}
  console.log(typeof Person.prototype) //Object
  console.log(typeof Function.prototype) // Function，这个特殊
  console.log(typeof Object.prototype) // Object
  console.log(typeof Function.prototype.prototype) //undefined

Function.prototype 为什么是函数对象呢？

  var A = new Function ();
  Function.prototype = A;

上文提到凡是通过 new Function( ) 产生的对象都是函数对象。因为 A 是函数对象，所以Function.prototype 是函数对象。

那原型对象是用来做什么的呢？主要作用是用于继承。举个例子：

var Person = function(name){
     this.name = name; // tip: 当函数执行时这个 this 指的是谁？
   };
   Person.prototype.getName = function(){
     return this.name;  // tip: 当函数执行时这个 this 指的是谁？
   }
   var person1 = new person('Mick');
   person1.getName(); //Mick

从这个例子可以看出，通过给 Person.prototype 设置了一个函数对象的属性，那有 Person 的实例（person1）出来的普通对象就继承了这个属性。具体是怎么实现的继承，就要讲到下面的原型链了。

小问题，上面两个 this 都指向谁？

 var person1 = new person('Mick');
 person1.name = 'Mick'; // 此时 person1 已经有 name 这个属性了
 person1.getName(); //Mick

故两次 this 在函数执行时都指向 person1。

推荐教程：《JS教程》

The above is the detailed content of The most detailed explanation of JS prototype and prototype chain. For more information, please follow other related articles on the PHP Chinese website!