Résumé des points de connaissances JavaScript importants 1

Cet article présente principalement l'essence du JavaScript orienté objet (Partie 2), les amis qui en ont besoin peuvent s'y référer

Constructeur et objet prototype

Constructeur est également Function, la fonction appelée lors de l'utilisation de new pour créer un objet, une différence par rapport aux fonctions ordinaires est que sa première lettre doit être en majuscule. Mais si le constructeur est appelé comme une fonction ordinaire (il manque le nouveau mot-clé), vous devez faire attention au problème signalé par ceci.

var name = "Pomy";
function Per(){
  console.log("Hello "+this.name);
}
var per1 = new Per(); //"Hello undefined"
var per2 = Per();  //"Hello Pomy"

Lors de l'utilisation de new, cet objet sera automatiquement créé, son type est le type constructeur, pointant vers l'instance de l'objet sans le nouveau mot-clé, cela pointe vers ; l'objet global.

Vous pouvez utiliser instanceof pour détecter le type d'objet. En même temps, chaque objet a automatiquement un attribut constructeur lors de sa création, pointant vers son constructeur (objet créé sous forme littérale ou constructeur d'objet, pointant vers Objet). , constructeur personnalisé L'objet créé par la fonction pointe vers son constructeur).

console.log(per1 instanceof Per); //true
console.log(per1.constructor === Per); //true

Chaque instance d'objet possède une propriété interne : [[Prototype]], qui pointe vers l'objet prototype de l'objet. Le constructeur lui-même possède également un attribut prototype pointant vers l'objet prototype. Tous les objets créés partagent les propriétés et méthodes de cet objet prototype.

function Person(){}
Person.prototype.name="dwqs";
Person.prototype.age=20;
Person.prototype.sayName=function()
{
  alert(this.name);
};
var per1 = new Person();
per1.sayName(); //dwqs
var per2 = new Person();
per2.sayName(); //dwqs
alert(per1.sayName == per2.sayName); //true

Ainsi, le pointeur dans l'instance pointe uniquement vers le prototype et non vers le constructeur. ES5 fournit les méthodes hasOwnProperty() et isPropertyOf() pour refléter la relation entre l'objet prototype et l'instance

alert(Person.prototype.isPrototypeOf(per2)); //true
per1.blog = "www.ido321.com";
alert(per1.hasOwnProperty("blog")); //true
alert(Person.prototype.hasOwnProperty("blog")); //false
alert(per1.hasOwnProperty("name")); //false
alert(Person.prototype.hasOwnProperty("name")); //true

car la propriété constructeur de l'objet prototype pointe vers le constructeur lui-même, donc lors de la réécriture du prototype, vous devez faire attention au problème de pointage de l'attribut constructeur.

function Hello(name){
  this.name = name;
}
//重写原型
Hello.prototype = {
  sayHi:function(){
    console.log(this.name);
  }
};
var hi = new Hello("Pomy");
console.log(hi instanceof Hello); //true
console.log(hi.constructor === Hello); //false
console.log(hi.constructor === Object); //true

La réécriture de l'objet prototype en utilisant la forme littérale de l'objet modifie les propriétés du constructeur, de sorte que le constructeur pointe vers l'objet, pas vers Hello. Si le pointeur constructeur est important, vous devez réinitialiser manuellement sa propriété constructeur lors de la réécriture de l'objet prototype

Hello.prototype = {
  constructor:Hello,
  sayHi:function(){
    console.log(this.name);
  }
};
console.log(hi.constructor === Hello); //true
console.log(hi.constructor === Object); //false

En utilisant les caractéristiques de l'objet prototype, nous pouvons facilement utiliser en JavaScript Ajoutez des méthodes personnalisées sur l'objet prototype intégré :

Array.prototype.sum=function(){
  return this.reduce(function(prev,cur){
    return prev+cur;
  });
};
var num = [1,2,3,4,5,6];
var res = num.sum();
console.log(res); //21
String.prototype.capit = function(){
  return this.charAt(0).toUpperCase()+this.substring(1);
};
var msg = "hello world";
console.log(msg.capit()); //"Hello World"

Héritez

à l'aide du [[Prototype ]], l'héritage prototype peut être implémenté ; pour les objets sous forme de littéraux, Object.prototype sera implicitement spécifié comme [[Prototype]], ou il peut être spécifié explicitement via Object.create(), qui accepte deux paramètres : le premier est [[ Prototype]] pointe vers l'objet (objet prototype), le second est un objet descripteur d'attribut facultatif.

var book = {
  title:"这是书名";
};
//和下面的方式一样
var book = Object.create(Object.prototype,{
  title:{
    configurable:true,
    enumerable:true,
    value:"这是书名",
    wratable:true
  }
});

Les objets littéraux hériteront de Object par défaut. Une utilisation plus intéressante consiste à implémenter l'héritage entre des objets personnalisés.

var book1 = {
  title:"JS高级程序设计",
  getTitle:function(){
    console.log(this.title);
  }
};
var book2 = Object.create(book1,{
  title:{
    configurable:true,
    enumerable:true,
    value:"JS权威指南",
    wratable:true
  }
});
book1.getTitle(); //"JS高级程序设计"
book2.getTitle(); //"JS权威指南"
console.log(book1.hasOwnProperty("getTitle")); //true
console.log(book1.isPrototypeOf("book2")); //false
console.log(book2.hasOwnProperty("getTitle")); //false

Lors de l'accès à l'attribut getTitle de book2, le moteur JavaScript effectuera un processus de recherche : recherchez maintenant les propres attributs de book2 et utilisez-les s'ils sont trouvés. S'il n'est pas trouvé, recherchez [[Prototype]]. S'il n'est pas trouvé, continuez à rechercher le [[Prototype]] de l'objet prototype jusqu'à la fin de la chaîne d'héritage. La fin est généralement Object.prototype, avec [[Prototype]] défini sur null.

Une autre façon d'implémenter l'héritage consiste à utiliser des constructeurs. Chaque fonction possède un attribut de prototype inscriptible, qui est automatiquement défini pour hériter de Object.prototype par défaut. Vous pouvez modifier la chaîne de prototypes en l'écrasant.

function Rect(length,width){
  this.length = length;
  this.width = width;
}
Rect.prototype.getArea = function(){
  return this.width * this.length;
};
Rect.prototype.toString = function(){
  return "[Rect"+this.length+"*"+this.width+"]";
};
function Square(size){
  this.length = size;
  this.width = size;
}
//修改prototype属性
Square.prototype = new Rect();
Square.prototype.constructor = Square;
Square.prototype.toString = function(){
  return "[Square"+this.length+"*"+this.width+"]";
};
var rect = new Rect(5,10);
var square = new Square(6);
console.log(rect.getArea()); //50
console.log(square.getArea()); //36

Si vous souhaitez accéder au toString() de la classe parent, vous pouvez faire ceci :

Square.prototype.toString = function(){
  var text = Rect.prototype.toString.call(this);
  return text.replace("Rect","Square");
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!