Heim > Web-Frontend > js-Tutorial > Objektorientierte Javascript-Artikel (1)

Objektorientierte Javascript-Artikel (1)

黄舟
Freigeben: 2017-02-07 14:30:57
Original
914 Leute haben es durchsucht

1 Das Konzept des Ausdrucks

Allgemeines Konzept: Alle zurückgegebenen Codeblöcke können zu Ausdrücken werden. Beispiel:

var a=0;var a, b;
a = 0;这个表达式的返回值为0;
b = a;这个表达式的返回值为a;
Nach dem Login kopieren

Der Rückgabewert des Zuweisungsausdrucks ist = Der Wert auf dem richtig;


2 Objektorientiertes Konzept:

Eine Programmieridee: Versuchen Sie bei der Lösung eines Problems zunächst, ein Objekt zu finden, das bei der Lösung von Problemen hilft .

Vorteile:

Identität: Scheduler;

Hohe Code-Flexibilität;

Hohe Wartbarkeit;

Hohe Skalierbarkeit;


Nachteile:

Es kann die Komplexität des Codes erhöhen

Relativ schwer zu lesen Gut


3 Prozessorientiert:

Identität: Ausführender

Sequenz: Unter normalen Umständen kann es nicht gestört werden, von oben bis zum nächsten Schritt. Ausführung in einem Schritt.


4 Merkmale der Javascript-Sprache:

Schwacher Typ

Multiparadigma

Objektbasierte Sprache: In js ist alles ein Objekt

Prototypbasierte Sprache


5 Das Konzept des Prototyps

Der sogenannte Prototyp ist eine Funktion. Das Objekt, auf das verwiesen wird Prototypattribut

Solange eine Funktion deklariert ist, existiert der Prototyp

function foo(){};
foo.prototype['name']='ksir';
var f = new foo();
console.log(f.constructor ===foo.prototype.constructor);
Nach dem Login kopieren

Wenn jedes von der Funktion erstellte Objekt diesen Prototyp teilt, d. h. Alle oben erstellten Objekte können direkt darauf zugreifen alle Mitglieder (Eigenschaften und Methoden) auf dem Prototyp;
(Das dynamische Merkmal von Objekten besteht darin, dass Objekte dynamisch mit . oder [] erstellt werden können); Die Essenz des Prototyps

Die Essenz des Prototyps ist das Objekt

Derselbe Logikcode existiert im Konstruktor, und wenn das Objekt erstellt wird, wird die Codelogik in der Funktion verwendet kopiert, und die Methoden im Konstruktor werden extrahiert und an einem öffentlichen Ort abgelegt. Auf diesen öffentlichen Ort können die vom Konstruktor erstellten Objekte zugreifen.

Vorteile: Datenaustausch ähnlicher Objekte realisieren

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.talk = function(){
        console.log('hello');
     }
 }
 var kangfeng = new Person('小强',21,'男');
 var xiaoming = new Person('小明',20,'女');
 var xiaohong = new Person('小红','19','女');
 kangfeng.talk();
 xiaoming.talk();
 xiaohong.talk();
 //思考:这三个儿女的talk方法是否一样?
 console.log(xiaoming.talk === kangfeng.talk);
 console.log(xiaohong.talk === xiaohong.talk):
 //这三个对象的方法是不一样,相互独立的
 Person.prototype.addfu(){
    console.log('给原型添加一个函数');
}
Nach dem Login kopieren
7 Möglichkeiten, Prototypen zu erhalten

Nach Funktion:

Nach Objekt:

<fnName>.prototype;
Nach dem Login kopieren


8 Die Komponenten des Objekts

object.__proto__;
//两个下划线
Nach dem Login kopieren
Das Objekt selbst; sein Prototyp

Jedes Objekt hat das __proto__-Attribut, also Every Objekt hat einen Prototyp

Der Typ des Objekts ist der Name des Konstruktors

Math.__proto__===object.prototype;
Nach dem Login kopieren


9 Prototypattribute und Prototypobjekte

Prototypattribut: Aus der Perspektive einer Funktion kann der Prototyp als Prototypattribut der Funktion bezeichnet werden

Prototypobjekt: Aus der Perspektive des Objekts kann der Prototyp als Prototypobjekt bezeichnet werden das Objekt

10 __proto__ Standard für doppelte Unterstreichung


__proto__ Dieser Standard für doppelte Unterstreichungen ist kein W3C-Standard, diese Attribute sind keine Standardeigenschaften.

Es gibt Kompatibilitätsprobleme. Wenn wir das Prototyp-Attribut nicht durch doppelte Unterstriche erhalten können, müssen wir es durch die Funktion

11 So schreiben Sie den Standardkonstruktor // Welche Attribute sind erforderlich Im Konstruktor gespeichert, welche Attribute extrahiert und auf dem Prototyp platziert werden müssen
function getPrototype(obj){
    //判断浏览器是否兼容__proto__属性
    //return !!obj.__proto__? obj.__proto__:obj.constructor.prototype;
    if(obj.__proto__){
    //支持
        return obj.__proto__;
    }else{
        //获取该对象的构造函数
        //在通过此函数的prototype属性获取其原型对象
        return obj.constructor.prototype;
    }
}
function A(){};
var a = A();
console.log(getPrototype(a).constructor);
//如果我们的函数中有if else return结构,我们可以用3元运算符来优化.
Nach dem Login kopieren


12 Hinweise

function B(name){};
B.prototype.name = &#39;tom&#39;;
var tom = new B;console.log(tom.name);
var jim = new jim;console.log(jim.name);
//结果都是tom
//所以和具体某个对象息息相关的称为私有属性,这写属性都必须写在构造函数内,那些共享的属性(每个对象都具有的属性,不会随对象变化而变化,
比如说一些方法(对象的行为)--公有属性)就可以定义在原型属性中.
//一般情况下,构造函数的方法放原型上
//不提倡在js原生对象上进行扩展成员
//坏处,会导致原生对象过于庞大,累赘,影响性能
Nach dem Login kopieren

Konstruktorzusatz Methoden werden im Allgemeinen dem Prototyp hinzugefügt. Der Einfachheit halber wird die Methode im Allgemeinen in Form eines Objekts hinzugefügt. Vergessen Sie nicht, den Konstruktornamen hinzuzufügen Form von Schlüssel-Wert-Paaren.


13 Eigenschaften von Prototypen

Dynamik:

Das Erweitern von Mitgliedern auf den Prototyp spiegelt direkt das erstellte Objekt wider

Das Ersetzen des Prototypobjekts spiegelt nicht das erstellte Objekt wider, sondern wirkt sich direkt auf die später erstellten Objekte aus

Einzigartigkeit

Alle Objekte, die von denselben Funktionsobjekten erstellt wurden, teilen dasselbe Prototypobjekt

Unveränderlichkeit:

Objekte können keine Mitglieder des Prototypobjekts ändern

Vererbung:

Alle Objekte werden davon geerbt

Das Obige ist der Inhalt des objektorientierten Javascript-Artikels (1). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!

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