Heim > Artikel > Web-Frontend > Beispiele zur Erläuterung relevanter Kenntnisse über Objektoperationen in JavaScript_Grundkenntnisse
Vom Array zum Objekt
var myarr = ['red','blue','yellow','purple']; myarr;// ["red","blue","yellow","purple"] myarr[0];//"red" myarr[3];//"purple'
Jeder ist mit Arrays vertraut. Wir können verstehen, dass ein Schlüssel einem Wert entspricht und dieser Schlüssel bereits im Array voreingestellt ist (wie im obigen Code sind seine Schlüssel 0, 1, 2, 3 und die Werte sind). rot, blau, gelb, lila).
Dann kann ein Objekt als Array benutzerdefinierter Schlüssel verstanden werden. Schauen Sie sich den folgenden Code an
var hero ={ breed: 'Turtle', occupation:'Ninja' };
Aus dem obigen Code können wir Folgendes verstehen:
1. Der Name des Objekts ist hero.
2. Anders als beim Array wird das Symbol „{“ anstelle von „[“
verwendet
3. Die Attribute des Objekts (z. B. Rasse und Beruf) werden durch die Symbole ','
getrennt
4. Die Syntax von Schlüssel und Wert lautet KEY:VALUE
Es ist auch wichtig zu beachten, dass die Ergebnisse unabhängig davon, ob das Attribut (d. h. der Schlüssel) in doppelte Anführungszeichen, einfache Anführungszeichen oder keine Anführungszeichen gesetzt wird, gleich sind. Der folgende Code ist derselbe
var obj={a:1,b:2}; var obj={'a':1,'b':2}; var obj={"a":1,"b":2};
Die empfohlene Schreibweise besteht darin, Attribute nicht in Anführungszeichen zu setzen. Es sei denn, der Attributname ist ein spezielles Symbol, beispielsweise eine Zahl, oder enthält Leerzeichen usw.
Dieser Artikel ist sehr einfach. Es ist zu beachten, dass das Symbol zum Definieren eines Arrays [] ist, während das Symbol zum Definieren eines Objekts {}
ist
Element, Attribut, Methode
Wenn wir Arrays lernen, können wir sagen, dass das Array Elemente enthält. Wenn wir über Objekte sprechen, können wir die Aussage ändern
var animal={ name: 'dog', run:function(){ alert("running"); } }
name ist eine Eigenschaft und run selbst ist eine Funktion. In diesem Objekt nennen wir es eine Methode.
Zugriff auf die Eigenschaften eines Objekts
Es gibt zwei Möglichkeiten, auf die Eigenschaften eines Objekts zuzugreifen.
Verwenden Sie die Form eines Arrays wie: animal['name']
Verwenden Sie den Punkt, um auf folgendes zuzugreifen: animal.name
Die erste Zugriffsmethode ist für jede Situation geeignet. Wenn das Attribut jedoch einen ungültigen Namen hat, wie z. B. das im vorherigen Abschnitt erwähnte Attribut „1name“ oder „mein Name“, ist es falsch, mit Punkten darauf zuzugreifen. Dies sollte beachtet werden.
Schauen wir uns ein Beispiel für den Objektzugriff im Detail an
var book = { name:'Javascript Fundation', published:jixie. author:{ firstname:'nicholas', lastname:'xia' } };
1. Rufen Sie das Vorname-Attribut des Autorenobjekts
ab
book.author.firstname //nicholas
2. Rufen Sie das Nachname-Attribut des Autorenobjekts ab. Versuchen wir es mit einer anderen Schreibweise
book['author']['lastname'] //xia
Wir können auch gemischte Zugriffsmethoden verwenden
book.author['lastname'] oder book['author'].lastname sind allesamt gültige Methoden und sollten flexibel verwendet werden
Wenn die Eigenschaften dynamisch sind, wird im Allgemeinen die Array-Methode für den Zugriff auf das Objekt verwendet.
var key ='lastname' book.author[key];//xia
Methode des Objekts aufrufen
var hero = { breed: 'Turtle', occupation: 'Ninja', say: function() { return 'I am ' + hero.occupation; } } hero.say();
Die Methode zum Zugriff auf Objekte ist sehr einfach, nur ein bisschen reicht aus, aber Sie können auch ein Array verwenden, was seltsam aussieht
Wie zum Beispiel hero['say']();
Diese Schreibweise wird nicht empfohlen, wenn Sie auf Objekte zugreifen.
Eigenschaften und Methoden ändern
Da Javascript eine dynamische Sprache ist, können die Eigenschaften und Methoden von Objekten jederzeit geändert werden. Siehe das Beispiel unten
var hero={};
Held ist ein leeres Objekt.
typeof hero.breed;//undefined
Es zeigt, dass das Heldenobjekt nicht über das Rasseattribut verfügt
Als nächstes können Sie Eigenschaften und Methoden hinzufügen
hero.breed = 'turtle'; hero.name = 'Leonardo'; hero.sayName = function() {return hero.name;};
Aufrufmethode
hero.sayName();//Leonardo
Attribut löschen
delete hero.name;//true hero.sayName();//方法失败
Dies
var hero = { name : 'Rafaelo', sayName : function(){ return this.name; } } hero.sayName();//Rafaelo
Die Bedeutung dieses Objekts wird später besprochen.
Konstruktorfunktionen
Eine andere Möglichkeit, ein Objekt zu erstellen, ist die Verwendung eines Konstruktors. Schauen Sie sich einfach das Beispiel an
function Hero(){ this.name ='Refaelo'; } var hero = new Hero(); hero.name;//Refaelo
Der Vorteil dieser Methode besteht darin, dass Sie beim Erstellen eines Objekts Parameter übergeben können
function Hero(name){ this.name = name; this.whoAreYou = function(){ return this.name; } } var hi = new Hero('nicholas'); hi.whoAreYou();//nicholas
Achten Sie darauf, den neuen Operator nicht wegzuwerfen. . .
Globales Objekt
Wir haben in den letzten Abschnitten darüber gesprochen, dass wir versuchen sollten, globale Variablen zu vermeiden. Als wir etwas über Objekte lernten, haben wir uns angesehen, was mit globalen Variablen passiert Variablen. Das Objekt hat eine Eigenschaft. Wenn die Hostumgebung ein Webbrowser ist, ist die globale Variable window.
Wenn wir var a = 1;
definieren
Wir können es so verstehen:
Eine globale Variable a,
Als Attribut a von window können wir window.a oder window['a']
aufrufen
Schauen wir uns die vordefinierte Funktion parseInt('123 m') an. Wir können sie als window.parseInt('123 m');
schreiben
Konstruktorattribut
Nachdem das Objekt erstellt wurde, wird im Hintergrund ein verstecktes Attribut erstellt, der Konstruktor.
h2.constructor;//Hero(name)
Weil das Attribut des Konstruktors ein Verweis auf die Funktion ist. Wenn es Ihnen egal ist, woraus das h2-Objekt erstellt wird, sondern Sie nur daran interessiert sind, ein neues Objekt ähnlich wie h2 zu erstellen, verwenden Sie die folgende Schreibweise
var h3 = h2.constructor('Nicholas'); h3.name ;//Nicholas
我们来看看如下写法的意思
var o = {}; o.constructor;//Object() typeof o.constructor;//"functions"
其实就是隐藏了 new Object() ,更深的层次应用以后几个教程在说明。
instanceof 操作符
用instanceof来判断对象是否是指定的构造函数创建的。
function Hero(){ } var h = new Hero(); var o = {}; h instanceof Hero;//true h instanceof Object;//false o instanceof Object;//true
要注意的是instanceof 后面的是个引用 不是个函数 如错误写法 h instanceof Hero();//错误
函数返回对象
可以用构造函数来创建个对象,也可以通过普通函数返回对象来创建对象
function factory(name){ return { name:name }; }
用这个方法创建对象
var o = factory('one'); o.name
让我们接下来看看比较少见的构造函数返回对象的例子
function C(){ this.a = 1; return {b:2}; } var c2 = new C(); typeof c2.a //undefined c2.b; // 2
说明了 并不返回this了 而是返回了对象{b:2}。。这点要注意
传递对象
如果传递一个对象到函数里,那么传递的是个引用。如果改变了这个引用,也就会改变原始的对象。
下面是个对象赋值的例子
var original = {name:'nicholas'}; var copy =original; copy.name;//'nicholas'; copy.name = 'Jason'; original.name;// 'Jason';
修改了copy的属性name 也就等于修改了original的属性name
对象传参到函数中,也是同样的。
function modify(o){ o.name ='Jason' } var original={name:'nicholas'}; modify(original); original.name;//Jason
对象的比较
两个对象的比较如果是true的话,那么他们就是同一个对象的引用。
var fido ={breed:'dog'}; var benji ={breed:'dog'}; benji===fido; //false; benji==fido; //false;
以上的代码都不是同一引用,所以都是false