大昌面接の質問を共有する 面接質問バンク
フロントエンド面接とバックエンド面接の質問バンク（面接に必要） オススメ度： ★★★★★
アドレス:フロントエンド インタビューの質問バンク Web フロントエンド インタビューの質問バンク VS Java バックエンド インタビューの質問バンク Daquan
JavaScript では、new 演算子を使用してインスタンス オブジェクトを作成でき、このインスタンス オブジェクトは元のオブジェクトのプロパティとメソッドを継承します。したがって、 new の重要性は、単にオブジェクトをインスタンス化するだけでなく、JavaScript で継承を実装することです。
新しい役割
まずは例を通して関数を理解しましょう new 。例は次のとおりです。
function Person(name) {
this.name = name
}
Person.prototype.sayName = function () {
console.log(this.name)
}
const t = new Person('小明')
console.log(t.name) // 小明
t.sayName() // 小明
复制代码上記の例から、次の結論を導き出すことができます。
newコンストラクターPersonによって作成されたインスタンス オブジェクトは、コンストラクター内のプロパティにアクセスできます。
newコンストラクターを通じてPerson作成されたインスタンスは 、コンストラクターのプロトタイプ チェーン内のプロパティにアクセスできます。つまり、newオペレーターを通じて、インスタンスとコンストラクターはプロトタイプ チェーンを通じて接続されます。
コンストラクターは 値を Person 指定しません (デフォルトで戻り値を返します)。値を返すようにするとどうなりますか?returnundefined
function Person(name) {
this.name = name
return 1
}
const t = new Person('小明')
console.log(t.name) // 小明
复制代码上記の例ではコンストラクターで返されています 1が、この戻り値は役に立たず、結果は前の例とまったく同じになります。別の結論を導き出すこともできます。
コンストラクターがプリミティブ値を返す場合、この戻り値は意味がありません。
返されたオブジェクトで何が起こるかをもう一度試してみましょう。
function Person(name) {
this.name = name
return {age: 23}
}
const t = new Person('小明')
console.log(t) // { age: 23 }
console.log(t.name) // undefined
复制代码上記の例から、戻り値がオブジェクトの場合は正常に戻り値が返されることがわかります。ここでもまた次のような結論に達しました。
コンストラクターの戻り値がオブジェクトの場合、通常はこの戻り値が使用されます。
要約: これら 2 つの例は、コンストラクターが値を返さないようにすべきであることを示しています。プリミティブ値を返しても効果がないため、オブジェクトを返すと new 演算子が役に立たなくなります。
新しいものを実装する
まず第一に、 new 演算子を使用するときに js が何を行うのかを明確にする必要があります。
- jsは内部的にオブジェクトを作成します
- このオブジェクトはコンストラクターのプロトタイプのプロパティにアクセスできるため、オブジェクトをコンストラクターに接続する必要があります。
- コンストラクター内の this は、この新しいオブジェクトに割り当てられます (つまり、this は新しいオブジェクトを指します)。
- 返された元の値は無視され、返されたオブジェクトは通常どおり処理される必要があります。
手順を理解した後、新しい機能を認識し始めることができます。
function _new(fn, ...args) {
const newObj = Object.create(fn.prototype);
const value = fn.apply(newObj, args);
return value instanceof Object ? value : newObj;
}
复制代码テスト例は次のとおりです。
function Person(name) {
this.name = name;
}
Person.prototype.sayName = function () {
console.log(this.name);
};
const t = _new(Person, "小明");
console.log(t.name); // 小明
t.sayName(); // 小明
复制代码以上は、JavaScript における new 演算子の役割と new 演算子の実装方法についてでした。
大昌面接の質問を共有する 面接質問バンク
フロントエンド面接とバックエンド面接の質問バンク（面接に必要） オススメ度： ★★★★★
アドレス:フロントエンド インタビューの質問バンク Web フロントエンド インタビューの質問バンク VS Java バックエンド インタビューの質問バンク Daquan