Maison >interface Web >js tutoriel >Parlons de la façon d'utiliser la fonction Object() pour créer des objets en JavaScript
Comment créer des objets à l'aide de la fonction Object() ? L'article suivant vous présentera la méthode de création d'objets à l'aide du constructeur Object() (avec trois autres méthodes de création d'objets, j'espère qu'il vous sera utile !)
JavaScript fournit nativement l'objet Object (notez que le O de départ est en majuscule), et tous les autres objets héritent de cet objet. L'objet lui-même est également un constructeur et de nouveaux objets peuvent être générés directement via lui. La fonction
Object() peut envelopper la valeur donnée dans un nouvel objet.
Syntaxe :
new Object() new Object(value)
Le paramètre value
est un paramètre facultatif de tout type. value
是任意类型的可选参数。
如果value
值是null
或undefined
或不传时,则会创建并返回一个空对象;
如果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']);
说明:通过new Object()
的写法生成新对象,与字面量的写法o = {}
是等价的。
var o1 = {a: 1}; var o2 = new Object(o1); o1 === o2 // true new Object(123) instanceof Number // true
与其他构造函数一样,如果要在Object对象上面部署一个方法,有两种做法。
(1)部署在Object对象本身
比如,在Object对象上面定义一个print方法,显示其他对象的内容。
Object.print = function(o){ console.log(o) }; var o = new Object(); Object.print(o) // Object
(2)部署在Object.prototype对象
所有构造函数都有一个prototype属性,指向一个原型对象。凡是定义在Object.prototype对象上面的属性和方法,将被所有实例对象共享。(关于prototype属性的详细解释,参见《面向对象编程》一章。)
Object.prototype.print = function(){ console.log(this)}; var o = new Object(); o.print() // Object
上面代码在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
上面代码表示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
利用这一点,可以写一个判断变量是否为对象的函数。
function isObject(value) { return value === Object(value); } isObject([]) // true isObject(true) // false
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 };
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; }
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); } } });
3. Object.assign()
Object.assign()
方法并不是直接用来创建对象的,但它可以达到创建对象的效果,所以这里把它也作为一种创建对象的方式。
Object.assign()
方法用于将所有自身的可枚举属性的值从一个或多个源对象复制到目标对象。返回目标对象。
Object.assign(target, …sources)
Get
和目标对象的Set
value
est nulle
ou non définie
ou not Une fois passé, un objet vide sera créé et renvoyé value
est un type de base, un objet de sa classe d'emballage sera construit et un objet similaire au la valeur donnée sera renvoyée. Objet du type correspondant. ;Si la valeur value
est un type référence, cette valeur sera toujours renvoyée. 🎜Si la valeur donnée est un objet existant, la valeur existante (même adresse) sera renvoyée. 🎜🎜🎜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 'b' of object '#<object>' t; // {a: 2, b: 42}</object>🎜 🎜🎜🎜Explication : 🎜Générez un nouvel objet en écrivant
new Object()
, ce qui équivaut à écrire le littéral o = {}
. 🎜🎜rrreee🎜🎜Comme les autres constructeurs, si vous souhaitez déployer une méthode sur l'objet Object, il existe deux méthodes. 🎜🎜🎜 (1) Déployé sur l'objet Object lui-même🎜🎜Par exemple, définissez une méthode d'impression sur l'objet Object pour afficher le contenu d'autres objets. 🎜rrreee🎜(2) Déployé dans Object.prototype object🎜🎜Tous les constructeurs ont un attribut prototype qui pointe vers un objet prototype. Toutes les propriétés et méthodes définies sur l'objet Object.prototype seront partagées par tous les objets d'instance. (Pour une explication détaillée de l'attribut prototype, voir le chapitre "Programmation orientée objet".) 🎜rrreee🎜Le code ci-dessus définit une méthode d'impression dans Object.prototype, puis génère une instance d'objet o. o hérite directement des propriétés et méthodes de Object.prototype et peut les appeler sur lui-même. En d'autres termes, la méthode print de l'objet o appelle essentiellement la méthode Object.prototype.print. . 🎜🎜On peut voir que bien que les méthodes d'impression des deux méthodes d'écriture ci-dessus aient la même fonction, leur utilisation est différente, il est donc nécessaire de faire la distinction entre la « méthode constructeur » et la « méthode objet instance ». 🎜🎜🎜Object()🎜🎜🎜L'objet lui-même est une fonction lorsqu'elle est utilisée comme méthode outil, n'importe quelle valeur peut être convertie en objet. Cette méthode est souvent utilisée pour garantir qu'une certaine valeur doit être un objet. 🎜{…}
🎜🎜🎜La méthode littérale d'objet est l'une des méthodes les plus couramment utilisées. Elle utilise des accolades {...>
contenant des attributs pour créer rapidement des objets. 🎜rrreee🎜🎜2. Object.create()
🎜🎜🎜Object.create()
La méthode crée un nouvel objet, en utilisant un objet existant pour fournir le __proto__
de l'objet nouvellement créé. 🎜rrreeerrree🎜🎜3. Object.assign()
🎜🎜🎜Object.assign()
La méthode n'est pas directement utilisée pour créer des objets, mais elle peut obtenir l'effet de créer des objets, elle est donc également utilisée ici comme moyen de créer des objets. La méthode 🎜🎜Object.assign()
est utilisée pour copier les valeurs de toutes les 🎜propriétés énumérables🎜 de 🎜self🎜 d'un ou plusieurs objets source vers l'objet cible. Renvoie l'objet cible. 🎜rrreeeGet
de l'objet source et le Set
de l'objet cible pour obtenir et définir la valeur. 🎜🎜rrreee🎜【Recommandations associées : 🎜Tutoriel d'apprentissage Javascript🎜🎜】🎜🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!