ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptのnew演算子の詳しい解説

JavaScriptのnew演算子の詳しい解説

小云云
小云云オリジナル
2018-02-07 14:43:241608ブラウズ

JavaScript でオブジェクトをインスタンス化するとき、一般的な方法は new 演算子を使用することです。 この記事では主に JavaScript の new 演算子の詳細な説明を共有し、皆様のお役に立てれば幸いです。

var Foo = function(x, y) {    this.x = x    this.y = y
}var foo = new Foo(1, 2) // Foo {x: 1, y: 2}

それで、新しいオペレーターは具体的に何をするのですか? foo がどのようなオブジェクトであるかを見てみましょう。

まず、foo 自体はオブジェクトであり、x と y という 2 つの属性を持ちます。同時に、ほとんどのブラウザーのコンソールには、__proto__ という少し軽い属性も表示されます。これには、constructor と __proto__ という 2 つの属性があります。

__proto__ はアクセサー プロパティです。現在のオブジェクト自体の [[Prototype]] を指します。この [[Prototype]] は、コンストラクター Foo のプロトタイプ オブジェクト Foo.prototype を表す単なるシンボルです。 MDN の説明。

foo.__proto__ === Foo.prototype // true
e 我们 なので、一般的には

var Foo = function(x, y) {    this.x = x    this.y = y
}// 1. 创建一个空对象var foo = {}// 2. 调用构造函数,并且将构造函数的`this`指向fooFoo.call(foo, 1, 2)// 3. foo继承Foo的原型对象foo.__proto__ = Foo.prototype
E などと記述しますが、最後の FOO は上記の New FOO () のオブジェクトと同じように記述しますが、状況はそれだけではありません。

上記の例では、new 演算子が関数を操作することがわかります。関数 Foo は明示的に値を返さないため、この関数の実行後の戻り値は未定義になります。コンストラクターが値を明示的に返さない場合、その値に対して新しい操作を実行した後、コンストラクターによってインスタンス化されたオブジェクトが返されます。

特定の値を返したらどうなるでしょうか?

var Foo = function(x, y) {    this.x = x    this.y = y    return {        a: this.x
    }
}var foo = new Foo(1, 2) // {a: 1}
foo はこの関数を実行した後の戻り値なので、現時点では new Foo() と Foo() に違いはないので、通常はコンストラクターで特定の値を返すことは選択しません。

コンストラクターでオブジェクトではなく、数値や文字列値などの通常の値を返す場合、new の後に返されるオブジェクトはインスタンス化後もオブジェクトであることに注意することが重要です。

関連する推奨事項:

js 関数の新しい呼び出しと通常の呼び出しの違い

BUG からの新規開始について

js の new 演算子の実行プロセスとは何ですか

以上がJavaScriptのnew演算子の詳しい解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。