JavaScript のファクトリー関数とコンストラクターに関する簡単な説明-jsチュートリアル-php.cn

JavaScript のファクトリー関数とコンストラクターに関する簡単な説明

JavaScript 言語を他のプログラミング言語と比較すると、いくつか混乱を招くことがあるかもしれません。その 1 つはファクトリ関数とコンストラクターです。

ファクトリ関数

いわゆる ファクトリ関数は、これらの組み込み関数がクラスオブジェクトであることを意味します。 , 「実際にクラスのインスタンスが作成される」ということは、この関数を呼び出すと、実際にそのクラスを使ってオブジェクトを作成し、そのオブジェクトを返すという意味です。JavaScript自体は厳密なオブジェクト指向言語ではないので（クラスを含まない）、 , 実際には、JavaScript には厳密な「ファクトリー関数」はありませんが、JavaScript では関数を使用してクラスをシミュレートできます。次の例を見てみましょう:

function person(firstName, lastName, age) {
  const person = {};
  person.firstName = firstName;
  person.lastName = lastName;
  person.age = age;
  return person;
}

ログイン後にコピー

上記のコードは、新しいオブジェクトを作成し、それを渡しますパラメータはプロパティとしてオブジェクトに付加され、新しいオブジェクトが返されます。これは単純な JavaScript ファクトリ関数です。

#実際、ファクトリ関数も理解しやすいです:

これは関数です。
オブジェクトを作成するために使用されます。
これは、ファクトリー、「生産」関数はすべて「標準部品」 (同じ属性を持つ)

#Constructor

他の主流のプログラミング言語とは異なります, JavaScript コンストラクターは、クラスの特定のメソッドとしては存在しません。通常の関数を使用してオブジェクトのクラスを作成する場合、それはコンストラクター、またはコンストラクターと呼ばれます。関数が真のコンストラクターであるためには、次の条件が必要です。条件:

関数内で新しいオブジェクト (this) のプロパティを設定します。通常はプロパティとメソッドを追加します。
コンストラクターには return ステートメントを含めることができます (推奨されません) が、戻り値はこれ、または他の非オブジェクト型の値である必要があります。 object

new

を使用できますが、次のような疑問が生じるかもしれません。 new キーワードをファクトリ関数で使用しますか?

ファクトリとコンストラクターで new キーワードを使用するとどうなりますか?

わかりました。上記の質問に対する答えを見つける前に、ここで何が起こっているのかを理解するために簡単な演習を行ってみましょう。
new キーワードを使用して、ファクトリとコンストラクター関数の両方を使用して 2 つのオブジェクトを作成し、その 2 つのオブジェクトをコンソールに出力します。 function

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

ログイン後にコピー

上で見たように、ここで

__proto__ はプロトタイプオブジェクトへのポインタです。これが何であるかを調べてみましょう。プロトタイプオブジェクト。上記の mike

オブジェクトが指すプロトタイプオブジェクトを見つけるために、簡単な

=== 等価性チェックを実行してみましょう。

JavaScript のファクトリー関数とコンストラクターに関する簡単な説明

興味深いことに、これは

Object.prototype を指しています。さて、コンストラクターを使って同じ実験をしてみましょう。 JavaScript のプロトタイプを理解する

プロトタイプを理解する前に、次の知識を覚えておく必要があります:

JavaScript のファクトリー関数とコンストラクターに関する簡単な説明

すべての参照型 (配列) 、オブジェクト、関数）はすべてオブジェクト特性を持ち、属性を自由に拡張できます（null を除く）

すべての参照型 (配列、オブジェクト、関数) には __proto__ 属性があり、属性値は通常のオブジェクトです

すべての関数にはプロトタイプ属性があり、その属性値も通常のオブジェクトです。

すべての参照型 (配列、オブジェクト、関数) について、proto 属性値はそれを指します。プロトタイプ属性コンストラクターの値

コードを通じて説明します:

function person(firstName, lastName, age){
  const person = {}
  person.firstName = firstName;
  person.lastName = lastName;
  person.age = age;
  return person;
}

const mike = new person('mike', 'grand', 23);

ログイン後にコピー

コンストラクターの使用
注: JavaScript では、これらの構成要素は関数です。オブジェクトの作成に使用されるため、
コンストラクター

// 要点一：自由扩展属性
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}
fn.a = 100;

// 要点二：__proto__
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

// 要点三：函数有 prototype
console.log(fn.prototype)

// 要点四：引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值
console.log(obj.__proto__ === Object.prototype)

ログイン後にコピー

最初の層の

proto を展開すると、その中に別の proto

があり、それを再度展開します。。

次に、プロトタイプオブジェクトが上記のようになっているかどうかを確認してみましょう。 JavaScript のファクトリー関数とコンストラクターに関する簡単な説明

<p>他们是不同的。当我们使用工厂函数创建对象时，它的<code>__proto__指向Object.prototype，而当从构造函数创建对象时，它指向它的构造函数原型对象。那么这里发生了什么？

new 背后所做的事

当我们在创建对象时使用带有构造函数的new关键字时，new 背后所做的事不多。

new 运算符创建一个用户自定义的对象类型的实例或具有构造函数的内置对象的实例。 new 关键字会进行如下操作：

创建一个空的简单 JavaScript 对象 (即 {})
链接该对象(即设置该对象的构造函数)到另一个对象
将步骤1新创建的对象作为 this 的上下文
如果该函数没有返回对象，则返回 this

注释行是伪代码，表示在 new 关键字，JS 背后帮我们做的事情。

function Person(firstName, lastName, age) {
    // this = {};
    // this.__proto__ = Person.prototype;

    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    
    // return this;
}

ログイン後にコピー

另外，让我们看看如果将上面的隐式代码添加到工厂函数中会发生什么。

function person(firstName, lastName, age) {
    // this = {};
    // this.__proto__ = Person.prototype; 
 
  
    const person = {};
    person.firstName = firstName;
    person.lastName = lastName;
    person.age = age;
    return person;
    
    // return this;
}

ログイン後にコピー

即使使用new关键字调用时将隐式代码添加到工厂函数中，也不会对结果产生任何影响。这是因为，由于我们没有在函数中使用 this 关键字，而且我们显式地返回了一个除this之外的自定义对象，因此没有必要使用隐式代码。无论我们是否对工厂函数使用new关键字，对输出都没有影响。

如果忘记了 new 关键字怎么办

JavaScript 中有许多概念，有时难以掌握。 new 操作符就是其中之一。如果你不能正确理解它，那么在运行 JavaScript 应用程序时会产生令人讨厌的后果。在像 Java这样的语言中，严格限制了如何使用 new 关键字。但是在 javascript 中，并不是那么严格，如果你不能正确理解它们可能会导致很多问题。

在 JavaScript 中：

可以对任何函数使用 new 运算符
可以使用或不使用 new 关键字将函数作为构造函数调用

让我们看看上面的例子，使用和不使用 new 关键情况

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}
const mike = new Person(&#39;mike&#39;, &#39;grand&#39;, 23);
const bob = Person(&#39;bob&#39;, &#39;grand&#39;, 23);

ログイン後にコピー

然后，如果查看创建的对象实例，你希望看到什么？

JavaScript のファクトリー関数とコンストラクターに関する簡単な説明