일반적으로 JavaScript에서 생성자 함수 내에 프로토타입 메서드를 할당하는 것이 나쁜 습관으로 간주되는 이유는 무엇입니까?

Barbara Streisand
풀어 주다: 2024-10-30 21:02:02
원래의
292명이 탐색했습니다.

Why is assigning prototype methods inside the constructor function generally considered a bad practice in JavaScript?

생성자 내에서 프로토타입 메서드 할당: 잠재적인 단점 및 범위 지정 문제

스타일 선호도의 우선순위를 지정하는 동시에 잠재적인 단점과 범위 지정 문제를 해결하는 것이 중요합니다. 생성자 함수 내부에 프로토타입 메서드를 할당하는 것과 관련됩니다. 다음 코드 구조를 고려하십시오.

구조 1:

<code class="javascript">var Filter = function(category, value) {
  this.category = category;
  this.value = value;

  // product is a JSON object
  Filter.prototype.checkProduct = function(product) {
    // run some checks
    return is_match;
  }
};</code>
로그인 후 복사

구조 2:

<code class="javascript">var Filter = function(category, value) {
  this.category = category;
  this.value = value;
};

Filter.prototype.checkProduct = function(product) {
  // run some checks
  return is_match;
}</code>
로그인 후 복사

단점 및 범위 지정 문제:

1. 반복적인 프로토타입 할당 및 기능 생성:
구조 1에서 프로토타입은 각 인스턴스 생성마다 계속해서 재할당됩니다. 이는 할당을 반복할 뿐만 아니라 각 인스턴스에 대해 새로운 함수 개체를 생성합니다.

2. 예기치 않은 범위 지정 문제:
구조 1은 예기치 않은 범위 지정 문제로 이어질 수 있습니다. 프로토타입 메서드가 생성자의 지역 변수를 참조하는 경우 첫 번째 구조로 인해 의도하지 않은 동작이 발생할 수 있습니다. 다음 예를 고려하십시오.

<code class="javascript">var Counter = function(initialValue) {
  var value = initialValue;

  // product is a JSON object
  Counter.prototype.get = function() {
      return value++;
  }
};

var c1 = new Counter(0);
var c2 = new Counter(10);
console.log(c1.get());    // outputs 10, should output 0</code>
로그인 후 복사

이 경우 각 인스턴스에 대해 생성된 get 메소드는 동일한 프로토타입 객체를 공유합니다. 결과적으로 값 변수가 인스턴스 전체에서 증가하고 공유되어 잘못된 출력이 발생합니다.

기타 고려 사항:

  • 구조 1은 외부 액세스를 방지합니다. Filter.prototype.checkProduct.apply()를 통해 프로토타입을 생성합니다.
  • 성능 측면에서 객체 인스턴스에 직접 메서드를 할당하는 것이 프로토타입을 사용하는 것보다 더 효율적일 수 있습니다.
  • 프로토타입 메서드를 내부에 할당 생성자는 특히 지역 변수를 참조할 때 프로그래밍 실수로 이어질 수 있습니다.

결론:

개인 선호도는 다를 수 있지만 잠재력을 인식하는 것이 중요합니다. 생성자 함수 내부에 프로토타입 메소드를 할당하는 것과 관련된 단점 및 범위 지정 문제. 신뢰성과 유지관리성을 위해 일반적으로 두 번째 코드 구조를 권장합니다.

위 내용은 일반적으로 JavaScript에서 생성자 함수 내에 프로토타입 메서드를 할당하는 것이 나쁜 습관으로 간주되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!