JavaScript プロトタイプの深い理解 (写真)

プロトタイプについて理解する

プロトタイプは、他のオブジェクトがプロパティの継承を実装できるオブジェクトです。どのオブジェクトも継承することができ、すべてのオブジェクトはデフォルトでプロトタイプを持ちます。プロトタイプ自体もオブジェクトであるため、各プロトタイプ自体がプロトタイプを持ちます。すべてのオブジェクトには、__proto__ として記録されるプロトタイプ属性があります。オブジェクトを定義するときは常に、その __proto__ 属性がそのプロトタイプを指します。例は次のとおりです。

var foo = { 
x: 10, 
y: 20 
};

プロトタイプを指定しない場合でも、この属性は予約されます。明確なポインタがある場合、リンクされたリストは接続されます。プロトタイプ自体にもポインターがあり、これが最も高度な object.prototype であることに注意してください。例は次のとおりです。

var a = { 
x: 10, 
calculate: function (z) { 
return this.x + this.y + z 
} 
}; 
var b = { 
y: 20, 
__proto__: a 
}; 

var c = { 
y: 30, 
__proto__: a 
}; 

// call the inherited method 
b.calculate(30); // 60

プロトタイプの使用

プロトタイプの原理を理解した後、プロトタイプをどのように使用するか?言い換えれば、プロトタイプの役割は何でしょうか?

一般の初心者は、基本的な JavaScript 構文を学習した後、関数指向プログラミングを使用します。次のコード:

var decimalDigits = 2,
	tax = 5;

function add(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

//alert(add(1, 3));

は、各関数を実行して最終結果を取得します。しかし、プロトタイプを使用すると、コンストラクターを使用してコードの一部を最適化できます:

まず第一に、変数のみが関数本体に保存されます:

var Calculator = function (decimalDigits, tax) {
    this.decimalDigits = decimalDigits;
    this.tax = tax;
};

具体的なメソッドはプロトタイプ属性を通じて設定されます:

Calculator.prototype = {
    add: function (x, y) {
        return x + y;
    },

    subtract: function (x, y) {
        return x - y;
    }
};
//alert((new Calculator()).add(1, 3));

この方法、インスタンスを使用できます。オブジェクトを変換した後、対応する関数操作を実行します。これは一般的な js フレームワークでも使用されている方法です。

プロトタイプのもう 1 つの機能は、継承 を実装することです。まず、親オブジェクトを定義します:

var BaseCalculator = function() {
    this.decimalDigits = 2;
};

BaseCalculator.prototype = {
    add: function(x, y) {
        return x + y;
    },
    subtract: function(x, y) {
        return x - y;
    }
};

次に、子オブジェクトを定義し、子オブジェクトのプロトタイプが親要素のインスタンス化を指すようにします:

var Calculator = function () {
    //为每个实例都声明一个税收数字
    this.tax = 5;
};

Calculator.prototype = new BaseCalculator();

Calculator のプロトタイプが、順番に BaseCalculator のインスタンスを指すことがわかります。 Calculator を統合するには、add(x,y) とsubtract(x,y) という 2 つの関数があります。もう 1 つ言及すべき点は、そのプロトタイプは BaseCalculator のインスタンスであるため、作成した Calculator オブジェクトのインスタンスの数に関係なく、そのプロトタイプはすべて同じインスタンスを指します。

上記のコードを実行すると、Calculator のプロトタイプが BaseCalculator のインスタンスを指しているため、Calculator がそのコンストラクターで宣言された属性値にアクセスしたくない場合は、その DecimalDigits 属性値にアクセスできることがわかります。 BaseCalculator では、どうすればよいでしょうか? Calculator をインスタンスではなく BaseCalculator のプロトタイプに指定するだけです。コードは次のとおりです。

var Calculator = function () {
    this.tax= 5;
};

Calculator.prototype = BaseCalculator.prototype;

サードパーティのライブラリを使用する場合、それらが定義するプロトタイプ メソッドがニーズを満たせない場合があるため、いくつかのメソッドを自分で追加できます。 コードは次のとおりです。

//覆盖前面Calculator的add() function 
Calculator.prototype.add = function (x, y) {
    return x + y + this.tax;
};

var calc = new Calculator();
alert(calc.add(1, 1));

プロトタイプ チェーン

プロトタイプ。オブジェクトの親はオブジェクトの親を指し、親のプロトタイプは親の親を指します。このプロトタイプのレイヤーごとの関係は、プロトタイプ チェーンと呼ばれます。

オブジェクトのプロパティを検索する場合、JavaScript は、指定された名前のプロパティがプロトタイプ チェーンの先頭 (つまり、Object.prototype) と指定されたプロパティに到達するまで、プロトタイプ チェーンを上方向に走査します。がまだ見つからない場合は、未定義が返されます。

例は次のとおりです:

function foo() {
    this.add = function (x, y) {
        return x + y;
    }
}

foo.prototype.add = function (x, y) {
    return x + y + 10;
}

Object.prototype.subtract = function (x, y) {
    return x - y;
}

var f = new foo();
alert(f.add(1, 2)); //结果是3，而不是13
alert(f.subtract(1, 2)); //结果是-1

subtrace は上方参照の原則に従っていますが、add には事故があることがわかります。その理由は、 属性を検索するときに、まず自身の属性を検索し、そうでない場合はプロトタイプ を検索するためです。

Object.prototype と言えば、そのメソッドの 1 つである hasOwnProperty について触れなければなりません。これは、オブジェクトにプロトタイプ チェーンのプロパティではなくカスタム プロパティが含まれているかどうかを判断できます。これは、プロパティを処理しますが、プロトタイプ チェーンを検索しない JavaScript の唯一の関数です。使用コードは次のとおりです。

// 修改Object.prototype
Object.prototype.bar = 1; 
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

プロトタイプ オブジェクトとインスタンスの間の関係を決定するには、isPrototyleOf メソッドを導入する必要があります。 デモは次のとおりです。

alert(Cat.prototype.isPrototypeOf(cat2)); //true

以上がJavaScript プロトタイプの深い理解 (写真)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。