JavaScript が新しいものを制御します-jsチュートリアル-php.cn

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

WBOY

リリース： 2022-04-08 19:12:39

転載

2231 人が閲覧しました

この記事では、javascript に関する関連知識を提供します。主に new に関する関連問題を紹介します。new 演算子は、ユーザー定義のオブジェクト型のインスタンスを作成するか、コンストラクターを持ちます。組み込み演算子の 1 つです。オブジェクトタイプについて、皆さんのお役に立てれば幸いです。

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

【関連する推奨事項: JavaScript ビデオチュートリアル】

はじめに

新機能##とは#毛織物?

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

定義だけを見てもまだよくわかりませんが、

JavaScript の new によって実装される関数を理解するために、具体的な例を見てみましょう。

例

// 现实中瘦不了，但网络中一定要保持苗条
function Thin_User(name, age) {
    this.name = name;
    this.age = age;
}

Thin_User.prototype.eatToMuch = function () {
    // 白日做梦吧，留下肥胖的泪水
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name);   // zcxiaobao
console.log(xiaobao.age);    // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch();

ログイン後にコピー

上記の例から、

xiaabao には次の方法でアクセスできることがわかります。

Thin_User のプロパティ
Thin_User.prototype のプロパティ

にアクセスして、より簡単に説明します。 new

これらのことを行いました:

空のオブジェクトを作成し、オブジェクトの

コンストラクターを実行し、
新しいオブジェクトを指します新しいオブジェクトを返します

補足説明

Due to

new

はキーワードです。配列をシミュレートする上位メソッドのようにオーバーライドすることはできないため、関数 createObject を作成して new の効果をシミュレートします。具体的な使用法は次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function Thin_User(name, age) {} const u1 = new Thin_user(...) const u2 = createObject(Thin_User, ...a\)</pre><div class="contentsignin">ログイン後にコピー</div></div>

初期シミュレーション

上記の分析によると、

createObject

を記述するための一般的な手順は次のとおりです。 #新しいオブジェクトの作成

obj

Settingsobj.__proto__->constructor.prototype
ただし、JavaScript は直接推奨しません__proto__ 属性を変更するには、setPrototypeOf メソッドを使用してプロトタイプを具体的に変更します。)constructor.call/apply(obj, ...)
Returnobj
##__proto__ とprototype

call/apply
では、JavaScript のハンドティアリング呼び出しと apply##これらを学習した後、コードの最初のバージョンを作成できます。
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;}
ログイン後にコピー
戻り値の影響

ご存知のとおり、関数には戻り値があります。コンストラクターに戻り値がある場合、 # の最終実行後に返される結果は何になりますか? ＃＃新しい＃＃＃？

戻り値は基本型です

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

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return 'i will keep thin forever';
}

Thin_User.prototype.eatToMuch = function () {
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name);   // zcxiaobao
console.log(xiaobao.age);    // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch();

ログイン後にコピー

最後に戻り値は何らかの干渉を受けやすいようですが、コンストラクタは戻り値を処理しないのでしょうか?

急いではいけません。戻り値がオブジェクトである状況のテストを続けましょう。

戻り値はオブジェクトです

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return {
        name: name,
        age: age * 10,
        fat: true
    }
}

Thin_User.prototype.eatToMuch = function () {
    // 白日做梦吧，留下肥胖的泪水
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
// Error: xiaobao.eatToMuch is not a function
xiaobao.eatToMuch();

ログイン後にコピー

eatToMuch

を実行すると、コンソールは直接エラーを報告し、現在の関数はありませんでした。

xiaabao

Object:

を出力したところ、

xiaabao オブジェクトの age が変更されていることがわかり、 fat
が追加されました。コンストラクターの戻り値とまったく同じプロパティです。 JavaScript が新しいものを制御します

これら 2 つの例を読むと、コンストラクターが戻り値を持つ状況を基本的に明確にすることができます。

コンストラクターがオブジェクトを返す場合、オブジェクトは直接返されます。 最終バージョンのシミュレーション

function 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) === 'object' ? ret: obj;}

ログイン後にコピー

[関連する推奨事項: JavaScript ビデオチュートリアル]

以上がJavaScript が新しいものを制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。