Maison > interface Web > js tutoriel > Explication détaillée de l'exemple de code du constructeur Scope Safe en JavaScript

Explication détaillée de l'exemple de code du constructeur Scope Safe en JavaScript

伊谢尔伦
Libérer: 2017-07-20 10:27:55
original
1053 Les gens l'ont consulté

Constructeur sans portée

Le constructeur est en fait une fonction appelée à l'aide de l'opérateur new


function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
}
var person=new Person('match',28,'Software Engineer');
console.log(person.name);//match
Copier après la connexion

Si l'opérateur new n'est pas utilisé, les trois attributs initialement ciblés sur l'objet Person sont ajoutés à l'objet window


function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
}     
var person=Person('match',28,'Software Engineer');
console.log(person);//undefined
console.log(window.name);//match
Copier après la connexion

L'attribut name de window est utilisé pour identifier En liant la cible et le cadre, l'écrasement accidentel de cette propriété ici peut provoquer d'autres erreurs sur la page. La solution à ce problème est de créer un constructeur sécurisé


function Person(name,age,job){
  if(this instanceof Person){
    this.name=name;
    this.age=age;
    this.job=job;
  }else{
    return new Person(name,age,job);
  }
}
var person=Person('match',28,'Software Engineer');
console.log(window.name); // ""
console.log(person.name); //'match'
var person= new Person('match',28,'Software Engineer');
console.log(window.name); // ""
console.log(person.name); //'match'
Copier après la connexion
.

Cependant, l'héritage du modèle de vol du constructeur entraînera des effets secondaires. En effet, dans le code suivant, cet objet n'est pas une instance d'objet Polygon, donc le constructeur Polygon() créera et renverra une nouvelle instance


function Polygon(sides){
  if(this instanceof Polygon){
    this.sides=sides;
    this.getArea=function(){
      return 0;
    }
  }else{
    return new Polygon(sides);
  }
}
function Rectangle(wifth,height){
  Polygon.call(this,2);
  this.width=this.width;
  this.height=height;
  this.getArea=function(){
    return this.width * this.height;
  };
}
var rect= new Rectangle(5,10);
console.log(rect.sides); //undefined
Copier après la connexion

Si vous souhaitez utiliser le modèle de vol de constructeur à portée sécurisée, vous devez combiner l'héritage de la chaîne de prototype et réécrire l'attribut prototype de Rectangle afin que son instance devienne également une instance de Polygon


function Polygon(sides){
  if(this instanceof Polygon){
    this.sides=sides;
    this.getArea=function(){
      return 0;
    }
  }else{
    return new Polygon(sides);
  }
}
function Rectangle(wifth,height){
  Polygon.call(this,2);
  this.width=this.width;
  this.height=height;
  this.getArea=function(){
    return this.width * this.height;
  };
}
Rectangle.prototype= new Polygon();
var rect= new Rectangle(5,10);
console.log(rect.sides); //2
Copier après la connexion

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!

É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