Detailed explanation of JS prototype and prototype chain (1)

This time I will give you a detailed explanation of JS prototype and prototype chain as well as what to pay attention to. The following is a practical case, let’s take a look.

1. Ordinary objects and function objects

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

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 tell the difference 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');

In the above example, person1 and person2 are both instances of Person. . Both instances have a constructor property, which is a pointer to Person. That is:

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

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

3. Prototype Object

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

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" of this article:

Every object has the __proto__ attribute , but only function objects have the prototype attribute

So what is a prototype object?
We will change the above example and 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 gave A Four attributes are added: 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)

The above sentence is a bit confusing, let's "translate" it: A has a default constructor attribute, which is a pointer pointing to Person. That is:

Person.prototype.constructor == Person

In the second section "Constructor" above, we know that the constructor attribute (constructor) of the instance points to the constructor: person1.constructor == Person

This The two "formulas" seem to be somewhat related:

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

person1 Why does it have a constructor attribute? That's because person1 is an instance of 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 of it is created and assigned to its prototype. The basic process is as follows:

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

Conclusion: The prototype object (Person.prototype) is an instance of the constructor (Person).

Prototype objects are actually ordinary objects (except Function.prototype, which is a function object, but it is very special. It has no prototype attribute (as mentioned earlier, function objects all have prototype attributes)). Look at the following example:

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 Why is it a function object?

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

As mentioned above, all objects generated by new Function() are function objects. Because A is a function object, Function.prototype is a function object.

What is the prototype object used for? Mainly used for inheritance. For example:

 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

It can be seen from this example that by setting a property of a function object to Person.prototype, the ordinary object that comes out of the Person instance (person1) inherits this property. How to implement inheritance specifically depends on the prototype chain below.

Little question, who do the two thiss above point to?

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

So both this points to person1 when the function is executed.

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