Detailed explanation of the constructor pattern of JS design patterns

This time I will bring you a detailed explanation of the constructor pattern of JS design pattern, what are the precautions when using the constructor pattern of JS design pattern, the following is a practical case, one Get up and take a look.

In the classic OOP language, the constructor (also called constructor) is a special method used to initialize an object. 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 also supports using constructors to create objects.

By using the [new] keyword, we can make a function behave like a constructor and 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],

Using 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. .

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

AngularJS implementation of select secondary linkage drop-down menu steps detailed explanation

Bootstrap and Vue operation user information Adding and deleting

The above is the detailed content of Detailed explanation of the constructor pattern of JS design patterns. For more information, please follow other related articles on the PHP Chinese website!