js chaîne de prototypes et analyse d'héritage (première expérience)_compétences javascript

Définissez d'abord un objet obj. Le prototype de l'objet est obj._proto_ Nous pouvons utiliser la méthode getPrototypeOf dans ES5 pour interroger le prototype de obj. Nous déterminons si le prototype de obj est égal à Object.prototype. . Prouvez s'il existe un prototype d'obj. La réponse renvoie vrai, donc elle existe. Ensuite, nous définissons une fonction foo(). Toute fonction a son objet prototype, c'est-à-dire le prototype de la fonction. Nous pouvons ajouter n'importe quel attribut au prototype de la fonction, puis un objet instancié peut partager ses attributs via new (ci-dessous). ) Deux exemples seront présentés en détail).

function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x=1;
obj.y=2;
obj.x //1
obj.y //2
obj.z //3
typeof obj.toString; //function
obj.valueOf(); // foo {x: 1, y: 2, z: 3}
obj.hasOwnProperty('z'); //false

Ici, le prototype de obj (_proto_) pointe vers l'attribut prototype de la fonction foo, le prototype de foo.prototype pointe vers Object.prototype et la fin de la chaîne de prototypes est nulle. Utilisez hasOwnProperty pour. vérifiez si l'attribut z est sur obj , il affiche false, alors il n'y a pas d'attribut z sur obj, mais en recherchant sa chaîne de prototypes, on constate qu'il est sur foo.prototype, donc obj.z=3, et pour le premier exemple, obj.valueOf() et toString sont tous deux Object .prototype, donc tout objet a ces deux attributs, car le prototype de tout objet est Object.prototype Bien sûr, sauf dans le cas particulier suivant, <. 🎜>

<span>var</span> obj2 = Object.create(<span>null</span><span>);obj2.valueOf(); </span><span>//</span><span>undefined</span>

//声明一个构造函数Person
function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.hi = function (){
  console.log('Hi,my name is ' + this.name +',my age is '+this.age);
};
Person.prototype.LEGS_NUM=2;
Person.prototype.ARMS_NUM=2;
Person.prototype.walk = function (){
  console.log(this.name+' is walking !');
};
function Student(name,age,classNum){
  Person.call(this,name,age);
  this.classNum = classNum;
}
//创建一个空对象
Student.prototype = Object.create(Person.prototype);
//constructor指定创建一个对象的函数。
Student.prototype.constructor = Student;
Student.prototype.hi = function (){
  console.log('Hi,my name is ' + this.name +',my age is '+this.age+' and my class is '+this.classNum);
};
Student.prototype.learns = function (sub){
  console.log(this.name+' is learning '+sub);
};
//实例化一个对象Bosn
var Bosn = new Student('bosn',27,'Class 3');
Bosn.hi(); //Hi,my name is bosn,my age is 27 and my class is Class 3
Bosn.LEGS_NUM; //2
Bosn.walk(); //bosn is walking !
Bosn.learns('Math'); //bosn is learning Math

Le this du constructeur Person et Student pointe vers l'objet instancié (Bosn), et le prototype de cet objet pointe vers le prototype du constructeur.

Nous utilisons la méthode Object.create() pour créer un objet vide. Le prototype de cet objet est Person.prototype. L'avantage d'écrire de cette façon est que nous pouvons créer nous-mêmes Studnet sans affecter le Person.prototype. propriété. N'importe quel attribut de .prototype et peut hériter des attributs d'origine de Person.prototype, car la sous-classe Student hérite de la classe de base Person. Si vous écrivez directement Person.prototype = Student.prototype, alors ils pointent tous les deux vers le même objet. Lors de l'ajout d'attributs à Student.prototype, les mêmes attributs seront ajoutés à la chaîne de prototypes de Person.

Pour la méthode d'appel dans le constructeur Student, cet intérieur pointe vers l'objet instancié du Student nouvellement créé, et l'héritage est implémenté via l'appel.

Student.prototype.constructor = Student, le sens de cette phrase est de spécifier Student comme la fonction qui crée l'objet Student.prototype Si cette phrase n'est pas écrite, la fonction de l'objet est toujours Personne.

Pour l'héritage, il existe trois façons de le mettre en œuvre,

function Person(name,age){
  this.name = name;
  this.age = age;
}
function Student(){

}
Student.prototype = Person.prototype; //1
Student.prototype = Object.create(Person.prototype); //2
Student.prototype = new Person(); //3