Heim > Web-Frontend > js-Tutorial > Hauptteil

Lassen Sie uns darüber sprechen, wie Sie die Funktion Object() verwenden, um Objekte in JavaScript zu erstellen

青灯夜游
Freigeben: 2022-08-04 17:55:49
nach vorne
2295 Leute haben es durchsucht

Wie erstelle ich Objekte mit der Funktion Object()? Der folgende Artikel stellt Ihnen die Methode zum Erstellen von Objekten mit dem Object()-Konstruktor vor (mit drei weiteren Methoden zum Erstellen von Objekten).

Lassen Sie uns darüber sprechen, wie Sie die Funktion Object() verwenden, um Objekte in JavaScript zu erstellen

new Object() erstellt ein Objekt


JavaScript stellt das Object-Objekt nativ bereit (beachten Sie, dass das anfängliche O großgeschrieben wird) und alle anderen Objekte erben von diesem Objekt. Das Objekt selbst ist ebenfalls ein Konstruktor, und neue Objekte können direkt über ihn generiert werden. Die Funktion

Object() kann den angegebenen Wert in ein neues Objekt einschließen.

Syntax:

new Object()
new Object(value)
Nach dem Login kopieren

Parameter value ist ein optionaler Parameter eines beliebigen Typs. value 是任意类型的可选参数。

  • 如果value值是nullundefined或不传时,则会创建并返回一个空对象;

  • 如果value值是一个基本类型,则会构造其包装类的对象,返回一个和给定的值相对应的类型的对象。;

  • 如果value值是引用类型,则仍然返回这个值。

    如果给定值是一个已经存在的对象,则会返回这个已经存在的值(相同地址)。

var obj = new Object();      //创建了一个空的对象
obj.uname = 'zhangsanfeng';
obj.name = 18;       //字面量方式创建对象不同,这里需要用 =  赋值添加属性和方法
obj.sex = 'nan';      //属性和方法后面以;结束
obj.sayHi = function() {
console.log('hi');
}
console.log(obj.uname);  
console.log(obj['age']);
Nach dem Login kopieren

Lassen Sie uns darüber sprechen, wie Sie die Funktion Object() verwenden, um Objekte in JavaScript zu erstellen

说明:通过new Object()的写法生成新对象,与字面量的写法o = {}是等价的。

var o1 = {a: 1};
var o2 = new Object(o1);
o1 === o2 // true

new Object(123) instanceof Number
// true
Nach dem Login kopieren

与其他构造函数一样,如果要在Object对象上面部署一个方法,有两种做法。

(1)部署在Object对象本身

比如,在Object对象上面定义一个print方法,显示其他对象的内容。

Object.print = function(o){ console.log(o) };
var o = new Object();
Object.print(o)
// Object
Nach dem Login kopieren

(2)部署在Object.prototype对象

所有构造函数都有一个prototype属性,指向一个原型对象。凡是定义在Object.prototype对象上面的属性和方法,将被所有实例对象共享。(关于prototype属性的详细解释,参见《面向对象编程》一章。)

Object.prototype.print = function(){ console.log(this)};
var o = new Object();
o.print() // Object
Nach dem Login kopieren

上面代码在Object.prototype定义了一个print方法,然后生成一个Object的实例o。o直接继承了Object.prototype的属性和方法,可以在自身调用它们,也就是说,o对象的print方法实质上是调用Object.prototype.print方法。。

可以看到,尽管上面两种写法的print方法功能相同,但是用法是不一样的,因此必须区分“构造函数的方法”和“实例对象的方法”。

Object()

Object本身就是一个函数,本身当作工具方法使用时,可以将任意值转为对象。这个方法常用于保证某个值一定是对象。

  • 如果参数是原始类型的值,Object方法返回对应的包装对象的实例

Object() // 返回一个空对象
Object() instanceof Object // true

Object(undefined) // 返回一个空对象
Object(undefined) instanceof Object // true

Object(null) // 返回一个空对象
Object(null) instanceof Object // true

Object(1) // 等同于 new Number(1)
Object(1) instanceof Object // true
Object(1) instanceof Number // true

Object('foo') // 等同于 new String('foo')
Object('foo') instanceof Object // true
Object('foo') instanceof String // true

Object(true) // 等同于 new Boolean(true)
Object(true) instanceof Object // true
Object(true) instanceof Boolean // true
Nach dem Login kopieren

上面代码表示Object函数可以将各种值转为对应的构造函数生成的对象。

  • 如果Object方法的参数是一个对象,它总是返回原对象。

var arr = [];
Object(arr) // 返回原数组
Object(arr) === arr // true

var obj = {};
Object(obj) // 返回原对象
Object(obj) === obj // true

var fn = function () {};
Object(fn) // 返回原函数
Object(fn) === fn // true
Nach dem Login kopieren

利用这一点,可以写一个判断变量是否为对象的函数。

function isObject(value) {
  return value === Object(value);
}

isObject([]) // true
isObject(true) // false
Nach dem Login kopieren

扩展知识:其他创建对象的三种方法

1. 对象字面量{…}

对象字面量的方式是最常用的方式之一,它用内含属性的花括号{...}快速创建对象。

var obj1 = {};
obj1.name = "Tom";

var obj2 = { name: "Tom", age: 12 };

var name = "Tom", age = 12;
var obj3 = { name: name, age: age };
// ES2015中,属性名和变量名相同时可简写为:
var obj3 = { name, age };

// 扩展属性,ES2018新特性,可用于克隆或合并对象,浅拷贝,不包括原型
var obj4 = { ...obj3 };
Nach dem Login kopieren

2. Object.create()

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__

/**
 * 创建一个具有指定原型的对象,并且包含指定的属性。
 * @param o 新创建对象的原型对象。可能为空
 * @param properties 包含一个或多个属性描述符的 JavaScript 对象。
 */
create(o: object | null, properties?: PropertyDescriptorMap): any;

interface PropertyDescriptorMap {
    [s: string]: PropertyDescriptor;
}

interface PropertyDescriptor {
    configurable?: boolean;
    enumerable?: boolean;
    value?: any;
    writable?: boolean;
    get?(): any;
    set?(v: any): void;
}
Nach dem Login kopieren
var obj1 = Object.create(null);
Object.getPrototypeOf(obj1) === null;	// true

var proto= {};
var obj2 = Object.create(proto);
Object.getPrototypeOf(obj2) === proto;	// true

var obj3 = Object.create({}, { p: { value: 42 } });
// 属性描述对象中省略了的属性默认为false,所以p是不可写,不可枚举,不可配置的
Object.getOwnPropertyDescriptors(obj3);	// p: {value: 42, writable: false, enumerable: false, configurable: false}

//创建一个可写的,可枚举的,可配置的属性p
var obj4 = Object.create({}, {
	p: { value: 42, writable: true, enumerable: true, configurable: true }
});

//不能同时指定访问器(get和set)和 值或可写属性
var obj4 = Object.create({}, {
	p: {
    	// value: 42,		// 不能和get set同时存在
    	// writable: true,	// 不能和get set同时存在
    	enumerable: true,
    	configurable: true,
    	get: function() { return 10 },
    	set: function(value) { console.log("Setting `p` to", value); }
  }
});
Nach dem Login kopieren

3. Object.assign()

Object.assign()方法并不是直接用来创建对象的,但它可以达到创建对象的效果,所以这里把它也作为一种创建对象的方式。

Object.assign() 方法用于将所有自身可枚举属性的值从一个或多个源对象复制到目标对象。返回目标对象。

Object.assign(target, …sources)
Nach dem Login kopieren
  • 如果目标对象或源对象中具有相同的属性,后面的对象的属性将覆盖前面的对象的属性。
  • 只会拷贝源对象自身的可枚举属性到目标对象。对源对象原型上的对象不做处理。
  • 该方法使用源对象的Get和目标对象的Set
    • Wenn der value-Wert null oder undefiniert ist oder nicht Bei der Übergabe wird ein leeres Objekt erstellt und zurückgegeben;

  • Wenn der value-Wert ein Basistyp ist, wird ein Objekt seiner Wrapping-Klasse erstellt und ein Objekt ähnlich dem Der angegebene Wert wird als Objekt des entsprechenden Typs zurückgegeben. ;
  • Wenn der value-Wert ein Referenztyp ist, wird dieser Wert trotzdem zurückgegeben.

    🎜Wenn der angegebene Wert ein vorhandenes Objekt ist, wird der vorhandene Wert (gleiche Adresse) zurückgegeben. 🎜🎜🎜
    var o1 = { name: "Tom" };
    var o2 = { name: "Jerry" };
    var o3 = Object.create(o2, { 	// o2是o3的原型,name: "Jerry"是原型上的属性
    	a: { value: 42 }, 			// 不可枚举
    	b: { value: 42, writable: false, enumerable: true, configurable: false }, 
      	c: { enumerable: true, get: function() { return 10; } } 
    });
    var obj1 = Object.assign(o1, o2);
    obj1 === o1;		// true
    obj1;				// {name: "Tom", b: 42, c: 10}
    Object.getOwnPropertyDescriptors(obj1);	// 不会拷贝属性的
    /* 	b: {value: 42, writable: true, enumerable: true, configurable: true}
    	c: {value: 10, writable: true, enumerable: true, configurable: true}
    	name: {value: "Tom", writable: true, enumerable: true, configurable: true} */
    
    var o4 = { a: "a", b: { name: "Tom", age: 18 } };
    var obj2 = Object.assign({}, o4);
    obj2.b === o4.b;	// true, 浅拷贝,如果源值是一个对象的引用,它仅仅会复制其引用值。
    
    // 合并对象,后面属性覆盖前面属性
    var o1 = { a: 1, b: 1 };
    var o2 = { b: 2, c: 2 };
    var o3 = { a: 3 };
    var obj3 = Object.assign({}, o1, o2, o3);
    obj3; 			// {a: 3, b: 2, c: 2}
    
    // 基本类型会被转为包装对象,只有字符串的包装对象有自身可枚举属性。
    var obj4 = Object.assign({}, "abc", null, true, undefined, 10, Symbol("foo"));
    obj4;		// {0: "a", 1: "b", 2: "c"}
    
    // 拷贝过程中发生异常,会终止后续拷贝任务,已拷贝的数据保留
    var t = Object.create( {}, { b: { value: 42, writable: false } }); 	// b是只读属性
    Object.assign(t, {a: 1}, {a: 2, b: 2, c: 3}, {c: 4});	// Cannot assign to read only property &#39;b&#39; of object &#39;#<Object>&#39;
    t;		// {a: 2, b: 42}
    Nach dem Login kopieren
    🎜Lassen Sie uns darüber sprechen, wie Sie die Funktion Object() verwenden, um Objekte in JavaScript zu erstellen 🎜🎜🎜Erklärung: 🎜Generieren Sie ein neues Objekt, indem Sie new Object() schreiben, was dem Schreiben des Literals o = {} entspricht. 🎜🎜rrreee🎜🎜Wenn Sie wie bei anderen Konstruktoren eine Methode für das Object-Objekt bereitstellen möchten, gibt es zwei Möglichkeiten. 🎜🎜🎜 (1) Wird auf dem Object-Objekt selbst bereitgestellt🎜🎜Definieren Sie beispielsweise eine Druckmethode für das Object-Objekt, um den Inhalt anderer Objekte anzuzeigen. 🎜rrreee🎜(2) Im Object.prototype-Objekt bereitgestellt🎜🎜Alle Konstruktoren verfügen über ein Prototyp-Attribut, das auf ein Prototyp-Objekt verweist. Alle für das Object.prototype-Objekt definierten Eigenschaften und Methoden werden von allen Instanzobjekten gemeinsam genutzt. (Eine ausführliche Erläuterung des Prototypattributs finden Sie im Kapitel „Objektorientierte Programmierung“.) 🎜rrreee🎜Der obige Code definiert eine Druckmethode in Object.prototype und generiert dann eine Objektinstanz o. o erbt direkt die Eigenschaften und Methoden von Object.prototype und kann sie für sich selbst aufrufen. Mit anderen Worten: Die Druckmethode des o-Objekts ruft im Wesentlichen die Methode Object.prototype.print auf. . 🎜🎜Es ist ersichtlich, dass die Druckmethoden der beiden oben genannten Schreibmethoden zwar dieselbe Funktion haben, ihre Verwendung jedoch unterschiedlich ist, sodass zwischen „Konstruktormethode“ und „Instanzobjektmethode“ unterschieden werden muss. 🎜🎜🎜Object()🎜🎜🎜Das Objekt selbst ist eine Funktion. Bei Verwendung als Werkzeugmethode kann jeder Wert in ein Objekt umgewandelt werden. Diese Methode wird häufig verwendet, um sicherzustellen, dass ein bestimmter Wert ein Objekt sein muss. 🎜
    • 🎜Wenn der Parameter ein primitiver Typwert ist, gibt die Object-Methode eine Instanz des entsprechenden Verpackungsobjekts zurück🎜🎜🎜rrreee🎜Der obige Code zeigt dies an Die Objektfunktion kann jeden Wert in das vom entsprechenden Konstruktor generierte Objekt konvertieren. 🎜
      • 🎜Wenn der Parameter der Object-Methode ein Objekt ist, gibt sie immer das Originalobjekt zurück. 🎜🎜🎜rrreee🎜Damit können Sie eine Funktion schreiben, die bestimmt, ob eine Variable ein Objekt ist. 🎜rrreee🎜🎜Wissen erweitern: drei weitere Möglichkeiten, Objekte zu erstellen🎜🎜🎜🎜1. Objektliterale🎜🎜{…}🎜🎜🎜Die Objektliteralmethode ist eine der am häufigsten verwendeten Methoden. Sie verwendet geschweifte Klammern {...}, die Attribute enthalten, um schnell Objekte zu erstellen. 🎜rrreee🎜🎜2. Object.create()🎜🎜🎜Object.create() Die Methode erstellt ein neues Objekt und verwendet ein vorhandenes Objekt, um den __proto__ des neu erstellten Objekts bereitzustellen. 🎜rrreeerrree🎜🎜3. Object.assign()🎜🎜🎜Object.assign() Die Methode wird nicht direkt zum Erstellen von Objekten verwendet, kann jedoch den Effekt des Erstellens von Objekten erzielen und wird daher hier auch als Möglichkeit zum Erstellen von Objekten verwendet. Die Methode 🎜🎜Object.assign() wird verwendet, um die Werte aller 🎜aufzählbaren Eigenschaften 🎜self🎜 von einem oder mehreren Quellobjekten auf das Zielobjekt zu kopieren. Gibt das Zielobjekt zurück. 🎜rrreee
        • Wenn im Zielobjekt oder Quellobjekt dieselben Eigenschaften vorhanden sind, überschreiben die Eigenschaften des späteren Objekts die Eigenschaften des vorherigen Objekts. 🎜
        • Nur die eigenen aufzählbaren Eigenschaften des Quellobjekts werden in das Zielobjekt kopiert. Das Objekt wird im Prototyp des Quellobjekts nicht verarbeitet. 🎜
        • Diese Methode verwendet Get des Quellobjekts und Set des Zielobjekts, um den Wert abzurufen und festzulegen. 🎜🎜rrreee🎜【Verwandte Empfehlungen: 🎜Javascript-Lerntutorial🎜🎜】🎜🎜

    Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie die Funktion Object() verwenden, um Objekte in JavaScript zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
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