How to customize objects in JavaScript

Custom method: 1. Create directly through "attribute name/value", syntax "var object name={attribute name:attribute value};"; 2. Use "var object name=new constructor name (args);" statement; 3. Use the "Object.create (prototype object, descriptors)" statement.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In Js, in addition to built-in objects such as Array, Date, and Number, developers can create their own objects through Js code.

Object characteristics

① The structure is similar to a 'dictionary': the properties of the object are similar to key/value pairs; the name of the property is a string, and the value of the property is Any type.

② Prototype inheritance: Js objects can inherit the properties of the prototype.

③ Dynamic structure: attributes of objects can be added and deleted dynamically.

④ Reference type: Objects in js are reference types. a is an object, b=a, and modifying b will also cause a to be modified.

How to create objects

There are three main ways to create custom objects in Js: object literals, new constructors, and the Object.create() method. The prototype objects inherited by each creation method are different:

① Object direct quantity: The prototype is Object.prototype.

② new constructor: The prototype is the prototype attribute of the constructor.

③ Object.create(): The prototype is the first parameter passed in. If the first parameter is null, Object.prototype is used as the prototype.

1. Object direct quantity

Description: Created directly through attribute name/value.

Syntax: var o = { name:'tom', age:22 };

Prototype: Object .prototype

Applicable scenarios: Apply in a specific scope.

Example:

var o = {
    name: 'tom'
}
console.log(o.constructor.prototype); // => Object() ：对象直接量的原型为Object
console.log(o.constructor.prototype === Object.prototype); // true

2. new constructor

Description:Constructor is also a kind of function, but in order to distinguish the commonly used functions, the function name of the constructor is written in camel case (the first letter is capitalized).

Syntax: var o = new ClassName();

Prototype: The prototype attribute of the constructor.

Example:

// 1.创建构造函数
function People(name) {
    this.name;
}

var p = new People('Tom');
console.log(p.constructor.prototype); // => People{} ：原型为构造函数的prototype
console.log(p.constructor.prototype === People.prototype); // => true

// 2.自定义对象的多层继承 ：constructor返回最先调用的构造函数 
function Student(age) {
    this.age = age;
}
Student.prototype = new People(); // 设置Student的原型为People对象

var s = new Student(22); // 对象初始化时，先调用People()，再调用Student()
console.log(s.constructor); // => function People ：对象s返回的构造函数为People
console.log(s.constructor.prototype); // => People{} ：原型对象为People
console.log(s.constructor.prototype === People.prototype); // => true

3, Object.create(prototype, propertyDescriptor): ECMAScript 5 specification

Description: Create and return an object with the specified prototype and specified properties.

Syntax: Object.create(prototype, propertyDescriptor)

Parameters:

①prototype {prototype}: Create object Prototype, can be null. If it is null, the object's prototype is undefined.

②propertyDescriptor {propertyDescriptor} Optional: property descriptor.

Prototype: The silent prototype type is parameter ①; if parameter ① is null, the prototype of the object is undefined.

Example:

// 1.建立一个原型为null的对象
var o = Object.create(null, {
    name: {
        value: 'tom'
    }
});
console.log(o.constructor); // => undefined 

// 2.创建一个原型为Array的对象
var array = Object.create(Array.prototype, {});
console.log(array.constructor); // => function Array 构造函数 
console.log(array.constructor.prototype); // => [] ：原型对象为数组

// 3.创建一个原型为自定义类的对象
function People() { }
var p = Object.create(People.prototype, {});
console.log(p.constructor); // => function People 构造函数 
console.log(p.constructor.prototype); // => People{} ：原型对象People

[Related recommendations: javascript learning tutorial]

The above is the detailed content of How to customize objects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!