Home >Web Front-end >JS Tutorial >Introduction to Constructor Pattern in JavaScript Design Patterns

Introduction to Constructor Pattern in JavaScript Design Patterns

不言Original: 2018-07-03 15:17:461381browse

This article mainly introduces the constructor pattern of JavaScript design patterns, and analyzes the concept, function, definition and usage of the constructor pattern in the form of examples. Friends in need can refer to the following

Examples of this article Introduced the constructor pattern of JavaScript design patterns. Share it with everyone for your reference, as follows:

1. Concept of constructor pattern

Constructor is used to create objects of a specific type - not only declares the used object, the constructor also Can accept parameters to set the object's member values when the object is first created. You can customize your own constructor and declare properties or methods of custom type objects in it.

In JavaScript, constructors are usually used to implement instances. JavaScript does not have the concept of classes, but there are special constructors. The custom constructor is called through the new keyword. Inside the constructor, the this keyword refers to the newly created object.

2. The functions and precautions of the constructor pattern

Pattern functions:

1. Used to create objects of specific types

2.First Assign a value to the object when declaring it for the first time

3. Declare the constructor yourself, assign properties and methods

Notes:

1. Process business logic when declaring a function

2. Distinguish the difference between singleton and singleton, and implement initialization with singleton

3. Constructor function begins with a capital letter

3. Constructor pattern code and practical summary

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>构造函数模式</title>
</head>
<body>
<!--<script>
  function Car(model,year,miles){
    if(!(this instanceof Car)){
      return new Car(model,year,miles);
    }
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output = function(){
      return this.model + "走了" + this.miles + "公里";
    }
  }
  var tom = new Car("大叔",2009,20000);
  var dudu = Car("Dudu",2010,5000);
  console.log(typeof tom);
  console.log(tom.output());
  console.log(typeof dudu);
  console.log(dudu.output());
</script>-->
<script>
  //1.用于创建特定类型的对象
  //2.这样的函数名会被人笑话
  //3.js开发的时候写单引号
  //4.js里构造函数比较特殊的地方 new
  //5.其他的语言里 比如PHP 里人家实现 有一个关键字 A class
  //6.zaomen就是构造函数 他又充当了类的概念
  var AA = {
    zaomen:function(huawen) {
      if (!(this instanceof AA.zaomen)) {
        console.log(123);
        return new AA.zaomen(huawen);
      };
      var _huawen = "普通";
      if (huawen) {
        _huawen = huawen;
      }
      this.suo = "普通";
      this.huawen = _huawen;
      this.create = function () {
        return "【锁头】" + this.suo + "【花纹】" + this.huawen;
      }
    }
  };
  var BB = {
    zaomen:function(huawen,suo) {
      if (!(this instanceof BB.zaomen)) {
        return new BB.zaomen(huawen,suo);
      };
      var _huawen = "普通";
      if (huawen) {
        _huawen = huawen;
      }
      this._suo = "普通";
      if (suo) {
        _suo = suo;
      }
      this.suo = _suo;
      this.huawen = _huawen;
      this.create = function () {
        return "【锁头】" + this.suo + "【花纹】" + this.huawen;
      }
    }
  };
  /*function zaomen(huawen){
    if(!(this instanceof zaomen)){
      return new zaomen();
    }
    var _huawen = "普通";
    if(huawen){
      _huawen = huawen;
    }
    this.suo = "普通";
    this.huawen = _huawen;
    this.create = function(){
      return "【锁头】" + this.suo + "【花纹】" + this.huawen;
    }
  }*/
  var xiaozhang = AA.zaomen();
  alert("xiaozhang" + xiaozhang.create());
  var xiaoli = BB.zaomen("绚丽",&#39;123&#39;);
  alert("xiaoli" + xiaoli.create());
</script>
</body>
</html>

The operation effect is as follows:

##The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to factories in JavaScript design patterns

Introduction to proxy patterns in JavaScript design patterns

The above is the detailed content of Introduction to Constructor Pattern in JavaScript Design Patterns. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript 构造函数对象 this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to factories in JavaScript design patternsNext article：Introduction to factories in JavaScript design patterns

See more