Ein Objekt ist eine Sammlung von Eigenschaften und Methoden. Was ist objektorientiert? Objektorientiert ist eine Programmieridee und ein Konzept. In js wird die objektorientierte Programmierung durch eine Methode namens Prototyp implementiert.
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>创建对象</title></head><body><button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript">
//创建一个学生对象
var student=new Object(); //创建对象的属性并且赋值
student.age=50;
student.name="小黑";
student.address="海淀区"; //创建对象的方法
student.sayHello=function(){
document.write("姓名："+student.name+"<br/>");
document.write("年龄："+student.age+"<br/>");
document.write("住址："+this.address+"<br/>");
} //用户点击按钮触发的事件
function showInfo(){
student.sayHello(); //调用student的方法
} //现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！</script></body></html>Nach dem Login kopieren
Erstellen Sie Objekte über Literale
Erstellen Sie ein Schülerobjekt
{Attribut 1: Wert 1, Attribut 2: Wert 2, Attribut 3: Wert 3}
JSON-Datenformat: Es handelt sich um ein Datenkonvertierungsformat
01. Es liegt in Form eines Schlüssel-Wert-Paares vor
02. Das Objekt wird in {}
gespeichert
03. Die Sammlung wird in []
gespeichert
04. Daten werden durch Kommas getrennt, Attribute und Attributwerte werden durch Doppelpunkte getrennt
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>通过字面量来创建对象</title></head><body>
<button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript">
var student={
age:50,
name:"小黑",
address:"海淀区",
sayHello:function(){ //方法
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("住址："+this.address+"<br/>");
}
} // student 我们称之为变量 =右边的｛｝中的数据，我们称之为 字面量！
//用户点击按钮触发的事件
function showInfo(){
student.sayHello(); //调用student的方法
} // 问题依然存在：现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！</script></body></html>Nach dem Login kopieren
Erstellen Sie mehrere Objekte über Konstruktoren
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>通过构造函数创建多个对象</title></head><body><script type="text/javascript">
//创建构造函数 函数名称首字母必须大写
function Student(name,age,address){
//声明属性并赋值
this.name=name; this.age=age; this.address=address; //设置方法
this.sayHello=function(){
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("住址："+this.address+"<br/>");
}
} //创建多个对象
var stu1=new Student("小黑1",50,"天堂1"); var stu2=new Student("小黑2",51,"天堂2"); var stu3=new Student("小黑3",52,"天堂3"); //分别调用对象的方法
stu1.sayHello();
stu2.sayHello();
stu3.sayHello(); // 所有的对象都有一个constructor属性！指向了构造函数！
document.write("stu1.constructor指向了Student："+(stu1.constructor==Student)+"<br>"); //instanceof 判断某个对象是否属于某个类型
document.write("stu1属于Student吗？"+(stu1 instanceof Student)+"<br>");
document.write("stu1属于Object吗？"+(stu1 instanceof Object)+"<br>");
document.write("stu1属于Function吗？"+(stu1 instanceof Function)+"<br>");</script></body></html>Nach dem Login kopieren
Prototypobjekte
Hinweis:
01. Alle Objekte haben ein Konstruktorattribut! Zeigt auf den Konstrukteur!
02. Wenn wir eine Funktion erstellen, hat die Funktion ein Prototypattribut,
Dieses Attribut verweist auf das vom Konstruktor erstellte Prototypobjekt! Student.prototype
03. Ein Prototypobjekt ist ein Objekt im Speicher, das gemeinsame Eigenschaften und Methoden für andere Objekte bereitstellt!
04. Das Prototypattribut ist nur für Funktionen verfügbar!
05. Jedes Objekt hat ein __proto__-Attribut, das auf das Prototypobjekt verweist!
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>原型对象</title></head><body><script type="text/javascript">
/*创建一个构造函数*/
function Student(){} //通过原型对象来创建对象
Student.prototype.name;
Student.prototype.age;
Student.prototype.address;
Student.prototype.sayHello=function(){
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("住址："+this.address+"<br/>");
} var stu1=new Student();
stu1.name="小白";
stu1.age=52;
stu1.address="天上人间"; var stu2=new Student();
stu2.sayHello(); // 验证每个对象都有一个__proto__属性，指向了原型对象！
document.write(stu2.__proto__==Student.prototype);</script></body></html>Nach dem Login kopieren
01 Das Prototypattribut ist nur für Funktionen verfügbar!
02. Jedes Objekt hat ein __proto__-Attribut, das auf das Prototypobjekt verweist!
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>深入原型对象</title></head><body><script type="text/javascript">
//01.验证只有函数有prototype属性
var a={};
document.write(a.prototype+"<br/>");
document.write(a.__proto__+"<br/>"); var b=function(){}
document.write(b.prototype+"<br/>");
document.write(b.__proto__+"<br/>"); var c=new b(); // 02.验证每个对象都有一个__proto__属性，指向了原型对象！
document.write(c.__proto__== b.prototype);</script></body></html>Nach dem Login kopieren
Prototypenkette
Prototypenkette:
01. Ein Prototypobjekt ist eine Instanz eines anderen Prototypobjekts! Ein Kätzchen ist ein Beispiel für ein Tier!
02. Die zugehörigen Prototypketten schreiten Schicht für Schicht voran und bilden eine Kette von Instanzen und Prototypobjekten. Wir nennen sie die Prototypenkette!
Die schwarze Katze hockt in der Ecke (Beispiel)
Geerbt
Katzenklasse (01. Entspricht einer schwarzen Katze, ist ein Prototypobjekt. 02. Im Vergleich zu einem Tier ist es eine Instanz)
Geerbt
Tierklasse (01. Prototypobjekt aller Tiere 02. Objektinstanz)
Geerbt
Objekt (die oberste Ebene aller Prototypobjekte)
Solange es ein Objekt ist, hat es das Attribut __proto__, das auf das Prototypobjekt verweist!
Frage:
Objekt ist ein Objekt!
Es gibt <！> Attribute! __proto__
Der Attributwert ist null!
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>原型链</title></head><body><script type="text/javascript">
//模拟一个构造函数
var Student=function(){}; var stu1=new Student();
document.write(stu1.__proto__+"<br/>"); //student
document.write(stu1.__proto__.__proto__+"<br/>");//function
document.write(stu1.__proto__.__proto__.__proto__+"<br/>"); // object null
document.write("===================================");
document.write((stu1.__proto__===Object.prototype)+"<br/>"); //false
document.write((Student.prototype.__proto__===Object.prototype)+"<br/>"); //true</script></body></html>Nach dem Login kopieren
Borrow-Konstruktor
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>借用构造函数的同时传递参数</title></head><body>
<script type="text/javascript">
//创建Animal的构造
function Animal(name){
this.name=name;
} //创建Dog的构造
function Dog(){
//借用构造 传递参数
Animal.call(this,"小黑狗"); this.age=50;
} //创建Cat的构造
function Cat(){
//借用构造
Animal.call(this,"小猫咪"); this.health=100;
} //创建小狗的实例
var dog1=new Dog();
document.write(dog1.name);
document.write(dog1.age); //创建小猫咪的实例
var cat1=new Cat();
document.write(cat1.name);
document.write(cat1.health); </script></body></html>Nach dem Login kopieren
Kombinierte Vererbung
Kombinierte Vererbung:
Es wird manchmal als pseudoklassische Vererbung bezeichnet und kombiniert die Techniken der Prototypenverkettung und des Ausleihens von Konstruktoren
Ein Vererbungsmuster, das das Beste aus beiden Welten nutzt, nutzt die Prototypenkette, um Prototypeneigenschaften und -methoden zu erben,
Das Erben von Instanzattributen wird durch Ausleihen von Konstruktoren erreicht
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>组合继承</title></head><body><script type="text/javascript">
/*构造方法*/
function Person(name){
this.name=name; this.names=["hei","bai","pei"];
}
Person.prototype.sayHello=function(){
alert(this.name);
} function Student(name,age){
Person.call(this,name); //继承属性 借用构造
this.age=age;
}
Student.prototype=new Person();//继承了方法 原型链
//student特有的方法
Student.prototype.sayBey=function(){
alert(this.name);
} /*创建对象*/
var stu=new Student("小黑黑",50);
stu.names.push("小白白");
document.write(stu.names+"<br/>");
stu.sayHello();
stu.sayBey(); var stu1=new Student("小黑黑2",50);
document.write(stu1.names+"<br/>");
stu1.sayHello();
stu1.sayBey();</script></body></html>Nach dem Login kopieren
Verwandte Empfehlungen:
Detaillierte Erläuterung des Wissens über die objektorientierte Vererbung von js
Detaillierte Beschreibung der objektorientierten JS-Programmierung
JavaScript objektorientiertes Design_js objektorientiert
Das obige ist der detaillierte Inhalt vonBeispiele für die objektorientierte Verwendung von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
