Heim > Web-Frontend > js-Tutorial > js kapselt die _new-Funktion und wie das neue Schlüsselwort implementiert wird (mit Codetest)

js kapselt die _new-Funktion und wie das neue Schlüsselwort implementiert wird (mit Codetest)

不言
Freigeben: 2018-08-13 10:30:09
Original
2354 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der js-Kapselung der _new-Funktion und der Methode zur Implementierung eines neuen Schlüsselworts (mit Codetest). Ich hoffe, dass er für Sie nützlich ist . hat geholfen.

1. Einleitung

Wie wir alle wissen: Was soll ich tun, wenn ich kein Objekt habe? Dann besorge dir ein neues!

Was macht das neue Schlüsselwort in JS, wenn wir ein Objekt neu erstellen?
Jetzt analysieren wir das interne Funktionsprinzip des neuen Schlüsselworts in nativem JS.

2. Original neu

Werfen wir zunächst einen Blick auf ein neues Objekt:

//创建Person构造函数,参数为name,age
function Person(name,age){
  this.name = name;
  this.age = age;
 }
//实例化对象小明
xm = new Person('xiaoming',18);
//打印实例化出来的对象小明
console.log(xm);
Nach dem Login kopieren

Druckergebnisse:


Wie Sie an den Druckergebnissen sehen können:

Wenn Sie ein Objekt mit dem neuen Schlüsselwort instanziieren, Zuerst wird ein leeres Objekt xm erstellt, und dieses leere Objekt enthält zwei Attribute namens und Alter, die jeweils den beiden Attributen im Konstruktor entsprechen. Zweitens können wir jetzt auch wissen, dass das instanziierte Objekt xm von Person.prototype geerbt wird Wir können zusammenfassen, was das neue Schlüsselwort intern bewirkt, wenn ein Objekt instanziiert wird. Tatsächlich führt das neue Schlüsselwort intern die folgenden drei Dinge aus (der bekannte Konstruktor ist Func):

  1. Erstellt ein leeres Objekt und lassen Sie das leere Objekt Func.prototype erben.

  2. Führen Sie den Konstruktor aus und verweisen Sie auf das neue Objekt, das gerade erstellt wurde.

  3. Gibt ein neues zurück object;

3. Encapsulation_new function

Wenn wir das interne Prinzip des neuen Schlüsselworts kennen, können wir eine _new-Funktion so kapseln, dass es kann für die gleiche Funktion wie das neue Schlüsselwort verwendet werden. Die Funktion

_new muss die folgenden Parameter übergeben:
Der erste Parameter: der Konstruktorfunktionsname Func;
Der zweite Parameter und die nachfolgenden Parameter: die Parameter des Konstruktors

function _new(){
  //1.拿到传入的参数中的第一个参数,即构造函数名Func
  var Func = [].shift.call(arguments);
  //2.创建一个空对象obj,并让其继承Func.prototype
  var obj = Object.create(Func.prototype);
  //3.执行构造函数,并将this指向创建的空对象obj
  Func.apply(obj,arguments)
  //4.返回创建的对象obj
  return obj
}
Nach dem Login kopieren

4. Testen Sie die _new-Funktion

Nach der Kapselung testen wir die gekapselte _new-Funktion, um zu sehen, ob sie dieselbe Funktion implementiert wie das native neue Schlüsselwort.

//创建Person构造函数,参数为name,age
function Person(name,age){
  this.name = name;
  this.age = age;
}

function _new(){
  //1.拿到传入的参数中的第一个参数,即构造函数名Func
  var Func = [].shift.call(arguments);
  //2.创建一个空对象obj,并让其继承Func.prototype
  var obj = Object.create(Func.prototype);
  //3.执行构造函数,并将this指向创建的空对象obj
  Func.apply(obj,arguments)
  //4.返回创建的对象obj
  return obj
}

xm = _new(Person,'xiaoming',18);

console.log(xm);
Nach dem Login kopieren

Testergebnisse:



Aus den Testergebnissen können wir ersehen, dass die Funktion der _new-Funktion Genau das Gleiche wie das neue Schlüsselwort.

Verwandte Empfehlungen:

Was sind die Vererbungsmethoden von js? Einführung in verschiedene Möglichkeiten zur Implementierung der Vererbung in js

Wie kann ich mit js den Effekt erzielen, dass durch Klicken auf ein kleines Bild ein großes Bild angezeigt wird? (Codebeispiel)

Eine kurze Einführung und Implementierungsmethode für flaches Kopieren und tiefes Kopieren in js

Das obige ist der detaillierte Inhalt vonjs kapselt die _new-Funktion und wie das neue Schlüsselwort implementiert wird (mit Codetest). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
new
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