상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것
// 생성자 함수
function Circle(radius) {
this.radius = radius;
this.getArea = function () {
// Math.PI는 원주율을 나타내는 상수다.
return Math.PI * this.radius ** 2;
};
}
// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
// 반지름이 2인 인스턴스 생성
const circle2 = new Circle(2);
// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea === circle2.getArea); // false
console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172
Circle
생성자 함수는 인스턴스를 생성할 때마다 getArea
메서드를 중복 생성하고 모든 인스턴스가 중복 소유하는 문제가 발생
자바스크립트는 프로토타입을 기반으로 상속을 구현
/ 생성자 함수
function Circle(radius) {
this.radius = radius;
}
// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function () {
return Math.PI * this.radius ** 2;
};
// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);
// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea); // true
console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172
Circle
생성자 함수가 생성하는 모든 인스턴스는 getArea
메서드를 상속받아 사용할 수 있다radius
프로퍼티만 개별적으로 소유하고 내용이 동일한 메서드는 상속을 통해 공유하여 사용[[Prototype]]
에 저장됨__proto__
접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]]
내부 슬롯에 간접적으로 접근할 수 있다함수 객체만이 소유하는 prototype
프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킴
프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재
프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성
생성자 함수로서 호출 할수 있는 함수 constructor
는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성
[[Prototype]]
내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다 이를 프로토타입 체인이라 한다Object.prototype
을 프로토타입 체인의 종점이라 한다[[Prototype]]
내부 슬롯의 값은 null
이다undefined
를 반환상속관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라 한다
const Person = (function () {
// 생성자 함수
function Person(name) {
this.name = name;
}
// 프로토타입 메서드
Person.prototype.sayHello = function () {
console.log(`Hi! My name is ${this.name}`);
};
// 생성자 함수를 반환
return Person;
}());
const me = new Person('Lee');
// 인스턴스 메서드
me.sayHello = function () {
console.log(`Hey! My name is ${this.name}`);
};
// 인스턴스 메서드가 호출된다. 프로토타입 메서드는 인스턴스 메서드에 의해 가려진다.
me.sayHello(); // Hey! My name is Lee
상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식
함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식
프로토타입 프로퍼티를 변경 또는 삭제 하려면 프로토타입에 직접 접근해야 한다
// 프로토타입 메서드 변경
Person.prototype.sayHello = function () {
console.log(`Hey! My name is ${this.name}`);
};
me.sayHello(); // Hey! My name is Lee
// 프로토타입 메서드 삭제
delete Person.prototype.sayHello;
me.sayHello(); // TypeError: me.sayHello is not a function
instanceof
연산자는 이항 연산자로서 좌변에 객체를 가리키는 식별자, 우변에 생성자 함수를 가리키는 식별자를 피연산자로 받는다
객체 instanceof 생성자 함수
우변의 생성자 함수의 prototype
에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true
로 평가되고, 그렇지 않은 경우에는 false
로 평가된다
// 생성자 함수
function Person(name) {
this.name = name;
}
const me = new Person('Lee');
// Person.prototype이 me 객체의 프로토타입 체인 상에 존재하므로 true로 평가된다.
console.log(me instanceof Person); // true
// Object.prototype이 me 객체의 프로토타입 체인 상에 존재하므로 true로 평가된다.
console.log(me instanceof Object); // true
생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드
// 생성자 함수
function Person(name) {
this.name = name;
}
// 프로토타입 메서드
Person.prototype.sayHello = function () {
console.log(`Hi! My name is ${this.name}`);
};
// 정적 프로퍼티
Person.staticProp = 'static prop';
// 정적 메서드
Person.staticMethod = function () {
console.log('staticMethod');
};
const me = new Person('Lee');
// 생성자 함수에 추가한 정적 프로퍼티/메서드는 생성자 함수로 참조/호출한다.
Person.staticMethod(); // staticMethod
// 정적 프로퍼티/메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다.
// 인스턴스로 참조/호출할 수 있는 프로퍼티/메서드는 프로토타입 체인 상에 존재해야 한다.
me.staticMethod(); // TypeError: me.staticMethod is not a function
정적 프로퍼티/메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다
in
연산자는 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인
/**
* key: 프로퍼티 키를 나타내는 문자열
* object: 객체로 평가되는 표현식
*/
key in object
const person = {
name: 'Lee',
address: 'Seoul'
};
// person 객체에 name 프로퍼티가 존재한다.
console.log('name' in person); // true
// person 객체에 address 프로퍼티가 존재한다.
console.log('address' in person); // true
// person 객체에 age 프로퍼티가 존재하지 않는다.
console.log('age' in person); // false
in
연산자는 확인 대상 객체의 프로퍼티뿐만 아니라 확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인하므로 주의가 필요
console.log('toString' in person); // true
in연산자 대신 Reflect.has 메서드를 사용할 수 있다
const person = { name: 'Lee' };
console.log(Reflect.has(person, 'name')); // true
console.log(Reflect.has(person, 'toString')); // true
객체의 모든 프로퍼티를 순회하며 열거하려면 for...in
문을 사용한다
for(변수선언문 in 객체){...}
const person = {
name: 'Lee',
address: 'Seoul'
};
// for...in 문의 변수 key에 person 객체의 프로퍼티 키가 할당된다.
for (const key in person) {
console.log(key + ': ' + person[key]);
}
// name: Lee
// address: Seoul
for...in
문은 객체의 프로퍼티 개수만큼 순회하며 for...in
문의 변수 선언문에서 선언한 변수에 프로퍼티키를 할당for..in
문 보단 for
문이나 for..of
문을 사용하기를 권장객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환
const person = {
name: 'Lee',
address: 'Seoul',
__proto__: { age: 20 }
};
console.log(Object.keys(person)); // ["name", "address"]
객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환
console.log(Object.values(person)); // ["Lee", "Seoul"]
객체 자신의 가능한 프로퍼티 키와 값의 쌍의 배열을 배열에 담아 반환
console.log(Object.entries(person)); // [["name", "Lee"], ["address", "Seoul"]]
Object.entries(person).forEach(([key, value]) => console.log(key, value));
/*
name Lee
address Seoul
*/
strict mode
를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';
를 추가한다
strict mode
는 스크립트 단위로 적용strict mode
를 적용하는것은 바람직하지 않으므로 즉시 실행 함수로 스크립트 전체를 감싸서 스코프를 구분하고 즉시 실행 함수의 선두에 strict mode
를 적용// 즉시 실행 함수의 선두에 strict mode 적용
(function () {
'use strict';
// Do something...
}());
strict mode
는 즉시 실행 함수로 감싼 스크립트 단위로 적용하는것이 바람직
선언하지 않은 변수를 참조하면 ReferenceError
가 발생
delete연산자로 변수, 함수, 매개변수를 삭제하면 SyntaxError
가 발생
중복된 매개변수 이름 사용시 SyntaxError
가 발생
strict mode
에서 함수를 일반 함수로서 호출하면 this
에 undefined
가 바인딩
strict mode
에서는 매개변수에 전달된 인수를 재할당하여 변경해도 arguments
객체에 반영되지 않음
생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공하고 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공
문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라 한다
코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며, 어떤 객체에도 속하지 않은 최상위 객체
window(또는 self, this, frames)
global
var
키워드로 선언한 전역 변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 그리고 전역 함수는 전역 객체의 프로퍼티가 된다
// var 키워드로 선언한 전역 변수
var foo = 1;
console.log(window.foo); // 1
// 선언하지 않은 변수에 값을 암묵적 전역. bar는 전역 변수가 아니라 전역 객체의 프로퍼티다.
bar = 2; // window.bar = 2
console.log(window.bar); // 2
// 전역 함수
function baz() { return 3; }
console.log(window.baz()); // 3
let
이나 const
키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다
let foo = 123;
console.log(window.foo); // undefined
애플리케이션 전역에서 호출할 수 있는 빌트인 함수로서 전역 객체의 메서드
this
는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수this
를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조this
가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정// this는 어디서든지 참조 가능하다.
// 전역에서 this는 전역 객체 window를 가리킨다.
console.log(this); // window
function square(number) {
// 일반 함수 내부에서 this는 전역 객체 window를 가리킨다.
console.log(this); // window
return number * number;
}
square(2);
const person = {
name: 'Lee',
getName() {
// 메서드 내부에서 this는 메서드를 호출한 객체를 가리킨다.
console.log(this); // {name: "Lee", getName: ƒ}
return this.name;
}
};
console.log(person.getName()); // Lee
function Person(name) {
this.name = name;
// 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
console.log(this); // Person {name: "Lee"}
}
const me = new Person('Lee');
this
에는 전역 객체가 바인딩this
에는 전역 객체가 바인딩this
에도 전역 객체가 바인딩this
에 전역 객체가 바인딩var value = 1;
const obj = {
value: 100,
foo() {
// this 바인딩(obj)을 변수 that에 할당한다.
const that = this;
// 콜백 함수 내부에서 this 대신 that을 참조한다.
setTimeout(function () {
console.log(that.value); // 100
}, 100);
}
};
obj.foo();
메서드 내부의 this
는 메서드를 호출한 객체에 바인딩
자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정. 이를 렉시컬 스코프(정적 스코프)라 한다
함수는 자신의 내부 슬롯 [[Environment]]
에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다
캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것