JavaScript が新しいものを制御します

VUE3.0 をすぐに使い始める方法: 学習の

序文

new機能とは何ですか?

new演算子は、ユーザー定義のオブジェクト型、またはコンストラクターを持つ組み込みオブジェクト型の 1 つのインスタンスを作成します。

定義を見ただけではまだ少しわかりにくいですが、 JavaScriptのnewの機能を理解するために具体的な例を見てみましょう。

例

: // 実生活では体重を減らすことはできませんが、オンラインではスリムな状態を維持する必要があります function Thin_User(name, age) {
    this.name = 名前;
    this.age = 年齢;
}

Thin_User.prototype.eatToMuch = function () {
    // 空想して太い涙を残す console.log('たくさん食べるのに、とても痩せている!!!');
}

Thin_User.prototype.isThin = true;

const xiaabao = new Thin_User('zcxiaabao', 18);
console.log(xiaabao.name); // zcxiaabao
コンソール.log(xiaabao.age); // 18
console.log(xiaabao.isThin); // true
// たくさん食べますが、とても痩せています!!!
xiaabao.eatToMuch();

上記の例から、 xiaobao

• コンストラクターThin_User
• Thin_User.prototypeのプロパティにアクセスし、

より簡単に記述して、 newのことを実行できることがわかります。

• 空のオブジェクトを作成します。オブジェクトの__proto__->Thin_User.prototype
• コンストラクターを実行し、 this新しいオブジェクトにポイントして
• 新しいオブジェクトを返します。

補足説明:

newはキーワードなので、配列をシミュレートする上位メソッドのようにオーバーライドすることはできません。 new効果をシミュレートする関数createObject 。使用法は次のとおりです:

function Thin_User(name, age) {}

const u1 = 新しい Thin_user(...)
const u2 = createObject(Thin_User, ...a)

予備シミュレーション

上記の分析によると、 createObject記述するための一般的な手順は次のとおりです。

• 新しいオブジェクトobjを作成し
• 、 obj.__proto__->constructor.prototypeを設定します (ただし、JavaScript は推奨しません) __proto__ 属性を直接変更する場合、特にプロトタイプを変更するために setPrototypeOf メソッドが提供されます。constructor.call/
• constructor.call/apply(obj, ...)使用して属性をobjに追加し、
• obj

__proto__和prototype完全に理解することができます。プロトタイプとプロトタイプチェーン。
call/applyについては、call と apply に関する JavaScript チュートリアルを参照してください。

これらを学習した後、最初のバージョンのコードを作成できます。

function createObject(Con) {
    // 新しいオブジェクト obj を作成します
    // var obj = {} ; var obj = Object.create(null); とすることもできます。

    // obj.__proto__ -> コンストラクター プロトタイプを変換 // (非推奨) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //コンストラクタを実行 Con.apply(obj, [].slice.call(arguments, 1));

    // 新しいオブジェクトを返します return obj;}

戻り値の影響

ご存知のとおり、関数には戻り値があるため、コンストラクターに戻り値がある場合、 new ? の最終実行後に返される結果は何ですか。

戻り値は基本型であると

仮定して、コンストラクターの戻り値が基本型であると仮定して、最終的な戻り値を見てみましょう。

function Thin_User(name, age) {
    this.name = 名前;
    this.age = 年齢;
    「私は永遠に痩せ続けます」を返します。
}

Thin_User.prototype.eatToMuch = function () {
    console.log('たくさん食べますが、とても痩せています!!!');
}

Thin_User.prototype.isThin = true;

const xiaabao = new Thin_User('zcxiaabao', 18);
console.log(xiaabao.name); // zcxiaabao
コンソール.log(xiaabao.age); // 18
console.log(xiaabao.isThin); // true
// たくさん食べますが、とても痩せています!!!
xiaabao.eatToMuch();

最終的な戻り値は、コンストラクターが戻り値を処理しないようです。

心配しないで、戻り値がオブジェクトである状況のテストを続けてみましょう。

戻り値はオブジェクト

関数 Thin_User(name, age) {
    this.name = 名前;
    this.age = 年齢;
    戻る {
        名前: 名前、
        年齢: 年齢 * 10、
        脂肪：本当
    }
}

Thin_User.prototype.eatToMuch = function () {
    // 空想して太い涙を残す console.log('たくさん食べるのに、とても痩せている!!!');
}

Thin_User.prototype.isThin = true;

const xiaabao = new Thin_User('zcxiaabao', 18);
// エラー: xiaabao.eatToMuch は関数ではありません
xiaabao.eatToMuch();

eatToMuchを実行すると、コンソールにエラーが直接報告され、現在の関数がなかったので、 xiaobaoオブジェクトを出力しました。

xiaobaoオブジェクトのageが変更され、コンストラクターの戻り値とまったく同じfat属性が追加されていることがわかりました。

これら 2 つの例を読むと、コンストラクターが値を返すときの状況を基本的に明確にすることができます。つまり、コンストラクターがオブジェクトを返すとき、そのオブジェクトは直接返されます。

最終シミュレーション

関数 createObject(Con) {
    // 新しいオブジェクト obj を作成します
    // var obj = {} ; var obj = Object.create(null); とすることもできます。

    // obj.__proto__ -> コンストラクター プロトタイプを変換 // (非推奨) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //コンストラクタを実行し、コンストラクタの戻り値を受け取ります const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // コンストラクターの戻り値がオブジェクトの場合は、そのオブジェクトを直接返します // それ以外の場合は、obj を返します
    return typeof(ret) === 'オブジェクト' ret: obj;}