Explication détaillée de l'exemple de code du constructeur Scope Safe en JavaScript-js tutoriel-php.cn

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

伊谢尔伦

Libérer： 2017-07-20 10:27:55

original

1047 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(&#39;match&#39;,28,&#39;Software Engineer&#39;);
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(&#39;match&#39;,28,&#39;Software Engineer&#39;);
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(&#39;match&#39;,28,&#39;Software Engineer&#39;);
console.log(window.name); // ""
console.log(person.name); //&#39;match&#39;
var person= new Person(&#39;match&#39;,28,&#39;Software Engineer&#39;);
console.log(window.name); // ""
console.log(person.name); //&#39;match&#39;

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!