Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 09:00:25
original
2409 Les gens l'ont consulté

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
Copier après la connexion

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>
Copier après la connexion
Object.create() crée un objet vide, et le prototype de cet objet pointe vers le paramètre. L'exemple complet suivant vous montre comment implémenter une classe pour hériter d'une autre classe

//声明一个构造函数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
Copier après la connexion

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
Copier après la connexion
La chaîne de prototypes js ci-dessus et l'analyse de l'héritage (première expérience) sont tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!