Javascript-Konstruktormethode zum Definieren von Objekten-js-Tutorial-php.cn

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>

Nach dem Login kopieren

Attributname: Methodenname ist auch möglich, da die Funktion selbst ein Objekt ist

Javascript-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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Vierter Weg: Objekte auf Prototypenart erstellen

Prototyp 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 kopieren

Der 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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 Methode

Code 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>

Nach dem Login kopieren

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 kopieren

Der 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>

Nach dem Login kopieren

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!