JavaScript에서 getter와 setter를 사용하는 것이 왜 좋지 않습니까?-JS 튜토리얼-php.cn

아시다시피 getter와 setter는 JavaScript의 일부가 되었습니다. IE8을 포함한 모든 주요 브라우저를 광범위하게 지원합니다.

이 생각은 일반적으로 틀린 생각은 아니지만 JavaScript에는 별로 적합하지 않다고 생각합니다. getter 및 setter는 코드를 단순화하고 시간을 절약하는 것처럼 보일 수 있지만 실제로는 언뜻 보면 명확하지 않은 숨겨진 오류를 발생시킵니다.

게터와 세터는 어떻게 작동하나요?

먼저 이에 대한 간략한 요약은 다음과 같습니다.

때로는 동적으로 계산된 값을 반환하는 속성에 대한 액세스를 허용하고 싶거나 명시적인 메서드 호출을 사용하지 않고 내부 변수의 상태를 반영하고 싶을 수도 있습니다.

작동 방식을 설명하기 위해 두 가지 속성(firstName 및 lastName)과 계산된 값(fullName)이 있는 사람 개체를 살펴보겠습니다.

var obj = {
  firstName: "Maks",
  lastName: "Nemisj"
}

로그인 후 복사

계산된 값 fullName은 firstName과 lastName의 연결을 반환합니다.

Object.defineProperty(person, &#39;fullName&#39;, {
  get: function () {
    return this.firstName + &#39; &#39; + this.lastName;
  }
});

로그인 후 복사

fullName의 계산된 값을 얻으려면 person.fullName()과 같은 끔찍한 괄호가 필요하지 않으며 간단한 var fullName = person.fullName을 사용하면 됩니다.

setter에도 동일하게 적용됩니다. 다음 함수를 사용하여 값을 설정할 수 있습니다:

Object.defineProperty(person, &#39;fullName&#39;, {
  set: function (value) {
    var names = value.split(&#39; &#39;);
    this.firstName = names[0];
    this.lastName = names[1];
  }
});

로그인 후 복사

사용은 getter만큼 쉽습니다: person.fullName = 'Boris Gorbachev'. 그러면 위에 정의된 함수가 호출되고 Boris Gorbachev가 firstName과 lastName으로 분리됩니다.

무엇이 문제인가요?

"저는 getter 및 setter 메서드를 좋아합니다. JSON처럼 더 자연스러워요."라고 생각할 수도 있습니다. 맞습니다. 하지만 한 걸음 물러서서 fullName이 수행하는 작업을 살펴보겠습니다. 세터는 이전에 일했습니다.

값을 얻으려면 getFullName()과 같은 것을 사용하고 값을 설정하려면 person.setFullName('Maks Nemisj')을 사용합니다.

함수 이름의 철자가 틀리고 person.getFullName()이 person.getFulName()으로 작성되면 어떻게 되나요?

JavaScript에서 오류가 발생합니다:

person.getFulName();
       ^
TypeError: undefined is not a function

로그인 후 복사

이 오류는 적절한 시간과 적절한 장소에 발생합니다. 함수가 존재하지 않는 개체에 액세스하면 오류가 발생합니다. 이는 좋은 일입니다.

이제 잘못된 이름으로 setter를 사용하면 어떻게 되는지 볼까요?

person.fulName = &#39;Boris Gorbachev&#39;;

로그인 후 복사

아무것도 아니야. 객체는 확장 가능하고 키와 값을 동적으로 할당할 수 있으므로 런타임 시 오류가 발생하지 않습니다.

이러한 동작은 오타가 발생한 순간이 아니라 사용자 인터페이스 어딘가에 오류가 표시되거나 잘못된 값에 대해 일부 작업이 수행될 때 오류가 나타날 수 있음을 의미합니다.

과거에 발생했어야 했지만 향후 코드 흐름에 나타나는 버그를 추적하는 것은 매우 흥미롭습니다.

봉인이 가능한가요?

이 문제는 sealAPI를 통해 부분적으로 해결될 수 있습니다. 개체가 봉인되어 있는 한 변경될 수 없습니다. 이는 fulName이 person 개체에 새 키를 할당하려고 시도하지만 실패한다는 의미입니다.

어떤 이유에서인지 Node.js V4.0에서 테스트했을 때 예상대로 작동하지 않았습니다. 따라서 저는 이 솔루션을 보장할 수 없습니다.

그리고 더욱 답답한 점은 세터들에게는 전혀 해결책이 없다는 점입니다. 앞서 언급했듯이 객체는 확장 가능하고 안전합니다. 즉, 존재하지 않는 키에 액세스해도 오류가 발생하지 않습니다.

이 상황이 객체 리터럴에만 적용된다면 굳이 이 글을 쓸 필요가 없을 텐데, ECMAScript 2015(ES6)와 클래스로 getter와 setter를 정의하는 기능이 등장한 이후 '잠재적인 함정'에 대해 쓰기로 결정했습니다. 블로그.

클래스의 등장

현재 일부 JavaScript 커뮤니티에서는 클래스가 그다지 인기가 없다는 것을 알고 있습니다. 사람들은 JavaScript와 같은 기능적/프로토타입 기반 언어에 필요한지 논쟁을 벌입니다. 그러나 사실 클래스는 ECMAScript 2015(ES6) 사양에 포함되어 있으며 한동안 존재할 것입니다.

나에게 클래스는 클래스의 외부 세계(소비자)와 애플리케이션의 내부 세계 사이에 잘 정의된 API를 지정하는 방법입니다. 이것은 규칙을 흑백으로 표현한 추상화이며, 우리는 이러한 규칙이 조만간 변경되지 않을 것이라고 가정합니다.

사람의 개체를 개선하고 실제 클래스를 만듭니다. Person은 fullName을 가져오고 설정하기 위한 인터페이스를 정의합니다.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    return this.firstName + &#39; &#39; + this.lastName;
  }
  setFullName(value) {
    var names = value.split(&#39; &#39;);
    this.firstName = names[0];
    this.lastName = names[1];
  }
}

로그인 후 복사

클래스는 엄격한 인터페이스 설명을 정의하지만 getter 및 setter 메서드를 사용하면 덜 엄격해집니다. 우리는 JSON으로 작업할 때 객체 리터럴로 작업할 때 발생하는 오류와 키의 철자 오류에 익숙합니다. 적어도 수업이 좀 더 엄격해지고, 그런 의미에서 개발자들에게 더 나은 피드백을 제공할 수 있었으면 좋겠습니다.

클래스에서 getter와 setter를 정의할 때 이 상황은 다르지 않습니다. 하지만 누구도 철자를 잘못 쓰는 것을 막을 수는 없습니다.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName() {
    return this.firstName + &#39; &#39; + this.lastName;
  }
  set fullName(value) {
    var names = value.split(&#39; &#39;);
    this.firstName = names[0];
    this.lastName = names[1];
  }
}

로그인 후 복사

오타가 있는 실행에는 오류가 발생하지 않습니다.

var person = new Person(&#39;Maks&#39;, &#39;Nemisj&#39;);
console.log(person.fulName);

로그인 후 복사

동일한 느슨하고 장황하며 추적할 수 없는 동작으로 인해 오류가 발생할 수 있습니다.

在我发现这一点后，我有一个问题：在使用getter和setter的时候，有没有什么可以做的，以便于使得类更严格？我发现：有是肯定有，但是这值得吗？增加额外层次的复杂性到代码就只是为了使用数量更少的括号？对于API定义，也可以不使用getter和setter，而这样一来就能解决这个问题。除非你是一个铁杆开发人员，并愿意继续进行，不然还有另一种解决方案，如下所述。

proxy来帮助？

除了getter和setter方法，ECMAScript 2015（ES6）还自带proxy对象。proxy可以帮助你确定委托方法，这些委托方法可以在实际访问键执行之前，用来执行各种操作。事实上，它看起来像动态getter / setter方法。

proxy对象可以用来捕捉任何到类的实例的访问，并且如果在类中没有找到预先定义的getter或setter就会抛出错误。

为了做到这一点，必须执行下面两个操作：

创建基于Person原型的getter和setter清单。
创建将测试这些清单的Proxy对象。

让我们来实现它。

首先，为了找出什么样的getter和setter方法可以用在类Person上，可以使用getOwnPropertyNames和getOwnPropertyDescriptor：

var names = Object.getOwnPropertyNames(Person.prototype);
var getters = names.filter((name) => {
  var result =  Object.getOwnPropertyDescriptor(Person.prototype, name);
  return !!result.get;
});
var setters = names.filter((name) => {
  var result =  Object.getOwnPropertyDescriptor(Person.prototype, name);
  return !!result.set;
});

로그인 후 복사

在此之后，创建一个Proxy对象：

var handler = {
  get(target, name) {
    if (getters.indexOf(name) != -1) {
      return target[name];
    }
    throw new Error(&#39;Getter "&#39; + name + &#39;" not found in "Person"&#39;);
  },
  set(target, name) {
    if (setters.indexOf(name) != -1) {
      return target[name];
    }
    throw new Error(&#39;Setter "&#39; + name + &#39;" not found in "Person"&#39;);
  }
};
person = new Proxy(person, handler);

로그인 후 복사

现在，只要你尝试访问person.fulName，就会显示Error: Getter “fulName” not found in “Person”的消息。

위 내용은 JavaScript에서 getter와 setter를 사용하는 것이 왜 좋지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!