Heim > Web-Frontend > js-Tutorial > Hauptteil

Methoden zur Implementierung dynamischer Funktionen des JS-Prototyps

小云云
Freigeben: 2018-03-28 17:24:46
Original
1468 Leute haben es durchsucht

Als ich JS lernte, stieß ich auf Probleme im Zusammenhang mit Prototypänderungen durch Funktionen und Instanzobjekte. Ich möchte sie mit Ihnen teilen und hoffe, allen zu helfen.

Beispiel 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>
Nach dem Login kopieren

In diesem Fall wird Person.prototype verwendet, um den Prototyp umzuleiten. Der alte Prototyp wird von der Funktion getrennt und der Prototyp der Funktion möchte nur einen neuen Prototyp, daher gibt das neu erstellte Instanzobjekt p2 „Ein-Personen-Mädchengruppe“ aus.

Beispiel 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>
Nach dem Login kopieren

In dem Fall kann p1.prototype nicht Durch die Umleitung der Funktion und ihres eigenen Prototyps wird sich selbst lediglich ein Prototypattribut hinzugefügt. Daher sind die gedruckten Ergebnisse von p1.say() und p1.prototype.say() inkonsistent

Beispiel 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>
Nach dem Login kopieren

Im Fall wird p1.__proto__ verwendet, um den Prototyp von p1 umzuleiten, sodass die Ausdrucke von say() in p1 und p2 unterschiedlich sind

Von den drei Fällen I Folgendes Es werden Schlussfolgerungen gezogen:

(1) Funktionsname.prototype kann den Prototyp der Funktion umleiten, und der alte Prototyp wird von der Funktion getrennt

(2) Objektname . Der Prototyp kann den Prototyp der Funktion nicht umleiten und fügt dem Instanzobjekt nur ein Prototypattribut hinzu (wenn das Instanzobjekt kein Prototypattribut hat)

(3) Der Objektname .__proto__ kann der Prototyp sein des Objekts Umleiten, kann jedoch den Prototyp anderer durch die Funktion erstellter Instanzobjekte nicht ändern

(4) Der Prototyp wird als Funktionsname aufgerufen und der Prototyp kann umgeleitet werden

(5) __proto__ ist der Objektname. Der Aufruf kann den Prototyp des Objekts umleiten, hat jedoch keinen Einfluss auf den Prototyp von Funktionen und anderen Instanzobjekten.

Das obige ist der detaillierte Inhalt vonMethoden zur Implementierung dynamischer Funktionen des JS-Prototyps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!