JSプロトタイプの動的機能を実装する方法-jsチュートリアル-php.cn

JSプロトタイプの動的機能を実装する方法

小云云

リリース： 2018-03-28 17:24:46

オリジナル

1482 人が閲覧しました

JS を学習していたときに、関数やインスタンスオブジェクトによるプロトタイプの変更に関する問題に遭遇しました。皆さんのお役に立てればと思い、それらを共有したいと思います。

例 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性1</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改原型中的方法（true）
Person.prototype = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 下雪的季节 */
p2.say(); /* 一个人的女团 */
</script>
</html>

ログイン後にコピー

この場合、古いプロトタイプは関数から切り離されるため、新しく作成されたインスタンスオブジェクト p2 が必要になります。が出力されます。これは「一人の女の子グループ」です

例 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性2</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改p1原型中的方法（false）
p1.prototype = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 下雪的季节 */
p1.prototype.say();/* 一个人的女团，此处调用的是实例对象自己的prototype属性中的方法 */
p2.say(); /* 下雪的季节 */
</script>
</html>

ログイン後にコピー

この場合、p1.prototype は関数と自身のプロトタイプをリダイレクトできませんが、プロトタイプ属性をそれ自体に追加するだけです。したがって、p1.say() と p1.prototype.say() の出力結果は矛盾しています

例 3:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原型的动态特性2</title>
</head>
<body>
</body>
<script>
// 创建一个函数
var Person = function() {};

// 给函数的原型添加一个方法
Person.prototype.say = function() {
console.log("下雪的季节...");
};

// 创建第一个实例对象
var p1 = new Person();

// 修改p1原型中的方法（true）
p1.__proto__ = {
say: function() {
console.log("一个人的女团...");
}
};

// 创建第二个实例对象
var p2 = new Person();

// 打印p1与p2中的say方法
p1.say(); /* 一个人的女团 */
p1.__proto__.say();/* 一个人的女团 */
p2.say(); /* 下雪的季节 */
</script>
</html>

ログイン後にコピー

この場合、p1.__proto__ は p1 のプロトタイプをリダイレクトするために使用されるため、 p1 と p2 の Say() の出力は異なります

3 つのケースから、私は次の結論に達しました:

(1) 関数名.prototype は関数のプロトタイプをリダイレクトできます。古いプロトタイプは次のようになります。関数から切断されました

(2) オブジェクト名.prototype は関数のプロトタイプをリダイレクトできません。プロトタイプ属性のみがインスタンスオブジェクトに追加されます (インスタンスオブジェクトがプロトタイプ属性を持たない場合)

(3) オブジェクトName.__proto__ はオブジェクトのプロトタイプをリダイレクトできますが、関数で作成した他のインスタンスオブジェクトのプロトタイプを変更することはできません

(4) プロトタイプは関数名で呼び出され、プロトタイプをリダイレクトできます

(5) __proto__オブジェクト名に対して呼び出されると、オブジェクトのプロトタイプをリダイレクトできますが、関数や他のインスタンスオブジェクトのプロトタイプは影響を受けません。

以上がJSプロトタイプの動的機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。