JavaScript コンストラクターの詳細な説明

この記事では、JavaScript コンストラクターについて詳しく説明します。必要な方は参考にしていただければ幸いです。

今日は JavaScript コンストラクターについて話し合う予定です。予定通りお越しいただきありがとうございます。

昨日コンストラクター関数コンストラクターについて話し合って結論が出ました。

constructor はプロトタイプ オブジェクトの属性で、デフォルトでこのプロトタイプのコンストラクターを指します。

この結論は、私たちの場合に非常に役立つと思われます。毎日の作業では役に立たないので、コンストラクターは本当に役に立たないのでしょうか？

コンストラクターを使用して再利用可能なオブジェクトを構築する

JS の関数は、コンストラクターにすることも、通常の関数として呼び出すこともできます。 new を使用してオブジェクトを作成する場合、対応する関数がコンストラクターとして呼び出されます。オブジェクトを介した場合、それは通常の機能です。

私たちの日常業務では、オブジェクトを作成する必要があることがよくありますが、主にオブジェクトの直接量を使用して直接作成します。たとえば、コードは次のとおりです。

var person = {
    name:'postbird',
    address:'earth',
    sayHello:function(){console.log('Hello,I am ' + this.name);}
};

単一のオブジェクトの場合、オブジェクトのプロパティとメソッドは基本的に変更されませんが、オブジェクトに多数のインスタンスがある場合、または継承やコンストラクター パラメーターの受け渡しが含まれる場合は、コードのコメントに注意してください。 # #

//创建了一个构造函数
function Person(name,address){
    this.name = name;
    this.address = address;
}
//为构造函数的原型对象添加一个方法sayHello
Person.prototype.sayHello = function(){
    console.log('Hi I am ' + this.name);
}
//通过构造函数Person实例化一个p1，并传参
var p1 = new Person('postbird','earth');
//通过构造函数Person实例化一个p2，并传参
var p2 = new Person('ptbird','month');
console.log(p1);//{name: "postbird", address: "earth"}
console.log(p2);//{name: "ptbird", address: "month"}
// p1和p2 继承了Person的sayHello方法
p1.sayHello()//Hi I am ptbird
p2.sayHello()//Hi I am postbird

上記のコードを辛抱強く試してください。こうすることでスケーラビリティが向上します。N 個のインスタンスを作成してコードの再利用を実現できます。

古典的なケース

js のコンストラクター構造について関数、非常に古典的なデモがあります

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //true
var one = new father(25);
console.log(one.constructor===Father) // true

このコード行に注目してください

Father.prototype.constructor = Father;//修正

なぜ修正する必要があるのでしょうか?

constructor がプロトタイプ オブジェクトの属性であるというわけではありません。デフォルトでこのプロトタイプのコンストラクターを指します。 ? このコード行をコメントアウトしましょう。

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
//Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //false
var one = new Father(25);
console.log(one.constructor===Person) // true

私はそうします。賢いあなたは、すでにわかっていると思います。問題が

Father.prototype = new Person('Beijin');

の場合、プロトタイプは新しいオブジェクトを指し、この新しいオブジェクトのコンストラクターは person を指します。

console.log((new Person('Beijin')).__proto__ === Person.prototype) //true

new Person('Beijin') オブジェクトにはプロトタイプがないことを前述しましたが、関数のみがプロトタイプを持ち、Father.prototype.constructor は new Person('Beijin') のプロトタイプ チェーンに従います。以下のコンストラクターを検索します。 new Person('Beijin') にコンストラクターがない場合は、その __proto__ に移動してコンストラクターを見つけます。 Person.prototype と Person.prototype.constructor == function Person()、つまり、var one = new Father(25), one.constructor = の場合は、Father.prototype.constructor == Person.prototype.constructor //function Person() Father.prototype.constructor なので、 one.constructor は関数 Person() を指しているため、これを修正する必要があります。そうしないと、プロトタイプ チェーンが台無しになります。

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