Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Betriebseigenschaften und -methoden basierend auf JS-Objekten

高洛峰
Freigeben: 2017-02-08 17:48:18
Original
780 Leute haben es durchsucht

1. Übersicht

In der Java-Sprache können wir unsere eigenen Klassen definieren und auf diesen Klassen basierende Objekte zur Verwendung erstellen. In Javascript können wir auch unsere eigenen Klassen definieren, beispielsweise die Definition der Benutzerklasse , Hashtable-Klasse und so weiter.

Derzeit gibt es einige Standardklassen in Javascript, wie Date, Array, RegExp, String, Math, Number usw., die uns beim Programmieren viel Komfort bieten. Für komplexe Client-Programme reichen diese jedoch bei weitem nicht aus.

Im Gegensatz zu Java stellt uns Java2 viele Standardklassen zur Verfügung, die grundsätzlich unsere Programmieranforderungen erfüllen. Allerdings bietet Javascript nur sehr wenige Standardklassen und viele Programmieranforderungen müssen von uns selbst implementiert werden Wenn Sie Iriomote Hashtable haben, ist dies bei der Verarbeitung von Schlüsselwerten sehr unpraktisch.

Daher denke ich persönlich, dass eine vollständige Javascript-Objektansicht wie folgt aussehen sollte:

2. Grundkonzepte

1.

Gemäß dem Objekterweiterungsmechanismus von JS können Benutzer JS-Objekte anpassen, was der Java-Sprache ähnelt.

Benutzerdefinierten Objekten entsprechen JS-Standardobjekte wie Datum, Array, Mathematik usw.

2. Prototyp

In JS ist dies eine Möglichkeit, Objekteigenschaften und -methoden durch Prototypen hinzuzufügen.

Durch Prototypen können wir neue Eigenschaften und Methoden zu JS-Standardobjekten hinzufügen, zum Beispiel können wir für String-Objekte eine neue Methode trim() hinzufügen.

Im Gegensatz zu strengen Programmiersprachen wie Java können wir JS-Objekten zur Laufzeit dynamisch neue Eigenschaften hinzufügen.

3. Grammatikregeln

1, Objekterstellungsmethode

1) Objektinitialisierungsmethode

Format: objectName = {property1:value1, property2: value2 ,…, propertyN:valueN}

property ist die Eigenschaft des Objekts

value ist der Wert des Objekts. Der Wert kann eine von drei Zeichenfolgen, Zahlen oder Objekten sein

Zum Beispiel: var user={name:“user1“,age:18};

var user={name:“user1“,job:{salary:3000,title:programmer}

Methoden von Objekten können auch auf diese Weise initialisiert werden, zum Beispiel:

var user={name:“user1”,age:18,getName:function(){
 
return this.name;
 
}
 
}
Nach dem Login kopieren

Die Konstruktormethode wird später erklärt, einschließlich der Definition von Attributen und Methoden usw. Erklären Sie die Methode der Konstruktorfunktion.

2) Konstruktormethode

Schreiben Sie einen Konstruktor und erstellen Sie das Objekt über eine neue Methode. Der Konstruktor kann Konstruktionsparameter haben

Zum Beispiel:

function User(name,age){
 
this.name=name;
 
this.age=age;
 
this.canFly=false;
 
}
 
var use=new User();
Nach dem Login kopieren

2. Objektattribute definieren

1) Für Objekte können in JS drei Arten von Attributen definiert werden: private Attribute, Instanzattribute und Klassenattribute. Ähnlich wie bei Java können nur private Eigenschaften definiert werden Wenn sie innerhalb eines Objekts verwendet werden, müssen Instanzeigenschaften über eine Instanz des Objekts referenziert werden, und Klasseneigenschaften können direkt über den Klassennamen referenziert werden.

2) Definition privater Eigenschaften

Private Eigenschaften können nur innerhalb des Konstruktors definiert und verwendet werden.

Grammatikformat: var propertyName=value;

Zum Beispiel:

function User(age){
 
this.age=age;
 
var isChild=age<12;
 
this.isLittleChild=isChild;
 
}
 
var user=new User(15);
 
alert(user.isLittleChild);//正确的方式
 
alert(user.isChild);//报错:对象不支持此属性或方法
Nach dem Login kopieren

3) Es gibt zwei Möglichkeiten, Instanzattribute zu definieren:

Prototyp-Methode, Syntaxformat: functionName.prototype.propertyName=value

diese Methode, Syntaxformat: this.propertyName=value, achten Sie auf die Position, die im folgenden Beispiel verwendet wird

Der Wert oben kann Zeichen, Zahlen und Objekte sein.

Zum Beispiel:

function User(){ }
 
User.prototype.name=“user1”;
 
User.prototype.age=18;
 
var user=new User();
 
alert(user.age);
 
—————————————–
 
function User(name,age,job){
 
this.name=“user1”;
 
this.age=18;
 
this.job=job;
 
}
 
alert(user.age);
Nach dem Login kopieren

3) Klassenattributdefinition

Syntaxformat: functionName.propertyName=value

Für Beispiel:

function User(){ }
 
User.MAX_AGE=200;
 
User.MIN_AGE=0;
 
alert(User.MAX_AGE);
Nach dem Login kopieren

Beziehen Sie sich auf die Klassenattribute von JS-Standardobjekten:

Number.MAX_VALUE //Maximaler numerischer Wert Math.PI //Pi

4) Für die Definition von Attributen gibt es neben der oben genannten eher formalen Art der Definition auch eine ganz besondere Art der Definition, das Syntaxformat: obj[index]=value

Beispiel:

function User(name){
 
this.name=name;
 
this.age=18;
 
this[1]=“ok”;
 
this[200]=“year”;
 
}
 
var user=new User(“user1”);
 
alert(user[1]);
Nach dem Login kopieren

Bitte beachten Sie im obigen Beispiel: Das Altersattribut kann nicht über dieses [1] abgerufen werden, und das Namensattribut kann nicht über dieses [0] abgerufen werden Die Indexmethode muss verwendet werden, um auf die Indexmethode zu verweisen, und es gibt keine Definition durch die Indexmethode. Sie muss auf normale Weise referenziert werden

3, Objektmethoden definieren

1) Drei Typen Für Objekte können in JS verschiedene Methoden definiert werden: private Methoden, Instanzmethoden und Klassenmethoden, ähnlich wie bei Java:

Private Methoden können nur innerhalb des Objekts verwendet werden

Instanzmethoden müssen danach verwendet werden das Objekt wird instanziiert

Klassenmethoden können direkt über den Klassennamen verwendet werden

Hinweis: Die Methodendefinition kann nicht über die oben erwähnte Indexmethode erfolgen.

2) Private Methoden definieren

Private Methoden müssen innerhalb des Konstruktorkörpers definiert werden und können nur innerhalb des Konstruktorkörpers verwendet werden.

Syntaxformat: function methodName(arg1,…,argN){ }

Zum Beispiel:

function User(name){
 
this.name=name;
 
function getNameLength(nameStr){
 
return nameStr.length;
 
}
 
this.nameLength=getNameLength(this.name);
 
}
Nach dem Login kopieren

3) Definieren Sie Instanzmethoden, Derzeit können auch zwei Methoden verwendet werden:

Prototyp-Methode, wird außerhalb des Konstruktors verwendet, Syntaxformat:

functionName.prototype.methodName=method;

oder

functionName.prototype.methodName=function(arg1,…,argN){};

Diese Methode wird innerhalb des Konstruktors verwendet, Syntaxformat:

this.methodName=method;

oder

this.methodName=function(arg1,…,argN){};

In der obigen Syntaxbeschreibung ist Methode eine externe Methode, die bereits vorhanden ist, und Methodenname muss Die definierte Methode eines Objekts bedeutet, dass einer Methode des Objekts direkt eine externe Methode zugewiesen wird.

以function(arg1,…,argN){}的方式定义对象方法是开发人员应该掌握的。

定义实例方法的一些例子:例子1

function User(name){
 
this.name=name;
 
this.getName=getUserName;
 
this.setName=setUserName;
 
}
 
function getUserName(){
 
return this.name;
 
}
 
Function setUserName(name){
 
this.name=name;
 
}
Nach dem Login kopieren

定义实例方法的一些例子:例子2

function User(name){
 
this.name=name;
 
this.getName=function(){
 
return this.name;
 
};
 
this.setName=function(newName){
 
this.name=newName;
 
};
 
}
Nach dem Login kopieren

定义实例方法的一些例子:例子3

function User(name){
 
this.name=name;
 
}
 
User.prototype.getName=getUserName;
 
User.prototype.setName=setUserName();
 
function getUserName(){
 
return this.name;
 
}
 
Function setUserName(name){
 
this.name=name;
 
}
Nach dem Login kopieren

定义实例方法的一些例子:例子4

function User(name){
 
this.name=name;
 
}
 
User.prototype.getName=function(){
 
return this.name;
 
};
 
User.prototype.setName=function(newName){
 
this.name=newName;
 
};
Nach dem Login kopieren

4)定义类方法

类方法需要在构造函数外面定义,可以直接通过构造函数名对其进行引用。

语法格式:

functionName.methodName=method;

或者

functionName.methodName=function(arg1,…,argN){};

例子:

function User(name){
 
this.name=name;
 
}
 
User.getMaxAge=getUserMaxAge;
 
function getUserMaxAge(){
 
return 200;
 
}
Nach dem Login kopieren

或者

User.getMaxAge=function(){return 200;};

alert(User.getMaxAge());

4,属性与方法的引用

1)从可见性上说:

私有属性与方法,只能在对象内部引用。

实例属性与方法,可以在任何地方使用,但必须通过对象来引用。

类属性与方法,可以在任何地方使用,但不能通过对象的实例来引用(这与Java不同,在Java中静态成员可以通过实例来访问)。

2)从对象层次上说:

与Java bean的引用类似,可以进行深层次的引用。

几种方式:

简单属性:obj.propertyName

对象属性:obj.innerObj.propertyName

索引属性:obj.propertyName[index]

对于更深层次的引用与上面类似。

3)从定义方式上说:

通过index方式定义的属性,必须通过index方式才能引用。

通过非index方式定义的属性,必须通过正常的方式才能引用。

另外注意:对象的方法不能通过index方式来定义。

5,属性与方法的动态增加和删除

1)对于已经实例化的对象,我们可以动态增加和删除它的属性与方法,语法如下(假定对象实例为obj):

动态增加对象属性

obj.newPropertyName=value;

动态增加对象方法

obj.newMethodName=method或者=function(arg1,…,argN){}

动态删除对象属性

delete obj.propertyName

动态删除对象方法

delete obj.methodName

2)例子:

function User(name){
 
this.name=name;
 
this.age=18;
 
}
 
var user=new User(“user1”);
 
user.sister=“susan”;
 
alert(user.sister);//运行通过
 
delete user.sister;
 
alert(user.sister);//报错:对象不支持该属性
 
user.getMotherName=function(){return “mary”;}
 
alert(user.getMotherName());//运行通过
 
delete user.getMotherName;
 
alert(user.getMotherName());//报错:对象不支持该方法
Nach dem Login kopieren

四,总结

1,自定义对象机制,是JS最为吸引人的机制之一,对于C++和Java程序员而言,这简直太棒了!

2,对象创建存在两种方式:对象初始化器和构造函数。

3,对象属性和方法,具有可见性的约束,不同可见性的属性和方法,其定义方式也不一样。

以上这篇基于js对象,操作属性、方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多基于js对象,操作属性、方法详解相关文章请关注PHP中文网!

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