JavaScript 디자인 패턴의 생성자 패턴 소개-JS 튜토리얼-php.cn

JavaScript 디자인 패턴의 생성자 패턴 소개

不言

풀어 주다： 2018-07-03 15:17:46

원래의

1338명이 탐색했습니다.

이 글에서는 주로 자바스크립트 디자인 패턴 중 생성자 패턴을 소개하고, 생성자 패턴의 개념, 기능, 정의, 사용법을 예제 형태로 분석했습니다. 도움이 필요한 친구들이 참고할 수 있습니다

이 글의 예제에서는 JavaScript 디자인 패턴의 구조. 다음과 같이 참조용으로 모든 사람과 공유하세요.

1. 생성자 패턴의 개념

생성자는 특정 유형의 객체를 만드는 데 사용됩니다. 사용된 객체를 선언할 뿐만 아니라 생성자는 첫 번째 생성 세트에 대한 매개변수도 허용할 수 있습니다. 객체인 경우 객체의 멤버 값. 자신만의 생성자를 사용자 정의하고 그 안에 사용자 정의 유형 객체의 속성이나 메서드를 선언할 수 있습니다.

JavaScript에서는 일반적으로 인스턴스를 구현하는 데 생성자를 사용합니다. JavaScript에는 클래스 개념이 없지만 특수 생성자가 있습니다. 사용자 정의 생성자는 new 키워드를 통해 호출되며 생성자 내에서 this 키워드는 새로 생성된 개체를 참조합니다.

2. 생성자 패턴의 기능 및 주의사항

패턴의 기능:

1. 특정 유형의 객체를 생성하는 데 사용됩니다.

2. 객체가 처음 선언될 때 값을 할당합니다.

3. 생성자를 직접 선언하고, 속성과 메소드를 할당하세요

1. 함수 선언 시 비즈니스 로직을 처리합니다.

2. 싱글톤과의 차이점을 구별하고, 생성자를 사용하여 초기화를 구현합니다. 대문자로 시작

3. 구성 함수 패턴 코드 및 실제 요약

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

로그인 후 복사

작동 효과는 다음과 같습니다.

위 내용이 이 글의 전체 내용이길 바랍니다. 모든 분들의 학습에 도움이 될 것입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!