JavaScript 디자인 패턴 시리즈 2: 싱글톤 패턴

이 글에서는 JavaScript 디자인 패턴의 두 번째 시리즈인 싱글턴 모드를 공유합니다. 관심 있는 친구들은 한 번 살펴보세요.

싱글턴 모드

서문: 이 시리즈의 코드는 GitHub 주소 https://github에 업로드되었습니다. .com/HolyZheng/…

싱글턴 패턴이 무엇인가요?

싱글턴 패턴의 정의: 클래스는 하나의 인스턴스만 가지며 전역적으로 액세스할 수 있습니다. 单例模式的定义：一个类仅有一个实例，并且可以在全局访问。
什么时候需要用到单例模式呢？其实单例模式在日常开发中的使用非常的广泛，例如各种浮窗、像登录浮窗等，无论我们点击多少次，都是同一个浮窗，浮窗从始至终只创建了一次。这种场景就十分适合运用单例模式。

---

代码实现

我们创建一个“最老的人”的类，很明显，“最老的人”有且只有一个。这很符合我们单例模式的运用场景。我们先来看看完整代码：

var oldestMan = function (name) {
  this.name = name;
}

oldestMan.prototype.getName = function () {
  console.log(this.name);
}
//引入一个代理函数和闭包的概念
var createOldestMan = (function () {
  var instance;
  return function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }
})();

var personA = createOldestMan("holz");
var personB = createOldestMan("Amy");
personA.getName();  //  holz
personB.getName();  //  holz

我们可以在控制台上看到即使调用了两次createOldestMan并且赋了不一样的值，但两次getName()输出的都是第一次的“holz”。这就是单例模式。

代码看不太懂？没关系，现在给大家一一讲解。
首先我们创建了一个oldestMan类，创建了一个name属性。然后我们通过 prototype 给它添加一个getName()方法用来获取oldestMan的名字，相信到这里大家都是懂的，然后下面一段代码就是重点了，也比较难理解。我们打这段代码单独拿出来将一下。

//引入一个代理函数和闭包的概念
var createOldestMan = (function () {
  var instance;
  return function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }
})();

首先，我们不用管什么是代理函数，之所以叫它代理函数是因为它辅助我们实现单例模式的效果，这段函数第一个关键点是 createOldestMan() 是一个立即执行函数。立即函数在声明的时候就会立即执行，也就是在声明createOldestMan的时候这个函数就会执行，它会声明一个instance 变量，然后返回一个函数给createOldestMan。createOldestMan就相当于：

var createOldestMan = function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }

第二个关键点是：这里利用了 闭包 的概念。

闭包是什么呢？我只需要记住当函数在定义时的语法作用域之外被调用，却还能访问定义时的语法作用域时，就是产生了闭包。

我们来看一下我们的代码，函数先定义了一个instance，然后再返回一个function(name)，这个function(name)里面用到了instance变量。在正常情况下，在立即执行函数执行之后，instance变量就会被JavaScript的垃圾回收机制回收，但是因为function(name)被返回到了外部，而function(name)随时会被调用，随时会访问到instance变量，所以instance变量被保留在了内存中。这就产生了闭包。也就是说，function(name)被赋值给了外部的createOldestMan，在外部的语法作用域中执行，但还可以访问到定义时内部的语法作用域中的instance。

所以在 立即执行函数 和 闭包싱글턴 패턴은 언제 사용해야 하나요? 실제로 싱글톤 모드는 로그인 플로팅 창 등 다양한 플로팅 창 등 일상적인 개발에 널리 사용됩니다. 아무리 클릭해도 동일한 플로팅 창이며 플로팅 창은 한 번만 생성됩니다. 처음부터 끝까지. 이 시나리오는 싱글톤 모드를 사용하는 데 매우 적합합니다.

코드 구현

"가장 오래된 사람" 클래스를 만듭니다. 분명히 "가장 오래된 사람"은 단 한 명뿐입니다. 이는 싱글톤 모델의 적용 시나리오와 매우 일치합니다. 먼저 전체 코드를 살펴보겠습니다.

var singleObj;
var createSingleton = function (fn) {
  return function (text) {
    if (!singleObj) {
      singleObj = new fn (text);
    }
    return singleObj;
  }
}

콘솔에서 createOldestMan이 두 번 호출되고 다른 값이 할당되었음에도 불구하고 getName()< / code>출력은 모두 첫 번째 "holz"입니다. 이것이 싱글턴 패턴이다. </p><p>코드를 이해할 수 없나요? 상관없습니다. 이제 하나씩 설명하겠습니다. </p> 먼저 oldMan 클래스와 name 속성을 만들었습니다. 그런 다음 <code>prototype을 통해 여기에 getName() 메서드를 추가하여 oldMan의 이름을 가져옵니다. 여기서는 모두가 이해한다고 생각합니다. 그러면 다음 코드 부분이 초점이 되며 더 어렵습니다. 이해하다. 이 코드 조각을 꺼내서 별도로 살펴보겠습니다.

---

var oldestMan = function (name) {
  this.name = name;
}

oldestMan.prototype.getName = function () {
  console.log(this.name);
}

//一个通用的代理函数
var singleObj;
var createSingleton = function (fn) {
  return function (text) {
    if (!singleObj) {
    singleObj = new fn (text);
    }
    return singleObj;
  }
}

var person_1 = createSingleton(oldestMan)("holz");
var person_2 = createSingleton(oldestMan)("tom");
person_1.getName(); //holz
person_2.getName(); //holz

우선 프록시 함수라고 불리는 이유는 이 함수가 싱글톤 모드의 효과를 얻을 수 있도록 도와주기 때문입니다. createOldestMan()은 즉시 실행 함수입니다. 즉시 함수는 선언과 동시에 실행됩니다. 즉, 이 함수는 createOldestMan이 선언될 때 실행되며 인스턴스 변수를 선언한 다음 createOldestMan에 함수를 반환합니다. createOldestMan은

rrreee

와 동일합니다. 두 번째 핵심 사항은 여기서 closure 개념이 사용된다는 것입니다.

폐쇄란 무엇인가요? 함수가 정의된 구문 범위 외부에서 호출될 때 클로저가 발생하지만 여전히 정의된 구문 범위에 액세스할 수 있다는 점만 기억하면 됩니다.

코드를 살펴보겠습니다. 함수는 먼저 인스턴스를 정의한 다음 함수(이름)를 반환합니다. 이 함수(이름)에는 인스턴스 변수가 사용됩니다. 정상적인 상황에서는 함수가 즉시 실행된 후 인스턴스 변수가 JavaScript 가비지 수집 메커니즘에 의해 재활용되지만 function(name)은 외부로 반환되고 function(name)은 언제든지 호출되므로 인스턴스는 언제든지 변수에 액세스되므로 인스턴스 변수는 메모리에 유지됩니다. 이렇게 하면 클로저가 생성됩니다. 즉, function(name)은 외부 createOldestMan에 할당되어 외부 구문 범위에서 실행되지만, 정의 시에는 내부 구문 범위의 인스턴스에 접근할 수도 있습니다.

그래서 즉시 실행 함수 및 클로저 작업에서 인스턴스는 한 번만 적용됩니다. 즉, 인스턴스가 하나만 있습니다. 즉, createOldestMan("...")을 몇 번이나 실행하더라도 인스턴스는 처음의 값만 됩니다. 따라서 인스턴스가 인스턴스화되었는지 확인하고 인스턴스에 값을 할당할 수 있습니다. 인스턴스가 인스턴스화되면 인스턴스를 반환합니다. 이는 클래스의 인스턴스를 하나만 갖는 효과를 얻습니다.

범용 싱글톤 패턴

코드를 수정할 수도 있습니다. 개발 중에 싱글톤이 하나만 있을 수 없기 때문에 코드를 모든 싱글톤에 대해 범용으로 만들어야 합니다. 어디서 바꿔볼까요? 그렇군요. 프록시 기능을 변경해 보세요. 프록시 함수에서 oldMan()만 추출하고,oldMan()에 국한되지 않고 매개변수 형식으로 전달될 값을 변경하면 됩니다.

rrreee

이 방법으로 싱글톤을 매개변수로 전달하고 이를 사용하여 다양한 싱글톤을 구현할 수 있습니다.
전체 코드는 다음과 같습니다.

rrreee🎜마찬가지로 createSingleton이 다시 호출되어 다른 값이 전달되더라도 출력은 여전히 ​​첫 번째 "holz"입니다. 🎜🎜🎜요약🎜🎜싱글턴 패턴의 정의: 클래스는 단 하나의 인스턴스만 가지며 전역적으로 액세스할 수 있습니다. 🎜적용 가능한 시나리오: 실제로 싱글톤 모드는 다양한 플로팅 창, 로그인 플로팅 창 등 일상적인 개발에 널리 사용됩니다. 아무리 클릭해도 동일한 플로팅 창은 한 번만 생성됩니다. . 이 시나리오는 싱글톤 모드를 사용하는 데 매우 적합합니다. 🎜🎜관련 추천: 🎜🎜🎜JavaScript 디자인 패턴 시리즈 1: 팩토리 패턴🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 JavaScript 디자인 패턴 시리즈 2: 싱글톤 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!