두 방법중에 어떤걸 해도 상관없으나 정리정돈하는 방법이 있는것(객체지향 프로그래밍)을 아는것과 모르는건 차이가 있다.
1.객체(정의) 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인것 2.메서드(정의)객체안의 함수 3.this(정의) 메서드가 속해있는 객체를 가르키는 특수한 키워드
8강 객체안의 메서드를 수정하거나 속성값을 수정하면 다른 객체도 수정해야 하므로 객체를 만드는 공장이 필요하다. 그건 다음시간에 설명하겠습니다.
9강 Date라는 내장객체가 있고 new를 쓰면 그 객체가 생성이 되고 객체안의 상태는 알수 없고 알 필요도 없다.
그러나 우리가 만들었던 kim이나 lee 객체는 안의 상태가 다 보인다.
lee 객체도 new Date()처럼 그 공장을 통해서 만들면 코드가 훨씬 깨끗해질수 있고 자동으로 생산할수도 있습니다. 이걸 다음시간에 해보겠습니다.
10강
생성자함수로 객체를 만들때
Person을 그냥 실행시키면 undefined 가 뜬다. 왜냐면 리턴되는 값이 없기때문이다.
Person을 실행시키면 리턴값이 없어서 undefined가 뜬다.
그런데 new Date()처럼 앞에 new 가 붙으면 Person()이 생성자 함수가 되서 객체가 만들어진다. var kim = new Person("kim",10,20,30)
결론
1.생성자(constructor)는 객체를 찍어내는 작은 공장, 공장의 시스템이다. 2.공장의 시스템을 바꾸면 생산물이 바뀌듯이 객체도 한번에 바뀐다. 3.중복제거가 코딩기술 발전의 원천중에 하나이다. 4.결국 코딩을 좀 더 편하고, 재사용하기 쉽게 만드는게 목적입니다.
11강
prototype(정의)원형,본래의 모습,공통된 모습
자바스크립트는 프로토타입 기반의 언어이다. 프로토타입을 실용적인 수준까지 배우겠습니다.
우리가 생성자 함수로 계속 객체를 만들때마다 똑같은 메서드가 생성되면서 메모리 낭비가 일어나게 됩니다. (이때 객체가 2개이니 망정이지 1억개이면 엄청나게 메모리 낭비가 나타납니다. )
그리고 생성자 함수로 객체를 만들고 객체의 메서드의 값을 바꾸고 싶다면 밑에다 일일이 추가를 해줘야 합니다. 그래서 생성자 안에서 메서드를 만들때 생산성이 떨어지는 단점이 생깁니다.
그래서 다음시간에 Person이라고 하는 저 생성자를 이용해서 만든 모든객체가 공통적으로 사용되는 함수나 속성을 만들기로 한겁니다.
12강
보면 kim이랑 lee 객체안에 메서드는 없는데 kim.sum()이랑 lee.sum()을 실행하면 값이 나온다. 이렇게 해야 중복을 줄여서 메모리 관리가 되는거다.
코드설명 프로토타입으로 메서드를 밖으로 빼서 만든다음(이유는 메모리관리 때문) 근데 kim이라는 객체의 메서드는 다르게 만들고 싶어서 kim.sum = function (){내용} 이렇게 만든것 (12번째줄에서 14번째줄) 그다음 node.js로 디버깅해본것
결론 메서드를 호출할때 순서 1번: 객체안에 메서드가 있는지 확인해서 호출 2번: 객체안에 메서드가 없으면 생성자함수의 프로토타입의 메서드을 통해 호출 3번: 1번 2번 둘다 없으면 undefined
13강
자바스크립트는 ES6이전에는 생성자함수를 통해 객체를 만들었다.
그런데 ES6에서는 Class 문법이 나와서 다른 java 나 php와 같은 언어처럼 객체지향프로그래밍이 가능해졌다.
ES6문법은 대부분의 웹브라우저에서 지원을 하는데 그걸 볼수 있는데가 caniuse.com이란 사이트이다.
결론: ie 빼고 96.77%로 다 지원한다.
근데 class문법을 ie 같은 사이트에서 쓸수가 없으니 class문법을 es5문법으로 바꿔주는 컴파일러가 필요한것이다. 그게 Babel이다. try it out이란 곳으로 들어가면 왼쪽과 오른쪽에 코드가 적혀져 있는데 내가 왼쪽에 es6문법으로 적으면 오른쪽에서는 es5문법으로 바꿔주는 것이다.
결론: 버전 생각하지 말고 걍 배우면 된다.
14강
class로 생성자함수 만드는법을 알아보겠습니다.
왼쪽이 es5 문법 오른쪽이 es6문법이다. 결론: 두개 모두 실행결과가 같다.
class는 객체를 만들는 공장이다.
다음시간에 객체안에 내용 채우는법을 배울겁니다.
15강
결론:왼쪽 오른쪽 결과가 같다.
1.왼쪽 코드 해석 (1-6번줄)Person 이라는 함수가 있고
(7번줄)에서 new가 붙은 Person이라는 생성자 함수가 "kim"과10,20이 name first second에 들어간 객체값이 kim에 저장된다.
그리고 (9번줄)에서 출력이 된다.
2.오른쪽 코드 해석 (1-7번줄)class라는 객체를 찍어내는 공장이 Person이고 constructor라는 생성자가 있고 인자로 name first second 가 있다.
(9번줄)그리고 마찬가지로 "kim"과10,20이 name first second에 들어간 객체값이 kim에 저장된다.
그래서 (11번째줄)에서 출력이 된다.
그리고 class문법에서는 메소드에서 function을 안붙이고 쓴다. 또한 class문법에서 생성자함수가 호출이 되면 consturctor안의 값이 실행이 된다.
16강 class가 있을때 메소드를 만드는 방법에 대해 배워보겠습니다. 우리가 es5문법에서는 밑에처럼 생성자함수의이름.prototype.메소드이름 = function(){내용} 이렇게 써서 호출될때 참조를 해서 메모리관리를 해줄수 있다고 했습니다.
그러면 class 문법이 있을때는 어떻게 해줄까요? 바로 es5처럼 똑같이 해줘도 됩니다. 그리고 class문법안에 넣어주는 방법이 있습니다.
결론 1번 : 두개중에 어떤걸 해도 괜찮으나 class를 쓸때는 밑에 방법을 권장합니다. 마찬가지로 생성자함수의 메소드를 참조하는 방법으로 메모리관리가 된다.
결론 2번 : 그리고 전에 배웠듯이 다른객체의 메소드만 내용을 바꾸고 싶으면
바꾸고싶은 내용을 담고있는 메소드가 있는 객체.바꾸고싶은 내용을 담고있는 메소드 = function(){내용} 이렇게 넣으면 된다.(전에 배운거랑 똑같다.)
결론 3번 : 메소드가 호출될때 순서도 비슷하다.(전에 배운거랑 똑같다.) 1.객체자신에 메소드가 있는지 확인한다. 2.생성자함수안에 있는지 확인한다.
Tip : 메서드가 호출된곳에서 부터 위로 찾는다.
17강
상속이 왜 필요한지,상속을 통해서 우리는 어떤꿈을 이룰수 있는지 알아보겠습니다.
Person이란 class에서 sum이란 메소드 말고 다른 메소드가 필요할수도 있습니다. 즉, 남이 짠 코드가 아니라고 하더라도 자기가 짠 코드 안에서 여기있는 이 Person이라고 하는 기능은 유지하면서 다른 메소드가 필요할수도 있습니다.
그럴때 상속이 필요합니다.
상속을 안쓰게 되면 메인이 되는 class에서 메소드를 계속 추가하거나 새로운 class를 만들어야 합니다. 그렇게 되면 중복이 생기게 됩니다.
1번: avg함수를 그냥 추가하기2번: class객체를 추가하고 avg함수를 아애 추가하기
그래서 상속을 쓰면
이렇게 쓸수 있다. 그러면 Person에 있는것들을 PersonPlus에서도 쓸수가 있습니다. 그러면 중복을 제거할수가 있습니다.
18강 상속을 쓸때 생기는 문제, Super키워드가 필요한이유
상속이라는 것을 도입했을때 문제들과 부모class와 자식class와의 관계에 대한 문제 또는 Super라는 키워드 에 대해 살펴보겠습니다.
PersonPlus에 상속을 받아서 만들었는데 인자를 하나 더 받아서 만들고 싶다면 어떻게 해야하는가? 그럴때 쓰는게 Super키워드 이다.
Super(정의)부모Class가 가지고 있는 기능, 속성이나 메서드를 가지고 올수 있다. *쓰는법 1번 : Super() (정의)부모에 있는 속성을 가지고 온다. 2번 : Super.부모에 있는 메서드이름 (정의) 부모에 있는 메서드를 실행시킨다.
19강 자바스크립트와 다른객체지향언어들(java,c++)과의 다른점
객체지향 프로그래밍은 두가지요소로 나누어져 있습니다. 1.class(정의)객체를 만들어내는 공장 또는 설계도 2.class로 만들어진 객체
super class(정의) 부모공장 sub class(정의)부모공장으로 부터 상속받는 자식공장
결론: 다른언어는 객체지향에서 공장끼리 상속을 받고 그 공장으로 인해서 객체가 나오고 자바스크립트는 그것도 되지만 객체끼리 상속을 받는 관계도 만들수 있 다.
그래서 자바스크립트도 내부 메커니즘은 같지만 자유롭게 쓸수있는 면이 있어 혼란스러운 면들이 많이 생깁니다.
즉, 자바스크립트에서는 객체가 다른 객체의 상속을 받을수 있고 그 상속관계도 바꿀수 있습니다. 그때 바꾸는게 prototype link입니다.
prototype link (정의)상속을 해주는 객체(부모객체)를 가리키는 화살표(관계)
prototype object(정의) prototype link가 가리키는 객체(부모객체)
20강
자, 그럼 지금부터 자바스크립트의 class문법이 아니라 아주 전통적인 방법(__proto__)으로 상속을 하는 방법을 알아보겠습니다.
결론: __proto__가 prototype link(상속관계)이다. 즉, subObj객체가 superObj객체의 자식이다.
객체나 객체를 만드는 공장이 상속관계일때 자식요소에서 값을 찾는다면 자식요소에서 값을 찾고 없으면 부모로 가서도 값이 있는지 봅니다.
그다음 html과 js연결한다음 dubugger을 console.log()위에다 적고 웹브라우저 검사에서 새로고침해서 보면 객체의 상태를 볼수있다. global에서 인자가 너무 많으면 watch에 추가해서 필요한것만 볼수 있다.
22강 객체를 통해서 상속을 직접 받는 방법에 대한 얘기 예전에 Person예제를 __proto__ 랑 Object.create()를 이용해 살펴보는 시간입니다. 우리는 생성자함수를 이용해서 상속하는건 아직 안했습니다.
__proto__나 Object.create()를 사용하면 객체의 속성을 가져다 쓸수 있습니다. prototype link로 연결되 상속되기 때문이죠.
메소드 실행순서 1.자기자신 객체안에 있는지 확인 2.부모에 있는지 찾는다.
Object.create()을 쓰는걸 권장하고 안되면 폴리필 가서 하던가 __proto__쓰는수밖에 ie가 또......
23강 지금까지 배웠던거 내용정리 class기반의 객체지향언어만을 사용해 보셨다면 자바스크립트 객체지향에서는 굉장히 낯설고 이상한 느낌이 드실겁니다.
class가 class를 상속하는것이 아니라 객체가 다른객체를 상속하는데 그걸 런타임에서 실행되고 있는 동안에 다른걸로 상속을 바꿀수 있다는 겁니다.
즉, __proto__를 쓰거나 Object.create()를 통해서 할수 있다라는 것은 자바스크립트에서 굉장히 특이한 접근입니다.
그리고 또한 함수가 그냥함수가 아니라 new라고 하는 키워드가 붙을때 그 함수는 객체를 생성하는 생성자 함수(신)가 됩니다.
많은 객체지향언어에서 이함수라고 하는것은 이렇게 어떤 특정한 객체나 또는 class에 종속될수도 있지만 그냥 혼자서 잘 지내다가 필요에 따라서 어떤 객체의 메소드도 될수 있다라는 것은 자바스크립트를 더욱더 기괴하게 만드는 요소라 생각합니다.
다음시간부터는 제가 지금까지 말씀드린 주제를 살펴보면서 call bind라고하는 api 그리고 this라는것이 객체지향의 세계에서 얼마나 중요한 지도 같이 살펴보는 기회를 가지도록 하겠습니다.
24강 메소드가 객체 밖에 있을때 실행시키는 방법 ==> 함수.call(연결시킬객체,인자들.....,인자)
sum이라는 함수를 kim이나 lee라는 객체안의 메소드로 넣어서 실행시킬려면 call()이라는 녀석을 써주면 된다. sum.call()이라는 녀석은 sum()이랑 같다.
함수도 객체라 할수 있다.(걍 그런가보다 해라)
sum이란 함수에 kim 이란 객체를 연결시켜주면 sum이 kim의 메소드처럼 되서 호출이 된다.
그러면 this.first는 10 this.second는 20 이 되서 총30이 되어 나오는거다.
그리고 call함수 의 첫번째 자리는 객체를 넣고 나머지 인자들은 함수에 들어갈 인자로 생각하면 된다.
=>이거랑 :이 prefix(함수의인자)로 들어가서 값이 출력되는거다.
call과 비슷한걸로 apply라는것이 있는데 사용하는건 비슷합니다. 하지만 call을 주로 씁니다.
25강 bind =>call이랑 비슷한데 함수처럼 실행해야 값이 나온다. 자, 이전시간에는 call이라고 하는걸 통해서 실행할때마다 어떤 객체의 this값을 바꾸는(context내용을 바꾸는) 이명령이 call이라는것을 살펴봤습니다.
call묻지 않게 bind 라는 녀석도 있습니다.
bind(정의)묶다,묶는다라는 뜻입니다.
즉, 함수가 호출될때마다 this를 바꾸는 것이 아니라 아예 함수의 내부적으로 사용할 this를 그냥 딱 다른걸로 고정시켜 버리는 방법 입니다.
고정시킬함수.bind(this로 고정시킬 객체,인자들......) 로 하면 함수에 객체와 인자들이 이미 들어가진 함수가 나온다.
26강 prototype 원리 정리
27강 상속에 대해 다시한번 알아보겠습니다.
자바스크립트는 크게 상속이 객체와 객체가 직접 상속하는 방법이 있고 객체를 찍어내는 공장들의 신이라고 할수있는 class또는 오리지널 자바스크립트로 치면 생성자를 통해서 상속을 할수있습니다.
그런데 제가 생각하기에는 이class문법을 통해서 상속하는게 훨씬 더 쉽습니다. 문제가 생길 가능성도 적습니다.
그래서 이번시간에는 이 class로 상속을 하지 않고 이 class가 등장하기 전부터 사용할수 있었던 prototype을 통해서 상속하는 방법을 제가 소개해드릴거지만 실재로는 class랑 같은 기능이기 때문에 그냥 class를 쓰면 되지 않을까란 생각이 듭니다.
1번이랑 2번은(메소드는) 그 객체의 소속이 아니라 그 객체의 prototype 소속입니다. 즉 Person 이나 Personplus 를 통해서 생성되는 모든객체가 공유하는 함수입니다.
1번은 PersonPlus 안에있는 super.sum()이랑 같은거다.
avg는 PersonPlus 에 추가된 메서드이다.
28강
call이 class문법에서 super역할을 한다.
29강 우리가 class문법에서 알고있던 상속이 사실 prototype 객체를 prototype link로 타고 타고 가서 참조해서 값을 밷어주는거였다. __proto__는 prototype link를 연결시키는 역할을 하는거고
Object.create()는 생성된객체의 prototype link를 연결하면서 교체하는 역할을 한다.(원래 연결되어있던건 지워버림..) 즉, prototype과 생성자함수 객체를 통채로 바꾸는거다. 그래서 constructor도 바꿔줘야 한다. 안그러면 Object.create()로 연결한 prototype의 constructor로 설정이 된다.
30강
자, 이번시간에는 constructor라는 property에 대해서 좀 살펴보겠습니다.
constructor라는 저 property는 여러가지 의미로 쓰이는데 그중에 하나는 어떠한 객체가 누구로부터 만들어졌는가라고 알려주는 이 주류 객체지향에서는 "니 클래스는 뭐야?" 라고 물어보는거랑 비슷한겁니다.
동시에 constructor 를 통해서 생성자함수가 뭔지 몰라서 새로운 객체를 만들어 낼수 있기도 합니다.
