Ji-u's blog

안녕하세요. 좋아요요정입니다! 오늘은 자바스크립트에서 사용되는 자기참조 변수 this를 함께 살펴보겠습니다. 함수의 호출되는 방식에 따른 this와 this 바인딩을 함께 살펴보겠습니다. this 키워드 이미 생성자함수, 객체 메서드, 프로토타입 등을 작성하며 자연스럽게 this를 사용했었습니다. 자기참조 변수 this는 전역에서도 사용할 수 있고, 생성자 함수에서도, 객체 메서드에서도 사용되는키워드 입니다. this는 호출하는 대상이 속한 객체, 생성자 함수로 만들어지는 인스턴스를 가리키거나, 본인이 호출되는 상황에 따라서 다 다르게 해석됩니다. 특히 this가 호출되는 컨텍스트에 따라 연결되는 참조값이 동적으로 결정되어 간혹 잘못된 코드를 작성할 수도 있습니다. this가 어디에서 호출될 때 어떻게..

안녕하세요. 좋아요요정입니다! 12. 객체지향 프로그래밍 이해하기, 13.프로토타입 기반 객체지향 프로그래밍 이해에 이어서 객체지향 프로그래밍에서 상속을 구현할 때 중요하게 여기는 요소 중 하나인 메소드 오버라이딩과 오버로딩에 대해 알아보겠습니다. 오버라이딩 부모가 되는 생성자함수, 클래스가 갖고있는 메서드를 자식 생성자함수, 클래스, 객체에서 같은 이름으로 재정의하여 사용하는 방식입니다. 이때 자식 생성자함수, 클래스, 객체에 의해 가려진 부모의 메서드를 섀도잉이라고 합니다. 예시를 보겠습니다. function Person(name) { this.name = name; } Person.prototype.cook = function (menu) { console.log(`${this.name}가 ${me..

안녕하세요. 좋아요요정입니다. 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어입니다. 다른 객체지향 언어들과는 다르게 클래스나 상속, 캡슐화를 위한 키워드를 제공하지 않고 자바스크립트는 프로토타입을 활용해 자바스크립트만의 객체지향 패러다임을 제공하고 있습니다. 자바스크립트의 클래스는 ES6가 되어서야 도입이 되었고, 다른 언어(Java, C++ 등)과는 조금 다르게 동작합니다. 자바스크립트의 클래스는 기존 상속을 구현하던 프로토타입을 조금 더 쉽게 사용해주는 하나의 함수, 도우미 역할이라고 볼 수 있습니다. 프로토타입 객체 프로토타입을 활용한 상속이란? 10. 생성자 함수에서 생성자 함수를 통해 객체 인스턴스를 생성하고, 생성자 함수의 prototype에 메서드를 등록함으로써 해당 메서드를 객체 ..

안녕하세요. 좋아요요정입니다. 스터디를 진행하며 객체가 {키:값}으로 이루어진 프로퍼티 뿐만 아니라 객체 프로퍼티의 상태를 정의할 수 있는 데이터 프로퍼티, 접근할 때(get, set)의 상태를 정의할 수 있는 접근자 프로퍼티를 가지고, 메소드도 사용할 수 있는 것을 함께 배웠습니다. 그리고 이전 생성자함수편을 통해 함수도 사실 객체라는 사실을 확인했습니다. 오늘은 자바스크립트의 값이 있는 원시값은 객체의 특징을 사용할 수 있는 이유와 객제지향 프로그래밍이 무엇인지에 대해 알아보겠습니다. 자바스크립트의 값이 있는 원시값은 객체의 특징을 사용할 수 있습니다. 처음 자바스크립트를 배울 때 자바스크립트의 데이터타입은 원시값과 객체로 나뉘어진다고 배웠습니다. 원시값이란 객체가 아니면서 메서드도 가지지 않는 데이..

안녕하세요. 좋아요요정입니다! 이전 객체편에서 객체 리터럴 {}을 활용하여 쉽고 빠르게 객체 인스턴스를 생성하는 방법을 살펴보았습니다. 이번엔 자바스크립트에서 객체를 생성하는 방법 중 하나인 생성자 함수를 살펴보겠습니다. 생성자 함수 자바스크립트의 함수는 객체를 생성하기 위해서도 사용할 수 있습니다. 생성자 함수는 생성자 함수의 타입에 맞는 동일한 프로퍼티를 가진 여러개의 객체 인스턴스를 생성할 때 사용할 수 있습니다. 객체 인스턴스는 객체 모양의 데이터 구조로 실제 저장공간에 할당된 실체를 뜻합니다. 먼저, 생성자 함수가 필요한 경우로는 어떤 경우가 있을지 예를 들어보겠습니다. 여기 동물병원에서 진료받은 동물들의 정보를 기록하는 배열이 있습니다. 동물의 개인코드와 이름, 나이 그리고 해가 지나면 나이를..