JavaScript Constructor Pattern Example Analysis

This article mainly introduces the constructor pattern of JavaScript programming design pattern, briefly describes the concept and principle of the constructor pattern, and analyzes the definition and usage of the constructor pattern in the form of examples. Friends in need can refer to it. I hope Can help everyone.

The examples in this article describe the constructor pattern of JavaScript programming design patterns. Share it with everyone for your reference, the details are as follows:

In the classic OOP language, the constructor (also called the constructor) is a special method used to initialize objects. In JS, because everything is an object, object constructors are often mentioned.

The object constructor is used to create an object of a specified type (Class) and can accept parameters to initialize the properties and methods of the object.

Object creation

In JS, there are three commonly used methods for creating objects:

//1, 推荐使用
var newObject = {};
//2,
var newObject = Object.create( null );
//3, 不推荐
var newObject = new Object();

However, this only creates three empty objects without any properties and methods. We can set properties and methods for objects through the following four methods.

// ECMAScript 3 兼容的方式
// 1. 常规对象定义方式
//设置属性
newObject.someKey = "Hello World";
//获取属性
var key = newObject.someKey;
// 2. 方括号方式
// 设置属性
newObject["someKey"] = "Hello World";
//获取属性
var key = newObject["someKey"];
// 仅仅用于ECMAScript 5
// 3. Object.defineProperty
// 设置属性
Object.defineProperty(
 newObject, "someKey",
 { value: "for more control of the property's behavior",
  writable: true,
  enumerable: true,
  configurable: true
});
//可以通过下面的函数简化属性设置
var defineProp = function ( obj, key, value ){
  config.value = value;
  Object.defineProperty( obj, key, config );
};
// 使用方法
var person = Object.create( null );defineProp( person, "car", "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 4. Object.defineProperties
//设置属性
Object.defineProperties(
newObject,
{ "someKey": { value: "Hello World", writable: true },
 "anotherKey": { value: "Foo bar", writable: false }
});
// 3和4的获取属性方法同1,2.

Basic constructor

We know that there is no concept of Class in JS, but it It also supports creating objects using constructors.

By using the [new] keyword, we can make a function behave like a constructor to create its own object instance.

A basic constructor form is as follows:

function Car( model, year, miles ) {
  //这里，this指向新建立的对象自己
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
//用法
// 建立两个car实例
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// 输出结果
console.log( civic.toString() );
console.log( mondeo.toString() );

This is the simple constructor pattern. It has two main problems,

First, it is difficult to inherit; second, toString() is defined once for each object instance. As a function, it should be shared by every instance of the Car type.

Using prototype constructors

There is a very good feature in JS: prototype [Prototype],

Use It, when creating an object, all properties in the constructor prototype can be obtained by the object instance.

This way multiple object instances can share the same prototype.

We improve the previous Car example as follows:

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// 用法
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
//输出
console.log( civic.toString() );
console.log( mondeo.toString() );

In the above example, the toString() method is shared by multiple Car object instances.

Related recommendations:

JavaScript Design Patterns Factory Pattern and Constructor Pattern_javascript skills

Node.js design The pattern uses streams for encoding

A brief introduction to the structural flyweight pattern of js design patterns

The above is the detailed content of JavaScript Constructor Pattern Example Analysis. For more information, please follow other related articles on the PHP Chinese website!