Heim > Artikel > Web-Frontend > Javascript-Konstruktormethode zum Definieren von Objekten
Javascript-Konstruktormethode zum Definieren von Objekten
- 不言Original
- 2018-05-04 16:51:071551Durchsuche
In diesem Artikel wird hauptsächlich die JavaScript-Konstruktormethode zum Definieren von Objekten vorgestellt.
Javascript ist eine dynamische Sprache. Sie können Objekten zur Laufzeit Attribute hinzufügen und Objekte löschen >
Code kopierenDer Code lautet wie folgt:
<html>
<head>
<script type="text/javascript">
/*
//01.定义对象第一种方式
var object =new Object();
alert(object.username);
//01.1增加属性username
object["username"]="liujianglong";
//object.username="liujl";
alert(object.username);
//01.2删除属性username
delete object.username;//username属性已经从object对象中删除
alert(object.username);
*/
//02.定义对象第二种方式--在javascript中定义对象的一种最常见的方式
var object={name:"zhangsan",age:10,sex:"fale"};
alert(object.name);
alert(object.age);
alert(object.sex);
</script>
</head>
<body>
</body>
</html>Attributname: Methodenname ist auch möglich, da die Funktion selbst ein Objekt istJavascript-Array-Sortierung
Code kopieren Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var array=[1,3,25];
/////////////////////////////////
var compare=function(num1,num2){
var temp1=parseInt(num1);
var temp2=parseInt(num2);
if(temp1<temp2){
return -1;
}else if(temp1==temp2){
return 0;
}else{
return 1;
}
}
//array.sort(compare);//01.函数名是对象引用
////////////////////////////////
//02.匿名函数方式//////////////////
array.sort(function c(num1,num2){
var temp1=parseInt(num1);
var temp2=parseInt(num2);
if(temp1<temp2){
return -1;
}else if(temp1==temp2){
return 0;
}else{
return 1;
}
});
/////////////////////////////////
alert(array);
</script>
</head>
<body>
</body>
</html>Mehrere Möglichkeiten, Objekte in Javascript zu definieren (es gibt kein Klassenkonzept in Javascript, nur Objekte)Erste Möglichkeiten: Erweitern Sie seine Eigenschaften und Methoden basierend auf vorhandenen Objekten
Kopieren Sie den Code Der Code lautet wie folgt:
<script type="text/javascript">
//01.基于已有对象扩充其属性和方法
var object=new Object();
object.username="zhangsan";
object.sayName=function (name){
this.username=name;
alert(this.username);
}
alert(object.username);
object.sayName("lisi");
alert(object.username);
</script>Diese Methode hat Einschränkungen, da Javascript dies tut Es verfügt nicht über die gleichen Funktionen wie Java. Das Konzept einer Klasse besteht darin, eine Klasse zu schreiben und dann ein neues Objekt mit diesen Attributen und Methoden zu erhalten. Wenn Sie zu diesem Zeitpunkt Objekt2 besitzen möchten, können Sie nur eine weitere Kopie des obigen Codes schreiben, was nicht gut ist. Zweite Methode: Factory-Methode Ähnlich der statischen Factory-Methode in Java.
Code kopieren Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//对象工厂方法
var createObject=function(){
var object=new Object();
object.username="zhangsan";
object.password="123";
object.get=function(){
alert(this.username+" , "+object.password);
}
return object;
}
var obj1=createObject();
var obj2=createObject();
obj1.get();
//修改对象2的密码
obj2["password"]="123456";
obj2.get();
</script>
</head>
<body>
</body>
</html>Das Erstellen von Objekten auf die oben beschriebene Weise hat nach der Verbesserung Nachteile (jedes Objekt verfügt über eine Get-Methode, wodurch Speicher verschwendet wird). Factory-Methode (alle Objekte teilen sich eine Get-Methode):
Code kopieren Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//所有对象共享的get方法
var get=function(){
alert(this.username+" , "+this.password);
}
//对象工厂方法
var createObject=function(username,password){
var object=new Object();
object.username=username;
object.password=password;
object.get=get;//注意：这里不写方法的括号
return object;
}
//通过工厂方法创建对象
var object1=createObject("zhangsan","123");
var object2=createObject("lisi","345");
//调用get方法
object1.get();
object2.get();
</script>
</head>
<body>
</body>
</html>Dritte Methode: Objekte im Konstruktormodus definieren
Code kopieren Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var get=function(){
alert(this.username+" , "+this.password);
}
function Person(username,password){
//在执行第一行代码前，js引擎会为我们生成一个对象
this.username=username;
this.password=password;
this.get=get;
//在此处，有一个隐藏的return语句，用于返回之前生成的对象[这点是和工厂模式不一样的地方]
}
var person=new Person("zhangsan","123");
person.get();
</script>
</head>
<body>
</body>
</html>Vierter Weg: Objekte auf Prototypenart erstellenPrototyp ist ein Attribut im Objektobjekt und allen Personen Objekte sind auch Sie können das Prototypattribut haben. Sie können dem Prototyp des Objekts einige Attribute und Methoden hinzufügen. Die Nachteile der einfachen Verwendung des Prototyps beim Erstellen von Objekten: ① Die Parameter können nicht übergeben werden und der Wert kann erst geändert werden, nachdem das Objekt erstellt wurde.
Code kopierenDer Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Person(){
}
Person.prototype.username="zhangsan";
Person.prototype.password="123";
Person.prototype.getInfo=function(){
alert(this.username+" , "+this.password);
}
var person1=new Person();
var person2=new Person();
person1.username="lisi";
person1.getInfo();
person2.getInfo();
</script>
</head>
<body>
</body>
</html>Code kopieren Der Code lautet wie folgt:<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Person(){
}
Person.prototype.username=new Array();
Person.prototype.password="123";
Person.prototype.getInfo=function(){
alert(this.username+" , "+this.password);
}
var person1=new Person();
var person2=new Person();
person1.username.push("wanglaowu");
person1.username.push("wanglaowu2");
person2.password="456";
person1.getInfo ();
person2.getInfo();
</script>
</head>
<body>
</body>
</html>Bei Verwendung der Prototyp-Methode zum Definieren von Objekten können im Konstruktor einfach keine Eigenschaften zugewiesen werden. Der Anfangswert kann nur nach dem Objekt geändert werden erzeugt wird.
Der fünfte Weg: Verwenden Sie Prototyp + Konstruktormethode, um Objekte zu definieren ---- Empfohlene VerwendungDie Attribute zwischen Objekten stören sich nicht gegenseitig
Jedes Objekt verwendet dieselbe MethodeCode kopieren
Der Code lautet wie folgt:<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//使用原型+构造函数方式来定义对象
function Person(){
//属性 定义在构造函数中
this.username=new Array();
this.password="123";
}
//方法 定义在原型中
Person.prototype.getInfo=function(){
alert(this.username+" , "+this.password);
}
var p1=new Person();
var p2=new Person();
p1.username.push("zhangsan");
p2.username.push("lisi");
p1.getInfo();
p2.getInfo();
</script>
</head>
<body>
</body>
</html>Sechste Methode: Dynamische Prototypmethode – es wird empfohlen,
die Konstruktor-Flags zu übergeben Erlauben Sie allen Objekten, eine Methode gemeinsam zu nutzen, während jedes Objekt seine eigenen Eigenschaften hat.
Code kopierenDer Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var Person=function (username,password){
this.username=username;
this.password=password;
if(typeof Person.flag=="undefined"){
alert("invoked");
Person.prototype.getInfo=function(){
alert(this.username+" , "+this.password);
}
Person.flag=true;
}
}
var p1=new Person("zhangsan","123");
var p2=new Person("lisi","456");
p1.getInfo();
p2.getInfo();
</script>
</head>
<body>
</body>
</html>Verwandte Empfehlungen:
Javascript-Konstruktor, öffentliche, private Berechtigungen und statische Memberdefinition Methoden_ Javascript-Kenntnisse
Das obige ist der detaillierte Inhalt vonJavascript-Konstruktormethode zum Definieren von Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse