JavaScript でのスコープ セーフ コンストラクターのサンプル コードの詳細な説明

スコープセーフなコンストラクター

コンストラクターは、実際には 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

new 演算子が使用されない場合、もともと Person オブジェクトを対象としていた 3 つのプロパティが 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

window の name 属性は、リンク ターゲットとフレームを識別するために使用されます。この属性を誤って上書きすると、ページ上で他のエラーが発生する可能性があります。この問題の解決策は、スコープ セーフなコンストラクターを作成することです。

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'

ただし、コンストラクター盗用パターンの継承には副作用が伴います。これは、次のコードでは、このオブジェクトは Polygon オブジェクトのインスタンスではないため、コンストラクター 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;
  };
}
var rect= new Rectangle(5,10);
console.log(rect.sides); //undefined

スコープセーフなコンストラクター盗用パターンを使用したい場合プロトタイプチェーンの継承と組み合わせて、そのインスタンスが Polygon のインスタンスになるように Rectangle のプロトタイプ属性を書き換える必要があります

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

以上がJavaScript でのスコープ セーフ コンストラクターのサンプル コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。