JS objektorientiert (3) Objektklasse, statische Eigenschaften, Schließungen, private Eigenschaften, Verwendung von Call und Apply, drei Implementierungsmethoden für Vererbung_Javascript-Fähigkeiten

1.Objektklasse

In JS ist Object die Basisklasse aller Klassen. Wenn Sie die Object-Klasse zum Erstellen eines benutzerdefinierten Objekts verwenden, müssen Sie keinen Konstruktor (Konstruktor, Prototyp, hasOwnProperty(property)) definieren

var per = new Object();
per.name = 'zhangsan';
per.age = ;
alert(per.name + per.age);

Wir möchten eine Objektvariable in das Programm aufnehmen, sofern diese eine große Datenmenge speichern kann. Zu diesem Zeitpunkt können wir die Verwendung der Object-Klasse in Betracht ziehen. Die Object-Klasse vermeidet die Definition eines Konstruktors. Eine weitere häufig verwendete Eigenschaft unter der Object-Klasse: hasOwnProperty

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert('具有email');
}else{
alert('无email');
}

2. Statische Attribute

In einigen objektorientierten Sprachen können Sie das Schlüsselwort static verwenden, um statische Eigenschaften oder statische Methoden einer Klasse zu definieren, die in JS simuliert werden können.

Syntax:

Klassenname.Attributname

Klassenname.Attribute=function(){}

function Person(){
}
Person.count = ;
var p = new Person();
Person.count++;
var p = new Person();
Person.count++;
var p = new Person();
Person.count++;
alert(Person.count);

Statische Eigenschaften und statische Methoden hinzufügen:

function Person(){
Person.count++; //静态属性
Person.getCount=function(){ //静态方法
alert('当前共有' + Person.count + '个人');
}
}
Person.count = ;
var p = new Person();
var p = new Person();
var p = new Person();
Person.getCount();

3. Schließung

Konzept: Der sogenannte Abschluss bezieht sich auf einen Ausdruck (normalerweise eine Funktion), der viele Variablen und eine an diese Variablen gebundene Umgebung hat, sodass diese Variablen auch Teil des Ausdrucks sind.

Stellen Sie eine Frage:

function display(){
var i=; 
}
display();
//在这里，想访问局部变量i

In der globalen Welt kann nicht auf die lokale Variable i zugegriffen werden, da der Gültigkeitsbereich unterschiedlich ist. Nach Ausführung der Anzeigefunktion wird die lokale Variable i wiederverwendet. Die Funktion des Abschlusses: „Auf lokale Variablen zugreifen“ und „verhindern, dass der von den Variablen belegte Speicher freigegeben wird“

//例
function fn(){
function fn(){
alert('hello');
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();

Durch Beispiel 1 wissen wir, dass eine Variable auf die erste Adresse einer Funktion zeigen kann und eine Funktion auch die erste Adresse einer anderen Funktion zurückgeben kann.

//例
function fn(){
var i = ;
function fn(){
alert(i);
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();

Aus Beispiel 2 wissen wir: Verwenden Sie eine Ablehnungsfunktion, um die Variable i einzuschließen, damit der Speicher der lokalen Variablen i nicht zurückgefordert wird.

//例
function fn(){
var i = ;
function fn(){
alert(i++);
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();
test();
test();

Da in Beispiel 3 die Erinnerung an i niemals zurückgefordert wird, beträgt der Wert von i bei jedem Aufruf von fn2 +1. Das Ergebnis der Operation ist, dass 10, 11 und 12 angezeigt werden.

Abschlussprinzip: In Beispiel 3 gibt es drei Bereiche: globaler Bereich, fn1-Bereich, fn2-Bereich. Es gibt test=fn1() im globalen Bereich. Tatsächlich entspricht dieser Satz test=fn2. Es gibt var i=10 und return fn2 im Fn1-Bereich und Alert(i++) im Fn2-Bereich. Wenn test=fn1() im globalen Bereich ausgeführt wird, zeigt test auf den Bereich von fn2. Zu diesem Zeitpunkt ist i unter dem Bereich fn2 durch den globalen Bereich gebunden, i ist nicht definiert unter fn2. Also habe ich den oberen Bereich für i unter fn2 nachgeschlagen und var i=10 unter fn1 gefunden. Daher hakt der globale Test das i von fn2 und das i von fn2 das i von fn1 ein, sodass fn1 nach der Ausführung nicht wiederverwendet wird.

4. Private Attribute

Im objektorientierten Denken können einige sensible Mitglieder, die nicht öffentlich gemacht werden sollen, als privat definiert werden, und diese Funktion kann in JavaScript simuliert werden.

Syntax:

function Person(p_name){
var name = p_name;
this.age
}

var: privat

dies: öffentlich

function Person(p_name,p_age){
this.name = p_name;
var age = p_age;
}
var p = new Person('zhangsan',);
alert(p.name);
alert(p.age);

Im obigen Beispiel möchten wir var verwenden, um private Member-Eigenschaften darzustellen, aber nach der Ausführung des Person-Konstruktors wird das Alter recycelt und kann nicht als Member-Eigenschaft verwendet werden.

function Person(p_name,p_age){
this.name = p_name;
var age = p_age;
this.setAge=function(a){
age = a;
}
this.getAge=function(){
return(age);
}
}
var p = new Person('zhangsan',);
p.setAge();
alert(p.getAge());

Die beiden Methoden this.setAge und this.getAge verwenden die lokale Variable „Alter“, sodass das Alter nicht recycelt wird.

Wenn es nur eine Set-Methode gibt, bedeutet dies, dass das Attribut ein schreibgeschütztes Attribut ist.

Wenn es nur eine Get-Methode gibt, bedeutet dies, dass das Attribut ein schreibgeschütztes Attribut ist.

5. Verwendung von Anruf und Bewerbung

Die Funktionen „Aufruf“ und „Anwenden“: Rufen Sie die aktuelle Funktion mit dem angegebenen Objekt auf. Die Funktionen von „call“ und „apply“ sind genau gleich, haben jedoch eine leicht unterschiedliche Syntax.

Syntax:

call([thisObj[,arg1[,arg2[,argN]]]])

Der erste Parameter: Auf wen zeigt dies, wenn die Funktion ausgeführt wird

: Geben Sie

apply([thisObj[,argArray]])

Der erste Parameter: Auf wen zeigt dies, wenn die Funktion ausgeführt wird

Der zweite Parameter: Array, der den Parametersatz angibt

In js haben Funktionen mehrere Aufrufformen:

Person(); //Person内的this指向window
var p=new Person(); //Person内的this指向p
per.Person(); //Person内的this指向per
function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
function speak(){
alert(this.name + this.age);
}
var p = new Person('zhangsan',);
//speak(); 这样调用this指向window
//p.speak(); p对象没有speak属性

Anruf verwenden und auf Anruf anwenden

function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
function speak(){
alert(this.name + this.age);
}
var p = new Person('zhangsan',);
speak.call(p);
speak.apply(p);

call und apply bewirken bei der Ausführung zwei Dinge: 1) Zeigen Sie innerhalb der Funktion auf den ersten Parameter 2) Rufen Sie die Funktion auf

Außerdem: Sie können das Problem auch so lösen:

P1.say=speak;

P1.say();

Diese Lösung unterscheidet sich grundlegend von der oben genannten Lösung:

Die obige Lösung besteht darin, die Speak-Funktion direkt aufzurufen, aber der Zeiger innerhalb der Funktion ändert sich.

Die folgende Lösung fügt dem p1-Objekt Attribute hinzu und das „Volumen“ des p1-Objekts wird größer.

Beispiel:

<script>
function fn(){
this.style.color='red';
}
function fn(){
this.style.fontSize='px';
}
window.onload=function(){
document.getElementById('btn').onclick=function(){
var div = document.getElementById('div');
fn.call(div);
fn.apply(div);
};
};
</script>
<div id='div'>hello javascript</div>
<input type='button' id='btn' value='确定'>

6.继承的三种实现方法

概念：在有些面向对象语言中，可以使用一个类（子类）继承另一个类（父类），子类可以拥有父类的属性和方法，这个功能可以在js中进行模拟。

三种方法：

第一种：扩展Object方法

Object.prototype.方法=function(父类对象){
for(var i in 父类对象){
this[i] = 父类对象[i];
}　
};

举例说明：

Object.prototype.ext=function(parObject){
//循环遍历父类对象所有属性
for(var i in parObject){
//为子类对象添加这个遍历到的属性
//它的值是父类对象这个属性的属性值
this[i] = parObject[i];
}
}
function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no){
this.no=p_no;
this.say=function(){
alert(this.no+this.name_this.age);
}
}
var stu = new Student();
stu.ext(new Person('xiaoqiang',));
stu.speak();
stu.say();

第二种：使用call和apply方法

语法：

父类构造器.call(this,.......);

function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no,p_name,p_age){
this.no=p_no;
this.say=function(){
alert(this.name+this.age+this.no);
}
Person.call(this,p_name,p_age);
}
var stu = new Student(,'zhagsan',);
stu.speak();
stu.say();

第三种：原型继承

语法：

子类.prototype = new 父类();

function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no){
this.no=p_no;
this.say=function(){
alert(this.name+this.age+this.no);
}
}
Student.prototype = new Person('wangwu',);
var stu = new Student();
stu.speak();
stu.say();

以上内容给大家介绍了JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法，希望对大家有所帮助！