


8 Möglichkeiten, Objekte (Klassen) in JavaScript zu erstellen, Yiyi stellt sie Ihnen vor, ich hoffe, sie gefallen Ihnen.
1. Verwenden Sie den Objektkonstruktor, um ein Objekt zu erstellen
Der folgende Code erstellt ein Personenobjekt und gibt den Namensattributwert auf zwei Arten aus.
var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"])
Eine andere Form der oben genannten Schreibmethode besteht darin, Objektliterale zu verwenden, um ein Objekt zu erstellen. Seien Sie nicht überrascht von Person [„5“], es ist hier legal. andernfalls verwenden Sie dies In Klammern können zwischen Feldern Leerzeichen stehen, z. B. person["mein Alter"].
var person = { name:"Kevin", age:31, 5:"Test" }; alert(person.name); alert(person["5"]);
Obwohl der Objektkonstruktor oder das Objektliteral kann verwendet werden Um ein einzelnes Objekt zu erstellen, weisen diese Methoden jedoch einen offensichtlichen Nachteil auf: Die Verwendung derselben Schnittstelle zum Erstellen vieler Objekte führt zu einer Menge doppeltem Code. Um dieses Problem zu lösen, begann man, eine Variation des Fabrikmusters zu verwenden.
2. Factory-Muster
Factory-Muster ist ein bekanntes Entwurfsmuster im Bereich der Softwareentwicklung. Dieses Muster abstrahiert den Prozess der Erstellung spezifischer Objekte in ECMAScript Da keine Klassen erstellt werden konnten, haben Entwickler Funktionen erfunden, um die Details der Objekterstellung mit einer bestimmten Schnittstelle zu kapseln, wie im folgenden Beispiel gezeigt.
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("Nicholas", 29, "Software Engineer"); var person2 = createPerson("Greg", 27, "Doctor");
Obwohl das Factory-Muster das Problem der Erstellung mehrerer ähnlicher Objekte löst, löst es nicht das Problem der Objekterkennung (d. h. wie man den Typ eines Objekts erkennt). . Mit der Entwicklung von JavaScript
ist ein weiteres neues Muster entstanden.
3. Konstruktormuster
Konstruktoren wie Object und Array werden zur Laufzeit automatisch in der Ausführungsumgebung angezeigt. Darüber hinaus können Sie benutzerdefinierte Konstruktoren erstellen, um Eigenschaften und Methoden benutzerdefinierter Objekttypen zu definieren. Beispielsweise kann das vorherige Beispiel mithilfe des Konstruktormusters wie folgt umgeschrieben werden.
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor");
In diesem Beispiel ersetzt die Funktion Person() die Funktion createPerson(). Wir haben festgestellt, dass der Code in Person() zusätzlich zu den gleichen Teilen wie createPerson() auch die folgenden Unterschiede aufweist:
-
Das Objekt wird nicht explizit erstellt
weist diesem Objekt Eigenschaften und Methoden direkt zu;
hat keine Return-Anweisung.
Um eine neue Instanz von Person zu erstellen, muss der neue Operator verwendet werden. Der Aufruf des Konstruktors auf diese Weise durchläuft tatsächlich die folgenden 4 Schritte:
(1) Erstellen Sie ein neues Objekt;
(2) Konstruieren Sie den Bereich der Funktion wird dem neuen Objekt zugewiesen (dies zeigt also auf das neue Objekt);
(3) führt den Code im Konstruktor aus (fügt Attribute zum neuen Objekt hinzu); .
Am Ende des vorherigen Beispiels enthalten Person1 und Person2 jeweils eine andere Instanz von Person. Beide Objekte verfügen über ein Konstruktorattribut, das auf Person verweist, wie unten gezeigt.
alert(person1.constructor == Person); //true alert(person2.constructor == Person); //true
alert(person1 instanceof Object); //true alert(person1 instanceof Person); //true alert(person2 instanceof Object); //true alert(person2 instanceof Person); //true
Probleme mit Konstruktoren
Obwohl das Konstruktormuster einfach zu verwenden ist, ist es nicht ohne Mängel. Das Hauptproblem bei der Verwendung von Konstruktoren besteht darin, dass jede Methode für jede Instanz neu erstellt werden muss. Funktionen in ECMAScript sind Objekte, daher wird jedes Mal, wenn eine Funktion definiert wird, ein Objekt instanziiert. Aus logischer Sicht kann der Konstruktor zu diesem Zeitpunkt auch so definiert werden.function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的 }
alert(person1.sayName == person2.sayName); //false
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = sayName; } function sayName(){ alert(this.name); } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor");
4. Prototypenmodus
function Person(){ } Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName(); //"Nicholas" var person2 = new Person(); person2.sayName(); //"Nicholas" alert(person1.sayName == person2.sayName); //true
要理解原型对象,可见我的另一篇博客:JavaScript prototype详解
前面例子中每添加一个属性和方法就要敲一遍Person.prototype。为减少不必要的输入,也为了从视觉上更好地封装原型的功能,更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象,如下面的例子所示。
function Person(){ } Person.prototype = { name : "Nicholas", age : 29, job: "Software Engineer", sayName : function () { alert(this.name); } };
在上面的代码中,我们将Person.prototype 设置为等于一个以对象字面量形式创建的新对象。最终结果相同,但有一个例外:constructor 属性不再指向Person 了。前面曾经介绍过,每创建一个函数,就会同时创建它的prototype 对象,这个对象也会自动获得constructor 属性。而我们在这里使用的语法,本质上完全重写了默认的prototype 对象,因此constructor 属性也就变成了新对象的constructor 属性(指向Object 构造函数),不再指向Person 函数。此时,尽管instanceof操作符还能返回正确的结果,但通过constructor 已经无法确定对象的类型了,如下所示。
var friend = new Person(); alert(friend instanceof Object); //true alert(friend instanceof Person); //true alert(friend.constructor == Person); //false alert(friend.constructor == Object); //true
在此,用instanceof 操作符测试Object 和Person 仍然返回true,但constructor 属性则等于Object 而不等于Person 了。如果constructor 的值真的很重要,可以像下面这样特意将它设置回适当的值。
function Person(){ } Person.prototype = { constructor : Person, name : "Nicholas", age : 29, job: "Software Engineer", sayName : function () { alert(this.name); } };
需要注意一点就是:实例中的指针仅指向原型,而不指向构造函数。
原型对象的问题:原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。
function Person(){ } Person.prototype = { constructor: Person, name : "Nicholas", age : 29, job : "Software Engineer", friends : ["Shelby", "Court"], sayName : function () { alert(this.name); } }; var person1 = new Person(); var person2 = new Person(); person1.friends.push("Van"); alert(person1.friends); //"Shelby,Court,Van" alert(person2.friends); //"Shelby,Court,Van" alert(person1.friends === person2.friends); //true
5、组合使用构造函数模式和原型模式(最常用)
创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。另外,这种混成模式还支持向构造函数传递参数;可谓是集两种模式之长。
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"]; } Person.prototype = { constructor : Person, sayName : function(){ alert(this.name); } } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); person1.friends.push("Van"); alert(person1.friends); //"Shelby,Count,Van" alert(person2.friends); //"Shelby,Count" alert(person1.friends === person2.friends); //false alert(person1.sayName === person2.sayName); //true
6、动态原型模式
有其他OO 语言经验的开发人员在看到独立的构造函数和原型时,很可能会感到非常困惑。动态原型模式正是致力于解决这个问题的一个方案,它把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。换句话说,可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。来看一个例子。
function Person(name, age, job){ //属性 this.name = name; this.age = age; this.job = job; //方法 --------------------------------------------- if (typeof this.sayName != "function"){ Person.prototype.sayName = function(){ alert(this.name); }; } -------------------------------------------- } var friend = new Person("Nicholas", 29, "Software Engineer"); friend.sayName();
7、寄生构造函数模式
通常,在前述的几种模式都不适用的情况下,可以使用寄生(parasitic)构造函数模式。这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但从表面上看,这个函数又很像是典型的构造函数。下面是一个例子。
function Person(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 friend = new Person("Nicholas", 29, "Software Engineer"); friend.sayName(); //"Nicholas"
在这个例子中,Person 函数创建了一个新对象,并以相应的属性和方法初始化该对象,然后又返回了这个对象。除了使用new 操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。构造函数在不返回值的情况下,默认会返回新对象实例。
8、稳妥构造函数模式
所谓稳妥对象,指的是没有公共属性,而且其方法也不引用this 的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用this 和new),或者在防止数据被其他应用程序(如Mashup程序)改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的实例方法不引用this;二是不使用new 操作符调用构造函数。按照稳妥构造函数的要求,可以将前面的Person 构造函数重写如下。
function Person(name, age, job){ //创建要返回的对象 var o = new Object(); //可以在这里定义私有变量和函数 //添加方法 o.sayName = function(){ alert(name); }; //返回对象 return o; }
Haben Sie die oben genannten 8 Methoden zum Erstellen von Objekten (Klassen) in JavaScript gelernt? Ich hoffe, dass sie Ihnen beim Lernen helfen werden.
【Empfohlene verwandte Tutorials】
1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
Bootstrap-Tutorial

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Dreamweaver CS6
Visuelle Webentwicklungstools

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
