자바스크립트 프로토타이핑 { }

코드를 작성하면서 메모리를 관리하는 것은 개발자가 가질 수 있는 주요 자질 중 하나입니다. 실행 환경은 자바스크립트 코드를 Creation 및 Hoisting 두 단계로 실행합니다.

실행 컨텍스트: 생성 및 호이스팅

실행 컨텍스트는 실제로 코드를 실행하기 전에 몇 가지를 생성합니다. 먼저 전역 개체와 외부 환경을 만든 다음 Hoisting라는 변수와 함수를 위한 메모리 공간을 설정합니다. 코드가 실행되기 전에 변수가 메모리에 존재하도록 메모리가 할당됩니다.
함수는 코드와 함께 작성되지만 변수의 경우에는 그렇지 않습니다. 대신 undefined라는 자리 표시자가 변수에 할당되고 나중에 코드가 한 줄씩 실행되는 실행 단계에서 변수가 해당 값에 할당됩니다. . 이것은 자바스크립트의 Dynamic typing 또는 Coercion에서 변수의 유형이 런타임 중에 정의되는 데 도움이 됩니다.
요약하면 모든 변수는 undefined로 초기화되지만 함수는 메모리로 할당되므로 정의되기 전에도 호출할 수 있습니다. 변수의 경우 undefined 값을 얻습니다.

 function person(firstname, lastname){
           return "Hello "+this.firstname+" "+this.lastname
      } 
}

위의 예에서 두 개의 인수, 즉 이름과 성을 받아들이고 인사말을 반환하는 함수가 있습니다. 우리의 자바스크립트 객체는 이와 같이 다양한 함수로 구성되어 있으며, 이러한 함수는 실행의 호이스팅 단계에서 메모리로 할당됩니다. 개체 정의에 작성되는 함수의 수가 많을수록 개체에 더 많은 메모리가 할당되고 해당 인스턴스가 생성될 때마다 더 많은 메모리가 할당됩니다.

함수 생성자

함수 생성자는 객체를 생성하는 데 사용되는 일반 함수입니다. this 변수는 새 빈 개체를 가리키며 해당 개체는 함수에서 자동으로 반환됩니다.
Person 개체에 대한 함수 생성자를 만듭니다.

function person(firstname, lastname){
    this.first = firstname;
    this.last = lastname;
}

let employee1 = new person("John" , "Doe");
let employee2 = new person("Jane", "Doe");

이제 person 개체의 속성을 확장했으므로 즉시 새 변수를 추가할 수 있습니다. 예를 들어:

employee1.designation = "Developer"
employee2.designation = "Tester"

프로토타이핑

개체를 프로토타이핑하는 것은 개체 프로토타입에 멤버 함수를 추가하는 데 사용할 수 있는 메서드로, 확장된 모든 개체에서 사용할 수 있지만 메서드는 프로토타입에서만 사용할 수 있고 모든 개체에 복사되지 않기 때문에 메모리를 절약합니다.
이를 통해 실제로 함수에 대한 메모리를 할당하지 않고도 일종의 기본 개체를 만들고 해당 기능을 확장할 수 있습니다.
예를 들어:

Person.prototype.getFullName = function(){
    return this.firstname+" "+this.lastname;
}
Person.prototype.greet = function(){
    return "Hello "+this.firstname+" "+this.lastname;
}

위의 예는 개체에 사용할 수 있는 프로토타입에 두 가지 메서드를 추가합니다.

Javascript는 이 기능을 활용하여 내장 데이터 구조 및 유형에 대한 다양한 기능을 제공합니다. 배열의 객체 정의를 면밀히 관찰하면 javascript가 제공하는 기능을 볼 수 있습니다.


객체 정의에는 개발자가 사용할 수 있는 다양한 기능으로 구성된 proto가 있습니다. 배열을 정의할 때 함수에 메모리가 할당되지 않으면 메서드를 계속 사용할 수 있습니다.

내장 함수 생성자

내장 함수 생성자의 프로토타입에 추가할 수 있는 자체 메서드를 가질 수 있습니다. 예를 들어

String.prototype.isLengthLessThan = function(boundary){
    return this.length < boundary;
}

위의 메소드는 문자열의 프로토타입에 isLengthLessThan()라는 함수를 추가합니다.

JQuery와 같은 다양한 자바스크립트 프레임워크는 jQuery.fn.init의 이러한 기능을 활용하여 최소 메모리를 할당하고 사용자에게 수많은 기능을 제공하는 코드를 작성합니다.

결론

프로토타입 개체는 최소한의 메모리 할당으로 수많은 기능을 가진 개체를 만드는 방법입니다. 프로토타이핑을 사용하여 달성할 수 있는 더 많은 것들이 있습니다.