Maison > interface Web > js tutoriel > le corps du texte

Parlons de la façon d'utiliser la fonction Object() pour créer des objets en JavaScript

青灯夜游
Libérer: 2022-08-04 17:55:49
avant
2295 Les gens l'ont consulté

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 !)

Parlons de la façon d'utiliser la fonction Object() pour créer des objets en JavaScript

new Object() crée un objet


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)
Copier après la connexion

Le paramètre value est un paramètre facultatif de tout type. 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']);
Copier après la connexion

Parlons de la façon dutiliser la fonction Object() pour créer des objets en JavaScript

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

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

new Object(123) instanceof Number
// true
Copier après la connexion

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

(1)部署在Object对象本身

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

Object.print = function(o){ console.log(o) };
var o = new Object();
Object.print(o)
// Object
Copier après la connexion

(2)部署在Object.prototype对象

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

Object.prototype.print = function(){ console.log(this)};
var o = new Object();
o.print() // Object
Copier après la connexion

上面代码在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
Copier après la connexion

上面代码表示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
Copier après la connexion

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

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

isObject([]) // true
isObject(true) // false
Copier après la connexion

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

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 };
Copier après la connexion

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;
}
Copier après la connexion
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); }
  }
});
Copier après la connexion

3. Object.assign()

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

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

Object.assign(target, …sources)
Copier après la connexion
  • 如果目标对象或源对象中具有相同的属性,后面的对象的属性将覆盖前面的对象的属性。
  • 只会拷贝源对象自身的可枚举属性到目标对象。对源对象原型上的对象不做处理。
  • 该方法使用源对象的Get和目标对象的Set
    • Si la valeur value est nulle ou non définie ou not Une fois passé, un objet vide sera créé et renvoyé

  • Si la valeur 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 &#39;b&#39; of object &#39;#<Object>&#39;
    t;		// {a: 2, b: 42}
    Copier après la connexion
    🎜Parlons de la façon dutiliser la fonction Object() pour créer des objets en JavaScript 🎜🎜🎜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. 🎜
    • 🎜Si le paramètre est une valeur de type primitif, la méthode Object renvoie une instance de l'objet d'emballage correspondant🎜🎜🎜rrreee🎜Le code ci-dessus indique que la fonction Objet peut convertir chaque valeur est convertie en objet généré par le constructeur correspondant. 🎜
      • 🎜Si le paramètre de la méthode Object est un objet, il renvoie toujours l'objet d'origine. 🎜🎜🎜rrreee🎜En utilisant cela, vous pouvez écrire une fonction qui détermine si une variable est un objet. 🎜rrreee🎜🎜Développez vos connaissances : trois autres façons de créer des objets🎜🎜🎜🎜1. Littéraux d'objets🎜🎜{…}🎜🎜🎜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. 🎜rrreee
        • S'il y a les mêmes propriétés dans l'objet cible ou l'objet source, les propriétés du dernier objet écraseront les propriétés de l'objet précédent. 🎜
        • Seules les propriétés énumérables de l'objet source seront copiées dans l'objet cible. Aucun traitement n'est effectué sur l'objet sur le prototype de l'objet source. 🎜
        • Cette méthode utilise le Get 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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal