JS 🍨의 마스터 개체(3부)

생성자를 새로운 불가지론자로 만드세요 🏗️

User 함수와 같은 생성자를 만들 때 호출자는 new 연산자로 호출하는 것을 기억해야 합니다. 함수가 수신기가 완전히 새로운 객체라고 가정하는 방법에 주목하세요.

function User(name, passwordHash) {
  this.name = name;
  this.passwordHash = passwordHash;
}

호출자가 new 키워드를 잊어버린 경우 함수의 수신자는
전역 객체가 됩니다.

var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
u; // undefined
this.name; // "baravelli"
this.passwordHash; // "d8b74df393528d51cd19980ae0aa028e"

Not only does the function uselessly return undefined, it also disas-
trously creates (or modifies, if they happen to exist already) the global
variables name and passwordHash.

사용자 기능이 ES5 엄격한 코드로 정의된 경우 수신자는
기본값은 정의되지 않음:

function User(name, passwordHash) {
  "use strict";
  this.name = name;
  this.passwordHash = passwordHash;
}
var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
// error: this is undefined

In this case, the faulty call leads to an immediate error: The first line
of User attempts to assign to this.name, which throws a TypeError. So,
at least with a strict constructor function, the caller can quickly dis-
cover the bug and fix it.

그러나 두 경우 모두 사용자 기능은 취약합니다. 새것과 함께 사용시
예상대로 작동하지만 일반 기능으로 사용하면 실패합니다. ㅏ
보다 강력한 접근 방식은 연결 역할을 하는 기능을 제공하는 것입니다.
어떻게 불러도 구조체. 이것을 구현하는 쉬운 방법은
수신자 값이 User의 적절한 인스턴스인지 확인하십시오.

function User(name, passwordHash) {
  if (!(this instanceof User)) {
    return new User(name, passwordHash);
  }
  this.name = name;
  this.passwordHash = passwordHash;
}

이렇게 하면 User 호출의 결과는 함수 또는 생성자로 호출되는지 여부에 관계없이 User.prototype 에서 상속되는 객체입니다.

let x = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
let y = new User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
x instanceof User; // true
y instanceof User; // true

이 패턴의 한 가지 단점은 추가 함수 호출이 필요하므로 약간 더 비쌉니다. 가변 함수를 생성자로 호출하기 위한 적용 메서드와 직접적인 유사점이 없기 때문에 가변 함수에도 사용하기 어렵습니다. 좀 더 이국적인 접근 방식은 ES5Object.create를 사용합니다.

function User(name, passwordHash) {
  let self = this instanceof User ? this : Object.create(User.prototype);
  self.name = name;
  self.passwordHash = passwordHash;
  return self;
}

Object.create takes a prototype object and returns a new object that inherits from it. So when this version of User is called as a function, the result is a new object inheriting from User.prototype, with the name and passwordHash properties initialized.

Object.create는 ES5에서만 사용할 수 있지만 근사할 수 있습니다.
로컬 생성자와 인스턴스화를 생성하여 이전 환경에서
새로운 것으로 그것을 ing:

if (typeof Object.create === "undefined") {
  Object.create = function (prototype) {
    function C() {}
    C.prototype = prototype;
    return new C();
  };
}

Note that this only implements the single-argument version of Object.create. The real version also accepts an optional second argument that describes a set of property descriptors to define on the new object.

누군가가 이 새 버전의 사용자를 new로 호출하면 어떻게 됩니까?
생성자 재정의 패턴 덕분에 함수 호출과 마찬가지로 동작합니다. 이것은 JavaScript가 생성자 함수의 명시적 반환으로 새 표현식의 결과를 재정의할 수 있도록 하기 때문에 작동합니다. 사용자가 self를 반환할 때 새 표현식의 결과는 self가 되며 이는 이에 바인딩된 객체와 다른 객체일 수 있습니다.

특히 생성자를 로컬에서만 사용하는 경우 오용으로부터 생성자를 보호하는 것이 항상 문제가 되는 것은 아닙니다.
그래도 생성자가 잘못된 방식으로 호출되면 상황이 얼마나 심각하게 잘못될 수 있는지 이해하는 것이 중요합니다. 최소한 생성자 함수가 new로 호출될 것으로 예상되는 때를 문서화하는 것이 중요합니다. 특히 대규모 코드베이스 또는 공유 라이브러리에서 공유할 때 그렇습니다.

기억해야 할 것들 🧠

new 또는 Object.create 를 사용하여 자신을 다시 호출하여 호출자의 구문에 구애받지 않는 생성자를 만듭니다.

함수가 new로 호출될 것으로 예상되는 경우 명확하게 문서화하십시오.

🎉🎉🎉 이 기사의 세 번째 부분을 읽어주셔서 감사합니다! 🎉🎉🎉

그리고 좋아하는 프로그래밍 언어에 대해 더 깊이 알고 싶다면 주문형 개발자가 되기 위해 제 개인 정보blog를 확인하세요. 😉에서도 저를 찾을 수 있습니다😃.