JavaScript는 얼마나 유연합니까?

JavaScript는 유연성이 뛰어나고 표현력이 뛰어난 언어로 많은 사람을 놀라게 할 예를 하나 들어 보겠습니다.

이 기사는 Kyle Simpson의 기사 "Iterating ES6 Numbers"에서 영감을 받았습니다.

먼저 Number.prototype 객체에 add 메소드를 배포합니다.

Number.prototype.add = function (x) {
  return this + x;
};

위 코드는 Number 인스턴스에 대한 add 메소드를 정의합니다. (이 작성 방법이 익숙하지 않은 경우에는 내 "JavaScript 객체 지향 프로그래밍"을 먼저 읽어 보는 것이 좋습니다.)

Number의 인스턴스는 숫자 값이므로 메서드가 호출될 때 숫자 값을 입력하면 숫자 값이 자동으로 인스턴스 객체로 변환되므로 다음과 같은 결과를 얻습니다.

8['add'](2)
// 10

위 코드에서 호출 메소드를 8.add가 아닌 8['add']로 쓴 이유는 값 뒤의 점이 소수점으로 해석되기 때문입니다. 도트 연산자.

괄호 안에 값을 넣으면 도트 연산자를 사용하여 메소드를 호출할 수 있습니다.

(8).add(2)
// 10

사실 쓰는 방법이 따로 있어요.

8..add(2)
// 10

위 코드의 첫 번째 점은 소수점으로 해석되고, 두 번째 점은 점 연산자로 해석됩니다. 의미의 명확성을 위해 아래에는 괄호를 사용하겠습니다.

add 메소드는 여전히 숫자 값을 반환하므로 연결될 수 있습니다.

Number.prototype.subtract = function (x) {
  return this - x;
};
(8).add(2).subtract(4)
// 6

위 코드는 Number 객체의 인스턴스에 add 메소드와 함께 체인으로 호출할 수 있는 subtract 메소드를 배포합니다.

대괄호를 사용하여 속성을 호출하면 글이 이상해집니다.

8["add"](2)["subtract"](4)
// 6

더 복잡한 방법을 배포할 수도 있습니다.

Number.prototype.iterate = function () {
  var result = [];
  for (var i = 0; i <= this; i++) {
    result.push(i);
  }
  return result;
};
(8).iterate()
// [0, 1, 2, 3, 4, 5, 6, 7, 8]

위 코드는 값을 배열로 자동 확장할 수 있는 Number 객체의 프로토타입에 iterate 메소드를 배포합니다.

간단히 말해서 이제 값에 대한 메서드를 직접 호출할 수 있지만 뒤에 있는 괄호 쌍이 좀 귀찮아 보입니다. 괄호를 제거할 수 있나요? 즉, 다음 표현

(8).double().square()

을 다르게 쓸 수도 있나요?

(8).double.suqare

가능합니다.

ES5에서는 각 객체의 속성에 속성 읽기 작업을 사용자 정의하는 데 사용되는 get 값 메서드가 있다고 규정합니다.

Number.prototype = Object.defineProperty(
  Number.prototype, "double", {
    get: function (){return (this + this)} 
  }
);
Number.prototype =  Object.defineProperty(
  Number.prototype, "square", {
    get: function (){return (this * this)} 
  }
);

위 코드는 Number.prototype에 double 및 square 두 가지 속성과 해당 값 메서드 get을 정의합니다.

따라서 어떤 값에서든 이 두 속성을 읽으면 다음과 같이 쓸 수 있습니다.

(8).double.square
// 256

대괄호 연산자를 대신 사용할 수도 있습니다.

8["double"]["square"]
// 256