Heim Web-Frontend js-Tutorial Lernen Sie objektorientiertes Javascript und verstehen Sie Javascript-Objekte_Javascript-Fähigkeiten

Lernen Sie objektorientiertes Javascript und verstehen Sie Javascript-Objekte_Javascript-Fähigkeiten

May 16, 2016 pm 03:22 PM
javascript 对象

1. Programmiergedanken
Prozessorientiert: Das Programm konzentriert sich auf den Prozess und wird schrittweise von oben nach unten verfeinert. Es wird als eine Sammlung von Funktionsaufrufen betrachtet
Objektorientiert: Objekte dienen als Grundeinheit des Programms, und das Programm wird in Daten und zugehörige Operationen zerlegt
2. Klassen und Objekte
Klasse: eine abstrakte Beschreibung von Dingen mit den gleichen Eigenschaften und Merkmalen
Objekt: eine bestimmte Sache, die einem bestimmten Typ
entspricht 3. Drei Hauptmerkmale der Objektorientierung
Kapselung: Implementierungsdetails ausblenden und Code-Modularisierung erreichen
Vererbung: Erweitern Sie vorhandene Codemodule, um die Wiederverwendung von Code zu erreichen
Polymorphismus: Verschiedene Implementierungsmethoden von Schnittstellen, um eine Wiederverwendung von Schnittstellen zu erreichen
4. Objektdefinition: Eine Sammlung ungeordneter Attribute, deren Attribute Grundwerte, Objekte oder Funktionen umfassen können

//简单的对象实例
var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
    alert(this.name);
  }
Nach dem Login kopieren

5. Interne Attributtypen: Auf interne Attribute kann nicht direkt zugegriffen werden. ECMAScript5 setzt sie in zwei eckige Klammern und unterteilt sie in Datenattribute und Zugriffsattribute
[1] Das Datenattribut enthält einen Datenwertspeicherort , an dem der Wert gelesen und geschrieben werden kann. Datenattribute haben 4 Merkmale:
a. [[Konfigurierbar]]: Gibt an, ob das Attribut durch Löschen des Attributs neu definiert werden kann, ob die Eigenschaften des Attributs geändert werden können oder ob das Attribut als Accessor-Attribut geändert werden kann Objekt, der Standardwert ist true
b. [[Enumerable]]: Gibt an, ob Attribute über eine For-In-Schleife zurückgegeben werden können. Für direkt am Objekt definierte Attribute ist der Standardwert true
c, [[Schreibbar]]: Gibt an, ob der Wert des Attributs geändert werden kann. Für direkt am Objekt definierte Attribute ist der Standardwert true
d. [[Wert]]: Enthält den Datenwert dieses Attributs, liest ihn von dieser Stelle und speichert den neuen Wert an dieser Stelle. Direkt am Objekt definierte Eigenschaften, der Standardwert ist undefiniert
[2] Die Accessor-Eigenschaft enthält keinen Datenwert , sondern ein Paar Getter- und Setter-Funktionen (diese beiden Funktionen sind jedoch nicht erforderlich). Wenn die Accessor-Eigenschaft gelesen wird, wird die Getter-Funktion aufgerufen, die für die Rückgabe eines gültigen Werts verantwortlich ist. Wenn die Accessor-Eigenschaft geschrieben wird, wird die Setter-Funktion aufgerufen und der neue Wert übergeben. Diese Funktion ist dafür verantwortlich, zu entscheiden, wie um die Funktion zu handhaben. Accessor-Eigenschaften weisen die folgenden vier Merkmale auf:
a. [[Konfigurierbar]]: Gibt an, ob das Attribut durch Löschen des Attributs neu definiert werden kann, ob die Eigenschaften des Attributs geändert werden können oder ob das Attribut in ein Accessor-Attribut geändert werden kann. Direkt am Objekt definierte Eigenschaften, der Standardwert ist true
b. [[Enumerable]]: Gibt an, ob das Attribut über eine for-in-Schleife zurückgegeben werden kann. Der Standardwert ist true
c, [[Get]]: Funktion, die beim Lesen von Attributen aufgerufen wird. Der Standardwert ist undefiniert
d.[[Set]]: Funktion, die beim Schreiben von Attributen aufgerufen wird. Der Standardwert ist undefiniert
6. Interne Eigenschaften ändern: Verwenden Sie die Methode object.defineProperty() von ECMAScript5, die drei Parameter empfängt: das Objekt, in dem sich die Eigenschaft befindet, den Namen der Eigenschaft und ein Deskriptorobjekt
[Hinweis 1]IE8 ist die erste Browserversion, die die Methode Object.defineProperty() implementiert. Diese Version der Implementierung weist jedoch viele Einschränkungen auf: Diese Methode kann nur für DOM-Objekte verwendet werden und es können nur Accessor-Eigenschaften erstellt werden. Aufgrund der unvollständigen Implementierung wird die Verwendung der Object.defineProperty()-Methode in IE8
nicht empfohlen [Hinweis 2]Browser, die die Methode Object.defineProperty() nicht unterstützen, können [[Configurable]] und [[Enumerable]] nicht ändern
[1] Datenattribute ändern

//直接在对象上定义的属性,Configurable、Enumerable、Writable为true
var person = {
  name:'cook'
};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Greg'  
Nach dem Login kopieren
//不是在对象上定义的属性,Configurable、Enumerable、Writable为false
var person = {};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'

Nach dem Login kopieren
//该例子中设置writable为false,则属性值无法被修改
var person = {};
Object.defineProperty(person,'name',{
  writable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'  

Nach dem Login kopieren
//该例子中设置configurable为false,则属性不可配置
var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nichols'
delete person.name;
alert(person.name);//'Nicholas'
Nach dem Login kopieren

[Hinweis] Sobald eine Eigenschaft als nicht konfigurierbar definiert ist, kann sie nicht wieder in konfigurierbar geändert werden. Das bedeutet, dass Sie Object.defineProperty() mehrmals aufrufen können, um dieselbe Eigenschaft zu ändern, jedoch nachdem Sie dort configurable auf false gesetzt haben sind Einschränkungen

var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
//会报错
Object.defineProperty(person,'name',{
  configurable: true,
  value: 'Nicholas'
});
Nach dem Login kopieren

[2] Accessor-Eigenschaften ändern

//简单的修改访问器属性的例子
var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  get: function(){
    return this._year;
},
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year)//2005
alert(book.edition);//2
Nach dem Login kopieren

[Hinweis 1] Nur die Angabe von Getter bedeutet, dass das Attribut nicht geschrieben werden kann

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  get: function(){
    return this._year;
  },
});
book.year = 2005;
alert(book.year)//2004  
Nach dem Login kopieren

[Hinweis 2] Nur die Angabe von Setter bedeutet, dass die Eigenschaft nicht gelesen werden kann

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year);//undefined
Nach dem Login kopieren

[Ergänzung] Verwenden Sie zwei nicht standardmäßige Methoden zum Erstellen von Accessor-Eigenschaften: __defineGetter__() und __defineSetter__()

var book = {
  _year: 2004,
  edition: 1
};
//定义访问器的旧有方法
book.__defineGetter__('year',function(){
  return this._year;
});
book.__defineSetter__('year',function(newValue){
  if(newValue > 2004){
    this._year = newValue;
    this.edition += newValue - 2004;
  }
});
book.year = 2005;
alert(book.year);//2005
alert(book.edition);//2
Nach dem Login kopieren

7. Definieren Sie mehrere Eigenschaften: ECMAScript5 definiert eine Object.defineProperties()-Methode, mit der mehrere Eigenschaften gleichzeitig über Deskriptoren definiert werden können: First Das erste Objekt ist das Objekt, dessen Eigenschaften hinzugefügt und geändert werden sollen. Die Eigenschaften des zweiten Objekts entsprechen eins zu eins den Eigenschaften des ersten Objekts, das hinzugefügt oder geändert werden soll

var book = {};
Object.defineProperties(book,{
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  }
});
Nach dem Login kopieren

八、读取属性特性:使用ECMAScript5的Object.getOwnPropertyDescriptor()方法,可以取得给定属性的描述符。该方法接收两个参数:属性所在对象和要读取其描述符的属性名称,返回值是一个对象。
[注意]可以针对任何对象——包括DOM和BOM对象,使用Object.getOwnPropertyDescriptor()方法

var book = {};
Object.defineProperties(book,{
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  } 
});
var descriptor = Object.getOwnPropertyDescriptor(book,'_year');
alert(descriptor.value);//2004
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'undefined'

var descriptor = Object.getOwnPropertyDescriptor(book,'year');
alert(descriptor.value);//'undefined'
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'function'
Nach dem Login kopieren

以上就是关于javascript面向对象的详细内容介绍,希望对大家的学习有所帮助。

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Was ist das Request-Objekt in PHP? Was ist das Request-Objekt in PHP? Feb 27, 2024 pm 09:06 PM

Das Request-Objekt in PHP ist ein Objekt, das zur Verarbeitung von HTTP-Anfragen verwendet wird, die vom Client an den Server gesendet werden. Über das Request-Objekt können wir die Anforderungsinformationen des Clients abrufen, z. B. die Anforderungsmethode, die Anforderungsheaderinformationen, die Anforderungsparameter usw., um die Anforderung zu verarbeiten und zu beantworten. In PHP können Sie globale Variablen wie $_REQUEST, $_GET, $_POST usw. verwenden, um angeforderte Informationen zu erhalten, aber diese Variablen sind keine Objekte, sondern Arrays. Um Anfrageinformationen flexibler und bequemer bearbeiten zu können, können Sie dies tun

Wie konvertiere ich ein MySQL-Abfrageergebnisarray in ein Objekt? Wie konvertiere ich ein MySQL-Abfrageergebnisarray in ein Objekt? Apr 29, 2024 pm 01:09 PM

So konvertieren Sie ein MySQL-Abfrageergebnis-Array in ein Objekt: Erstellen Sie ein leeres Objekt-Array. Durchlaufen Sie das resultierende Array und erstellen Sie für jede Zeile ein neues Objekt. Verwenden Sie eine foreach-Schleife, um die Schlüssel-Wert-Paare jeder Zeile den entsprechenden Eigenschaften des neuen Objekts zuzuweisen. Fügt dem Objektarray ein neues Objekt hinzu. Schließen Sie die Datenbankverbindung.

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Was ist der Unterschied zwischen Arrays und Objekten in PHP? Was ist der Unterschied zwischen Arrays und Objekten in PHP? Apr 29, 2024 pm 02:39 PM

In PHP ist ein Array eine geordnete Sequenz, und auf Elemente wird über einen Index zugegriffen. Ein Objekt ist eine Entität mit Eigenschaften und Methoden, die über das Schlüsselwort new erstellt werden. Der Array-Zugriff erfolgt über einen Index, der Objektzugriff über Eigenschaften/Methoden. Es werden Array-Werte und Objektreferenzen übergeben.

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert

Was muss ich beachten, wenn eine C++-Funktion ein Objekt zurückgibt? Was muss ich beachten, wenn eine C++-Funktion ein Objekt zurückgibt? Apr 19, 2024 pm 12:15 PM

In C++ sind drei Punkte zu beachten, wenn eine Funktion ein Objekt zurückgibt: Der Lebenszyklus des Objekts wird vom Aufrufer verwaltet, um Speicherlecks zu verhindern. Vermeiden Sie baumelnde Zeiger und stellen Sie sicher, dass das Objekt nach der Rückkehr der Funktion gültig bleibt, indem Sie dynamisch Speicher zuweisen oder das Objekt selbst zurückgeben. Der Compiler optimiert möglicherweise die Kopiegenerierung des zurückgegebenen Objekts, um die Leistung zu verbessern. Wenn das Objekt jedoch anhand der Wertesemantik übergeben wird, ist keine Kopiegenerierung erforderlich.

See all articles