본문 바로가기

Programming/Javascript

 (78)
11. Javascript 실행 컨텍스트(2) - 실행 컨텍스트 생성 프로세스 이제 하나의 함수를 선언하고, 그 함수가 실행되는 과정과 함께 실행 컨텍스트가 형성되고 어떤 정보가 처리되는지를 살펴보도록 하겠습니다. 아래와 같은 코드를 통해 함수를 선언하고 실행한다고 가정해 보겠습니다. function execute(param1, param2){ var a = 1; var b = 2; function func(){ return a + b; } return param1 + param2 + func(); } execute(3, 4); (1) 변수 객체(활성 객체)의 생성 함수의 실행과 함께, 하나의 실행 컨텍스트가 형성되고 이 컨텍스트 안에는 여러 가지 실행 정보를 담는 변수 객체를 만들게 됩니다. 이 변수 객체에 매개변수, 변수, 객체 등이 저장되고 이 변수 객체에서 새로운 실행 컨텍..
11. Javascript 실행 컨텍스트(1) - 실행 컨텍스트의 개념 실행 컨텍스트의 개념 Javascript에서의 실행 컨텍스트 개념은 저도 공부하면서 상당히 추상적인 개념이라 학습하기 어려웠습니다. 다만, C#이나 JAVA 등의 일반적인 OOP 기반 언어들과의 근본적인 차이를 불러오는 개념이기 때문에, 어렵지만 잘 이해해야 하는 개념이기도 합니다. 아마 가장 큰 차이점은 변수의 가용 범위를 결정하는 프로세스가 될 것입니다. 특히 명시적으로 클래스와 이에 따른 상속 개념을 기반으로 가용 범위가 정해지는 언어와 범위를 결정짓는 방법이 다르기 때문에 기존 언어를 사용하는데 익숙하신 분들이라면 오히려 Javascript가 어렵게 다가올 것입니다. 우선, 실행 컨텍스트는 [실행할 수 있는 자바스크립트 코드를 구분하는 추상적인 개념이고, 코드가 실행되는 환경]이라고 볼 수 있습니..
10. Javascript 프로토타입 체이닝 (7) - 쓰기를 할 때의 프로토타입 체이닝 프로토타입 체이닝의 여러 특성에 대해서 알아보았는데, 마지막으로 하나 더 특징을 알아보도록 하겠습니다. 바로 '프로토타입 체이닝은 (프로퍼티)읽기 / (메서드)실행 시에만 발생한다'는 점입니다. 이거 갑자기 무슨 소리인지? 생각이 드실 분들도 있겠지만, 의외로 실수가 발생할 수 있는 지점입니다. 풀어서 설명을 하다 보면 오히려 헷갈릴 수 있는 내용이니, 예제를 먼저 살펴보고 나서 설명하겠습니다. // 생성자 함수 function Rapper(rapName) { this.rapName = rapName; } Rapper.prototype.lable = 'AOMG'; var loco = new Rapper('LOCO'); var jayPark = new Rapper('JAY.PARK'); console.lo..
10. Javascript 프로토타입 체이닝 (6) - 디폴트 프로토타입 객체의 변경 함수의 프로토타입 객체를 덮어쓴다고? 앞선 아티클에서 살펴본 내용이지만 다시 언급하자면, 기본 프로토타입 객체는 함수가 생성될 때 같이 생성이 되고, 함수의 prototype 프로퍼티에 연결됩니다(함수.prototype). 그리고 여기에는 constructor 프로퍼티가 존재하고 이는 함수 자신과 연결된다고 했었습니다. 더불어 프로토타입 함수가 포함되지요. 그런데 기본적으로 이러한 구성을 가진 함수의 프로토타입 객체는, 일반 객체로 변경할 수 있다는 특징을 가지고 있습니다. 즉 우리가 위에서 설명한 프로토타입 객체의 구성을 사용자가 정의한 객체로 덮어쓸 수 있다는 것이죠. 그런데, 이런 성질을 어디다 쓸까요? 괜히 애써 배운 객체 구조만 꼬이게 될 것 같은데 말이죠. 이런 프로토타입 객체의 성질은 추후 ..
10. Javascript 프로토타입 체이닝 (5) - 프로토타입 메서드와 this 프로토타입 메서드와 this 바인딩 * 우선 먼저 간단한 용어의 정의를 짚고 넘어가겠습니다. '프로토타입 메서드'는 우리가 어떤 객체의 프로토타입 객체의 프로퍼티 중 하나로 선언한 메서드를 의미합니다. 프로토타입 메서드 형태로 정의한 메서드 내부에서 this를 사용했을 경우에는, 이 this는 어디에 바인딩될까요? 사실 프로토타입에서 선언한 메서드라고 해서 특별한 별도의 this 바인딩 규칙을 갖거나 하지는 않습니다. 우리가 지난 아티클에서 배웠던 this 바인딩 법칙을 그대로 적용해도 큰 무리가 없습니다. 그럼 하나 다시 복습해 보겠습니다. 프로토타입 '메서드'라는 표현에서 알 수 있듯이, 이 함수는 프로토타입 객체의 속성으로서 선언된 메서드입니다. 우리는 메서드에서 사용한 this 키워드가 어떤 패턴..
10. Javascript 프로토타입 체이닝 (4) - 데이터 타입 확장 앞의 아티클에서, 프로토타입 객체에 메서드를 선언하여 해당 객체에서 새로 선언한 메서드를 불러오는 예시를 보여드렸습니다. 이번에는 프로토타입 객체에서 데이터 타입을 확장하는 방식을 설명해 보도록 하겠습니다. 원리 자체는 간단해 보일 수 있지만, 사실 Javascript에서의 프로토타입 개념이 제대로 잡혀있지 않다면 설명해도 의미가 없는 내용입니다. 우선 Object의 프로토타입에 정의된 표준 메서드를 떠올려 봅시다. hasOwnProperty 또는 isPrototypeOf 같은 표준 메서드들은 Object를 통해 생성되었다고 볼 수 있는 객체들이 자유롭게 사용할 수 있었습니다. 이와 비슷한 방식으로 Number, String, Array의 경우 각각의 프로토타입이 가지고 있는 메서드들을 숫자, 문자열, ..
10. Javascript 프로토타입 체이닝 (3) - 생성자 함수로 생성한 객체의 프로토타입 체이닝 프로토타입 체이닝을 공부할 때는, 생성 패턴과 관계없이 다음의 원칙을 기본으로 숙지하고 있어야 합니다. 이는 앞선 아티클에서 살펴보았던 객체 리터럴 방식으로 생성한 객체이든, 이번 아티클에서 볼 생성자 함수를 통해 생성한 객체이든 마찬가지입니다. Javascript에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 부모 객체로 취급한다. 그럼 아래의 예제에서, 생성자 함수를 통해 객체를 생성한 다음 해당 객체에서는 프로토타입 체이닝이 어떻게 이루어지는지를 살펴보도록 하겠습니다. function Rapper(rapName, age, lable) { this.rapName = rapName; this.age = age; this.lable = lable; } R..
10. Javascript 프로토타입 체이닝 (2) - 리터럴 객체의 프로토타입 체이닝 명시적으로 생성자 함수를 사용하지 않고, 객체 리터럴 방식으로 생성한 객체의 경우 생성자 함수는 무엇일까요? 다룬 지 오래되어 잊어버리셨을 수도 있겠지만... 객체 리터럴 방식으로 생성된 객체의 생성자 함수는 Object( )입니다. 이는 가장 기본적인 원칙이므로 잊지 말고 다시 한번 상기하도록 합시다. Object( )라는 생성자 함수를 우리가 직접적으로 다룰 일은 많지는 않지만 이 역시 함수 객체의 한 종류입니다. 그렇다면 이 Object( ) 역시 prototype이라는 속성을 갖고 있겠죠? 여기서부터 생성자 함수에서 다루었던 내용을 그대로 적용시켜 봅시다. 객체 리터럴을 통해 생성한 객체는 어떤 [[Prototype]]을 갖게 될까요? 다름 아닌 Object.prototype을 가리키게 됩니다. ..

티스토리툴바