Erfahren Sie, wie Sie die Methoden und Prototypobjekte eines Objekts erstellen

Viele Freunde werden beim Erlernen des Frontends auf Schwierigkeiten stoßen. Ich hoffe, Sie lernen geduldig.

1. Methode zum Erstellen eines Objekts

1. Factory-Muster

Erstellen Sie ein Objekt in einer Funktion und geben Sie dieses an Fügen Sie dem Objekt Eigenschaften hinzu und geben Sie dann das Objekt in dieser Funktion zurück. Rufen Sie diese Funktion außerhalb einer Funktion auf, um eine Instanz des Objekts zu erstellen.

function createPerson(name,age,job){
   var o=new Object();//在函数内部创建一个对象
   o.name=name;
   o.age=age;
   o.job=job;
   o.sayName=function(){
     alert(this.name);
  };
  return o;//在函数内部返回这个对象
}

var person1=createPerson("xiaowang","22","workers");//在函数外部创建对象的实例，不用new
var person1=createPerson("xiaoliu","22","workers");

Problem: Das Objekterkennungsproblem ist nicht gelöst (der Typ eines Objekts kann nicht bekannt sein)

2. Konstruktormuster (kann zum Erstellen von Objekten bestimmter Typen verwendet werden)

function Person(name,age,job){//注意构造函数开头的字母应该大写
//构造函数中使用this
   this.name=name;
   this.age=age;
   this.job=job;
   this.sayName=function(){
   alert(this.name);
   }
}
var person1=new Person("xiao",22,"tech");//使用new创建实例
var person2=new Person("li",32,"sin");

Unterschiede zum Factory-Muster:

(1) Objekte ohne Anzeige erstellen

(2) Eigenschaften und Methoden direkt dem Objekt zuweisen, auf das hierdurch verwiesen wird

(3) Es gibt keine Return-Anweisung

Beide Instanzen haben ein Konstruktorattribut, das auf Person zeigt.

Der Konstruktor kann identifizieren, um welche Art von Objekt es sich bei seiner Instanz handelt, und es ist zuverlässiger, den Operator „instanceof“ zu verwenden.

F: Was ist der Unterschied zwischen Konstruktor und gewöhnlicher Funktion?

Antwort: Der Konstruktor wird mit dem neuen Operator aufgerufen, und die normale Funktion wird ohne new aufgerufen.

Problem mit dem Konstruktor: Jede Methode muss auf jeder Instanz neu erstellt werden.

3. Prototypmuster

Platzieren Sie die von Objektinstanzen gemeinsam genutzten Eigenschaften und Methoden nicht im Konstruktor, sondern im Prototypobjekt.

function Person(){  };//构造函数什么也不设置
Person.prototype.name="xiao";//全部都放在原型对象上
Person.prototype.age=22;
Person.prototype.job="stu"'
Person.prototype.sayName=function(){
   alert(this.name);
}

var person1=new Person();
var person2=new Person();
console.log(person1.sayName==person2.sayName);//true

Probleme mit dem Prototypmuster: Bei Attributen, die Anwendungstypwerte enthalten, werden aufgrund der gemeinsamen Nutzung des Prototypmusters auch die Attributwerte anderer Instanzen geändert, wenn der Referenztypwert einer Instanz geändert wird geändert werden.

function Person={}
Person.prototype={
   constructor:Person,
   name:"Nick",
   age:29,
   friends:['a','b'];//引用类型的值
   sayName:function(){
     alert(this.name);
  }
}
var  person1=new Person();
var  person2=new Person();
//想要改变person1实例的friends属性
person1.friends.push("c);
alert(person1.friends);//["a","b","c"]
alert(person2.friends);//["a","b","c"];
alert(person1.friends==person2.friends);//true;

4. Kombinationsmuster (Konstruktor und Prototyp)

Der Konstruktor definiert die Eigenschaften der Instanz, der Prototyp definiert Methoden und gemeinsame Eigenschaften.

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
}

Person.prototype={
  constructor:Person,
  sayname:function(){
    alert(this.name)
 }
}

2. Verständnis von Prototypobjekten

1. Verständnis

Jede Konstruktorperson hat ein Prototypattribut, das auf ihr Prototypobjekt zeigt, das heißt, das Prototypobjekt ist Person. Prototyp; und jedes Prototypobjekt verfügt über eine Konstruktormethode, die auf die Konstruktorperson verweist. Darüber hinaus verfügt die durch den Aufruf des Konstruktors erstellte Instanz person1 über ein [[Prototype]]-Attribut (_proto_), das ebenfalls auf das Prototypobjekt des Konstruktors verweist. Beachten Sie, dass die Verbindung zwischen der Instanz und dem Prototypobjekt des Konstruktors erfolgt ! Und Instanzen haben nichts mit Konstruktoren zu tun.

isPrototypeOf()-Methode: Erkennt, ob das Prototypobjekt und die Instanz eine Prototyp-Verbindungsbeziehung haben

Person.prototype.isPrototypeOf(person1);//true

Object.getPrototypeOf()-Methode: Diese Methode gibt [ [Der Wert des Prototyps]] gibt das Prototypobjekt einer Instanz zurück.

Object.getPrototypeOf(person1);// Person.prototype

Hinweis: Stellen Sie sicher, dass Sie zuerst das Prototypobjekt des Konstruktors festlegen und dann eine neue Instanz erstellen. (Dynamische Natur des Prototyps)

Beispiel:

function Person(){ }
    var friend=new Person();
    Person.prototype={
        constructor:Person,
        name:'Nick',
        age:29,
        job:'student',
        sayName:function () {
            alert(this.name);
        }
    };
    friend.sayName();//error

In diesem Fall wird der Prototyp von Person umgeschrieben: S.157

2. Attributzugriff

Frage: Welche Rolle spielt die Referenz auf den Prototyp ([[Prototyp]])?

Antwort: Beim Verweisen auf die Eigenschaften eines Objekts wird der zugrunde liegende [[Get]]-Vorgang ausgelöst. Für die Standardoperation [[Get]] besteht der erste Schritt darin, zu prüfen, ob das Objekt selbst über dieses Attribut verfügt. Wenn nicht, ist die [[Prototype]]-Kette hilfreich. Wenn das Objekt selbst nicht über das erforderliche Attribut verfügt, wird die Suche entlang der gesamten Prototypenkette fortgesetzt. Wenn es gefunden wird, wird der Wert des Attributs zurückgegeben. Wenn es nicht gefunden wird, wird undefiniert zurückgegeben.

für...in... Das Prinzip des Durchlaufens von Objekten ähnelt der Suchkette [[Prototyp]]. Wenn mit dem in-Operator überprüft wird, ob eine Eigenschaft in einem Objekt vorhanden ist, wird auch die gesamte Prototypenkette des Objekts überprüft (unabhängig davon, ob die Eigenschaft enumeriert ist oder nicht).

[[Prototype]] Die Spitze der Prototypkette wird auf das Object.prototype-Objekt gesetzt.

3. Festlegen und Abschirmen von Attributen

myObject.foo="bar";//设置属性foo

Schritt 1: Wenn im myObject-Objekt ein Attribut foo vorhanden ist, ändern Sie foo direkt in „bar“; Das foo-Attribut ist sowohl in myObject als auch in der Prototypenkette vorhanden. Das foo-Attribut in myObject blockiert alle foo-Attribute in der Prototypenkette.

Schritt 3: Wenn im myObject-Objekt kein foo-Attribut vorhanden ist, wird nach oben gesucht die Prototypenkette, die in myObject vorhanden ist;

3.1 Wenn das foo-Attribut in der oberen Ebene der [[Prototype]]-Kette vorhanden ist und nicht als schreibgeschützt (schreibbar: false) markiert ist, dann hinzufügen es direkt auf myObject Ein foo-Attribut, das ein abgeschirmtes Attribut ist;

var myObject={ };
myObject.prototype={
   foo:"c"
};
myObject.foo="b";
console.log(myObject.foo);//b

3.2 Wenn das foo-Attribut als schreibgeschützt markiert ist, können vorhandene Attribute oder abgeschirmte Attribute nicht auf myObject geändert werden. Im strikten Modus wird ein Fehler ausgegeben.

var myObject={

};
myObject.prototype={
  foo:"c"            
};
Object.defineProperty(myObject,"foo",{
    writable:false
})
myObject.foo="b";
console.log(myObject.foo);//undefined

3.3 Wenn foo auf [[Prototype]] existiert und ein Setter ist, wird dieser Setter definitiv aufgerufen. foo wird weder zu myObject hinzugefügt, noch wird der Setter dieser Eigenschaft neu definiert.

var myObject={ };
myObject.prototype={
 //foo是一个setter
  set foo(val){
     alert(this.val);
  }
}
myObject.foo="f";
console.log(myObject.foo)//f  foo还是原来的setter函数，没有被修改

如果在3.2和3.3这两种情况下，则不能使用=操作符在赋值，而是使用Object.defineProperty(...)方法来添加，

step4:如果myObject对象和原型链上都没有foo属性的时候，直接添加到myObject上。

var myObject={ };
myObject.prototype={
   foo:"c"
};
myObject.foo="b";
console.log(myObject.foo);//b

4.属性的修改

对象实例可以修改对象原型的属性值吗？

答：分两种情况：一：当原型里的属性是值类型的话，不会被修改；

 function ClassA(){};
   ClassA.prototype.num=4;//num为值类型
   const a=new ClassA();
   a.num=3;
   const b=new ClassA();
   console.log(b.num);

二：当原型里的属性是引用类型的话，则会被修改。

function ClassA(){};
   ClassA.prototype.obj={
       num:4//num在object中，是引用类型
   };
   const a=new ClassA();
   a.obj.num=3;
   const b=new ClassA();
   console.log(b.obj.num);

 相关推荐：

JavaScript 基于原型的对象（创建、调用）_js面向对象

 js如何创建对象？js中创建对象的方法（附代码）

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie die Methoden und Prototypobjekte eines Objekts erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!