Detailed analysis of JavaScript prototypes and prototype chains

JavaScriptThere is no concept of classes, but almost everything is based on objects, and inheritance can also be achieved. This is js The biggest difference from other OOP languages ​​is that this is also the most difficult part of js to understand. Let me talk about my personal understanding below.

Let’s start with creating an object. Generally, there are the following methods:

1. Create an Object instance and then add it to it Properties and methods.

var person() = new Object();
person.name = 'mikej';
person.sayName = function(){
  alert(this.name);
}

2. You can also write like this:

var parson = {
  name : 'mikej',
  sayName : function(){
    alert(this.name);
  }
}

3. These two methods of creating objects are very simple, but both have flaws. When using the same mode to create objects, a large number of Duplicate code. So there is Factory Pattern:

function createPerson(name){
  var p = new Object();
  p.name=name;
  p.sayName = function(){
    alert(this.name);
  };
  return p;
}
var p1 = createPerson('mikej');
var p2 = createPerson('tom');

This way you can create unlimited objects.

4. There is another method, which is similar to the factory mode, called ConstructorMode:

function Person(name){
  this.name=name
  this.sayName = function(){
   alert(this.name);
  }
  this.say = function(){
    alert('hi');
  }
}
var p1 = new Person('mikej');
var p2 = new Person('tom');

There are several things worth paying attention to here: no displayed created objects . The function name Person uses the capital letter P (this is required). Both p1 and p2 have a constructor attribute pointing to Person. At the same time, p1 and p2 are both instances of Object and instances of Person.

alert(p1.constructor == Person); //true
alert(p1 instanceof Object); //true
alert(p1 instanceof Person); //true

//5.11Update: From a phper perspective, it was easy to think of the process of creating objects like this. Person is a "class", and then use new Person('mikej')instantiates this class and passes in parameters. But this is not actually the case. The creation process should be like this: First, create an empty object, and then use the apply method. The first parameter is the empty object, and the second parameter is the context parameter, so that this in Person It will point to this object, which is p1.

var p1 = new Person('mikej');
//上面代码就相当于
var p1 = {};
Person.apply(p1, ['mikej']);

The constructor pattern looks good, but one of its drawbacks is that it wastes memory. Continue with the example

alert(p1.say == p2.say) //false

. In order to avoid this defect, use Prototype pattern To create an object, each object in js has a Detailed analysis of JavaScript prototypes and prototype chains attribute that points to another object. All properties and methods of this object will be inherited by the instance of the constructor and are shared. This means that we can put those Immutable properties and methods are defined on the Detailed analysis of JavaScript prototypes and prototype chains object.

function Person(name){
  this.name = name;
}
//Person的原型对象
Person.Detailed analysis of JavaScript prototypes and prototype chains = {
  say: function(){
    alert('hi');
  },
  sayName: function(){
    alert(this.name);
  }
};
var p1 = new Person("mikej");
var p2 = new Person("tom");
p1.sayName();
p2.sayName();
//下面就可以看出方法实现了共享
alert(P1.say == P2.say) //true
alert(P1.sayName == P2.sayName) //true

Let’s expand the above example and use Detailed analysis of JavaScript prototypes and prototype chainss to implement inheritance.

function Person(name){
  this.name = name;
}

Person.Detailed analysis of JavaScript prototypes and prototype chains = {
  say: function(){
    alert('hi');
  },
  sayName: function(){
    alert(this.name);
  }
};

function Programmer(){
  this.say = function(){
    alert('im Programmer, my name is ' + this.name);
  }
}

Programmer.Detailed analysis of JavaScript prototypes and prototype chains = new Person('mikej');
//手动修正构造函数
Programmer.Detailed analysis of JavaScript prototypes and prototype chains.constructor = Programmer;
var p1 = new Programmer();

console.dir(Programmer.Detailed analysis of JavaScript prototypes and prototype chains.constructor);//Programmer
console.dir(p1.constructor);//Programmer
console.dir(p1);

Programmer’s Detailed analysis of JavaScript prototypes and prototype chains points to an instance of Person, then all Programmer instances can inherit Person and Person’s Detailed analysis of JavaScript prototypes and prototype chains.

There will be a problem here.

The default Detailed analysis of JavaScript prototypes and prototype chains object has a constructor attribute pointing to its constructor. Each instance also has a constructor attribute, which will call the constructor attribute of the Detailed analysis of JavaScript prototypes and prototype chains object by default.

Assume there is no Programmer.Detailed analysis of JavaScript prototypes and prototype chains = new Person('mikej');

Programmer.Detailed analysis of JavaScript prototypes and prototype chains.constructor points to Programmer. The construction of p1 also points to Programmer

alert(Programmer.Detailed analysis of JavaScript prototypes and prototype chains.constructor == Programmer) //true
alert(p1.constructor == Programmer) //true

But with this sentenceProgrammer.Detailed analysis of JavaScript prototypes and prototype chains = new Person('mikej');After that,

Programmer.Detailed analysis of JavaScript prototypes and prototype chains.constructor Points to Object, which is the construction of the object pointed to by Person.Detailed analysis of JavaScript prototypes and prototype chains. p1.constructor also points to Object. But p1 is obviously generated by the constructor Programmer, which causes inheritance confusion, so we must manually correct the constructor, which is the code below.

Programmer.Detailed analysis of JavaScript prototypes and prototype chains.constructor = Programmer;

Okay, now let’s take a look at the Detailed analysis of JavaScript prototypes and prototype chains chain:

console.dir(p1);

The result of this code is

It can be seen that, p1 is an instance of Programmer. The Detailed analysis of JavaScript prototypes and prototype chains of Programmer is Person, and the Detailed analysis of JavaScript prototypes and prototype chains of Person is Object. On the Internet, it is a JS object. This is the Detailed analysis of JavaScript prototypes and prototype chains chain, that is to say, JavaScript inheritance is implemented based on the Detailed analysis of JavaScript prototypes and prototype chains chain.

The above is the detailed content of Detailed analysis of JavaScript prototypes and prototype chains. For more information, please follow other related articles on the PHP Chinese website!