mystery

1. mixin 자바스크립트는 단일상속만을 허용합니다. 객체에는 단 하나의 [[ Prototype ]] 만 존재할 수 있고, 클래스는 단 하나의 클래스만 상속 받을 수 있습니다. 이런 제약에서 벗어나기 위해 mixin 을 사용할 수 있습니다. mixin이란 특정 행동을 실행해주는 메서드를 제공하는 객체입니다. 이 객체를 다른 클래스에 병합해 사용합니다. let helloMixin = { sayHello(){ console.log(`Hello ${this.name}`) } } class User { constructor(name){ this.name = name; } } Object.assign(User.prototype, helloMixin); new User('Bob').sayHello(); // 'H..

1. 내장 클래스 확장하기 class PowerArray extends Array { isEmpty() { return this.length === 0; } } let arr = new PowerArray(1, 2, 5, 10, 50); console.log(arr.isEmpty()); // false let filteredArr = arr.filter(item => item >= 10) //filter 내장 메소드로 새로운 배열 리턴 console.log(filteredArr); // [10, 50] 새로운 배열의 값 console.log(filteredArr.isEmpty()); // false // 새롭게 리턴된 배열에서도 PowerArray의 메소드를 사용할 수 있다. PowerArray 클래스로..

1. 객체 지향의 캡슐화 객체 지향 프로그래밍의 중요한 원리 중 하나는 내부 인터페이스와 외부 인터페이스를 구분 짓는 것, 즉 캡슐화 입니다. 객체 지향 프로그래밍에서 프로퍼티와 메서드는 2개의 그룹으로 분류됩니다. 내부 인터페이스 - 동일한 클래스 내의 다른 메서드에서는 접근할 수 있지만, 클래스 밖에서는 접근 할 수 없는 프로퍼티와 메서드 외부 인터페이스 - 클래스 밖에서도 접근 가능한 프로퍼티와 메서드 커피 머신으로 예를 들자면 외형에는 커피를 뽑는 버튼 몇 개, 구멍 몇 개, 화면 하나 정도가 있습니다. 내부에는 디테일한 장치들과 부품들이 전부 들어있습니다. 하지만 내부의 것을 알지 못해도 사용자는 간단한 조작으로 커피 머신을 사용할 수 있습니다. 커피 머신의 내부를 가려주는 보호 커버를 제거하면..

1. static method prototype 프로퍼티가 아닌 클래스 함수 자체에 메서드를 설정할 수 있습니다. 이런 메서드를 static method ( 정적 메서드 ) 라고 부릅니다. class Animal { static staticMethod(){ console.log(this === Animal) } } class Animal {} Animal.staticMethod = function(){ console.log(this === Animal) } Animal.staticMethod() // true class 내에서 static 메소드를 선언 하는 것은 메서드를 프로퍼티 형태로 직접 할당하는 것과 같습니다. static 메소드는 호출시 class명.method( ) 의 형태로 사용하게 되며, ..

1. 클래스 상속 ( extends ) 클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있습니다. extends 키워드로 상속을 구현할 수 있습니다. class Animal { constructor(name){ this.name = name; this.speed = 0; } run(speed){ this.speed = speed; console.log(`${this.name} 달리는 중 속도 : ${this.speed}`) } } class Human extends Animal { think(){ console.log(`${this.name} 생각하는 중`) } } let human = new Human('Bob') human.run(100) // Bob 달리는 중 속도 : 100 human.t..

1. class Class를 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용 할 수 있습니다. class User { constructor({name}){ this.name = name; } welcome(){ console.log(`Welcome ${this.name}`) } } let user1 = new User({name : 'Bob'}); user1.welcome(); // 'Welcome Bob' 클래스를 new 와 함께 호출하면 다음과 같은 일이 일어납니다. 1. 새로운 객체가 생성됩니다. 2. 넘겨받은 인수와 함께 constructor가 자동 실행됩니다. constructor() 는 new에 의해 자동 호출되므로, 별다른 동작없이 객체를 초기화 할 수 있습니..

1. __proto__ 는 구식입니다. 더는 사용하지 않는 것이 좋습니다. 대신 아래와 같은 모던한 메서드들을 사용하면 좋습니다. Object.create( proto, [descriptors] ) - [[Prototype]] 이 proto인 빈 객체를 생성합니다. ( 설명자는 옵션입니다. Object.getPrototypeOf( obj ) - obj의 [[Prototype]] 을 리턴합니다. Object.setPrototypeOf( obj, proto ) - obj의 [[Prototype]] 을 proto로 설정합니다. let animal = { walk : true } let human = Object.create(animal) console.log(human.walk) // true console...

자바스크립트의 모든 내장 생성자 함수에서 prototype 프로퍼티를 사용합니다. 1. Object.prototype 객체를 생성하는 방법에는 2가지가 있습니다. 객체 리터럴 방식과 Object 내장 객체 생성자 함수를 사용하는 것입니다. obj = new Object() 를 줄이면 obj = {} 이죠 위 그림처럼 생성자 함수의 prototype 프로퍼티는 다양한 메소드가 구현되어있는 거대한 객체입니다. 때문에 생성자 함수나 리터럴 방식으로 생성된 객체의 [[Prototype]]은 다양한 메소드가 구현되어있는 거대한 객체, 즉 Object.prototype입니다. 우리가 생성한 객체에서 toString 과 같은 메소드를 사용할 수 있는 것은 Object.prototype 객체로 부터 메소드를 상속 받았..

1. 함수의 prototype 프로퍼티와 인스턴스의 특징 생성자 함수를 사용해 객체를 생성했을 때와 리터럴 방식으로 객체를 생성했을 때 프로토타입의 동작 방식이 다릅니다. 생성자 함수의 new 연산자로 만든 객체(인스턴스)의 [[Prototype]] 은 생성자 함수의 prototype 프로퍼티를 참조합니다. prototype은 생성자 함수의(F)의 '일반 프로퍼티'입니다. (ex. F.prototype) let animal = { walk: true, } function Human(name) { this.name = name } Human.prototype = animal let human1 = new Human('Bob') console.log(human1.walk) // true 위 코드에서 Huma..

기존의 있는 기능을 가져와 확장하고 싶을 때, 자바스크립트 고유 기능인 프로토타입 상속을 사용할 수 있습니다! 1. [[Prototype]] 자바스크립트의 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖습니다. 이 숨김 프로퍼티 값은 null 혹은 다른 객체에 대한 참조입니다. 이때 다른 객체를 참조하는 경우, 참조 대상을 프로토타입이라고 부릅니다. 객체에서 프로퍼티를 읽으려고 할 때, 프로퍼티가 없다면, 자바스크립트는 자동으로 프로토타입 객체에서 프로퍼티를 찾습니다. 이런 동작 방식을 '프로토타입 상속' 이라고 부릅니다. [[Prototype]] 프로퍼티는 내부 숨김 프로퍼티이지만 개발자가 값을 설정할 수 있습니다. __proto__를 사용하면 객체의 프로토타입을 설정할 수 있습니다. let..