Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie viele Möglichkeiten gibt es, Objekte in Javascript anzupassen? Eine Einführung in fünf häufig verwendete benutzerdefinierte Objektmethoden in js

不言
Freigeben: 2018-08-21 14:37:27
Original
3221 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich damit, wie viele Möglichkeiten es gibt, Objekte in JavaScript anzupassen. Die Einführung der fünf in js häufig verwendeten benutzerdefinierten Objektmethoden hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Objekt: In JavaScript sind ein Objekt Daten mit Eigenschaften und Methoden.

Es gibt sieben Möglichkeiten, Objekte in JavaScript anzupassen: direkte Erstellung, Objektinitialisierer, Konstruktor, Prototyp, gemischter Konstruktor/Prototyp, dynamischer Prototyp und Factory. Die ersten fünf Typen werden häufiger verwendet.

1. Direkte Erstellungsmethode:

Erstellungssyntax:

var 对象变量名 = new Object();
对象变量名. property1 = value1;
…;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
       //函数体
}
…;
对象变量名. methodNameN = function([参数列表]){
       //函数体
}
Nach dem Login kopieren
    //1.直接先创建空对象,然后不断丰富
	var student = new Object();
	student.name = "小王";
	student.age = 20;
	student.doHomework=function(){
		console.log(this.name+"正在学习......");
	}
			
	student.doHomework();
Nach dem Login kopieren

2. Objektinitialisierungsmethode:

Erstellungssyntax:

var 对象变量名 = {
       property1 : value1,
       property2 : value2,
       …,
       propertyN : valueN,
       methodName1 : function([参数列表]){
              //函数体
       },
       …,
       methodNameN : function([参数列表]){
              //函数体
       }
}
Nach dem Login kopieren
    //2.初始化器:定义对象变量方法 
    var volunteer = {
	    name : "小王",
	    age : 20,

	    getName : function(){
                    //this不能省略
		    return this.name;
	    },
	    doHomework : function(name){
		    console.log(name+"正在学习");
	    }
    }//该定义方法中{}里面用,隔开
			
    console.log(volunteer.name+":"+volunteer.age);
    volunteer.doHomework(xiaoming);//调用方法
Nach dem Login kopieren

3. Prototyp-Methode:

Nach der Deklaration einer neuen Funktion verfügt die Funktion (in JavaScript ist eine Funktion auch ein Objekt) über ein Prototyp-Attribut, über das dem Objekt und den Methoden neue Attribute hinzugefügt werden können.

Erstellungssyntax:

function 对象构造器( ){
}
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
      //函数体
}
Nach dem Login kopieren
        //3.prototype原型式
	function Boy(){
				
	}
	Boy.prototype.age=12;
	Boy.prototype.name="小明";
	Boy.prototype.introduction=function(){
		console.log(this.name+"的年龄为"+this.age);
	}
			
	var boy=new Boy();//创建对象
	boy.introduction();
Nach dem Login kopieren

4. Konstruktormethode:

Erstellungssyntax:

function 构造函数([参数列表]){
       this.属性 = 属性值;
       …
       this.属性N = 属性值N;
       this.函数1 = method1;
       …
       this.函数N = methodN;
}
function method1([参数列表]){
       //函数体
}
…
function methodN([参数列表]){
        //函数体
}
Nach dem Login kopieren

oder

function  构造函数([参数列表]){
    this.属性 = 属性值;
       …
    this.属性N = 属性值N;
    this.函数1 = function([参数列表]){
              //函数体
    } ;
       …
    this.函数N = function([参数列表]){
              //函数体
    } ;
}
Nach dem Login kopieren

( Hinweis : Bei Verwendung der Konstruktormethode zum Erstellen eines Objekts kann dies nicht weggelassen werden, was auch der Unterschied zwischen gewöhnlichen Funktionen ist)

        //4.构造函数式
	function Girl(age){
		this.name="小红";
		this.age= age;
		this.introduction=function(){
			console.log(this.name+"的年龄为"+this.age);
		}
	}
	
	var girl= new Girl(8);
	girl.introduction();
Nach dem Login kopieren

5 Gemischte Konstruktor-/Prototypmethode: (abgeleitet aus einer Kombination der Methoden 3 und 4 ) Neue Methode)

Die Konstruktormethode eignet sich zum dynamischen Zuweisen von Werten zu Eigenschaften, diese Methode definiert jedoch auch die Methode im Konstruktormethodenkörper, wodurch der Code komplizierter wird und die Prototypmethode komplizierter wird Dies ist nicht praktisch für die dynamische Zuweisung von Werten zu Eigenschaften, aber die auf diese Weise definierten Eigenschaften und Methoden erreichen eine Trennung, sodass wir voneinander aus den Stärken und Schwächen lernen – Konstrukteure definieren Eigenschaften und Prototypen definieren Methoden.

Erstellungssyntax:

function 对象构造器([参数列表]){
}
对象构造器.prototype.函数名 = function([参数列表]){
       //函数体
}
Nach dem Login kopieren
	function Kid(name,age){
		this.name=name;
		this.age= age;
	}
	Kid.prototype.introduction=function(){
		console.log(this.name+"的年纪为"+this.age);
	}
	
	var kid1=new Kid("小明",12);
	kid1.introduction();
	var kid2=new Kid("小王",12);
	kid2.introduction();
Nach dem Login kopieren

Die oben genannten sind 5 häufig verwendete Methoden zum Anpassen von Objekten in JS.

Verwandte Empfehlungen:

Eine kurze Diskussion über die Verwendung von JS zum Lesen benutzerdefinierter Attribute von DOM-Objekten (Tags)

JS So passen Sie das Konsolenobjekt während des Prozesses an

Das obige ist der detaillierte Inhalt vonWie viele Möglichkeiten gibt es, Objekte in Javascript anzupassen? Eine Einführung in fünf häufig verwendete benutzerdefinierte Objektmethoden in js. 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!