스파르탄 JS 6장 OOP 챕터 입니다.

1. 2016 자바카페 스파르탄 스터디
INSIDE Java Script 6
JAVACAFE
박진현

2. 2016 자바카페 스파르탄 스터디들어가기 앞서..
 본 슬라이드는 2016 자바카페 스파르탄 스터디를 위해
제작되었습니다.
 본 슬라이드의 대부분의 내용은
인사이드 자바스크립트
(2014 송형주, 고현준) 의
내용을 참고하였습니다.

3. 2016 자바카페 스파르탄 스터디목 차
 객체지향 프로그래밍
 클래스, 생성자, 메서드
 상속
 캡슐화
 함수형 프로그래밍

4. 2016 자바카페 스파르탄 스터디클래스, 생성자, 메소드
 함수로 구현 가능한것
 클래스
 생성자
 메소드
 우측코드의 문제점은?

5. 2016 자바카페 스파르탄 스터디클래스, 생성자, 메소드
 공통으로 쓸수있는걸 구지 객체마다 가짐
 getName, setName
 메소드를 정의할떈 프로토타입에 정의후 ,
new로 생성한 객체에서 접근하는게 좋음

6. 2016 자바카페 스파르탄 스터디상속
 클래스를 기반으로 하는 상속 불가
 프로토타입 상속
 클래스 기반 상속 흉내내기

7. 2016 자바카페 스파르탄 스터디상속
 프로토타입 상속
 프토로타입 체이닝을 이용한 상속(갓글라스 클락포드..)
 인자로 들어온 객체를 부모로하는 객체를 반환
 ECMA5에서는 Object.create() 로 구현되있음
 생성자 함수 X
 클래스 인스턴스 X
 부모객체 참조만으로..
 자식이 이를 확장하려면?
 s.setAge = function(…)
 영롱하지 못하다(코드가 더럽다)
var p = {
name : "pika",
getName : function(){
return this.name;
},
setName : function(val){
this.name = val;
}
}
function create_object(o){
function F() {}
F.prototype = o;
return new F();
}
var s = create_object(p);
s.setName("Hello");
console.log(s.getName());

8. 2016 자바카페 스파르탄 스터디얕은? 깊은?
 얕은 복사(shallow copy)
 원본 객체에 값을 복사하지 않고 계속 참조함(배열,함수 객체등)
 깊은 복사(deep copy)
 값을 복제해서 가지고 감(복제값이 바뀌어도 원본에 영향 없음)
 빈 객체를 만들어서 재귀호출
 단! 함수객체는 그대로 얕은복사를 진행
 jQuery.extend 참조..(책이 잘나와있음) function shallowCopy(oldObj) {
var newObj = {};
for(var i in oldObj) {
if(oldObj.hasOwnProperty(i)) {
newObj[i] = oldObj[i];
}
}
return newObj;
}

9. 2016 자바카페 스파르탄 스터디클래스 기반 상속
 사실 프로토타입
상속과 비슷..
 코드로 살펴보자!
Function.prototype.method = function (name,func) {
if(!this.prototype[name]){
this.prototype[name] = func;
}
}
function Person(arg){
this.name = arg;
console.log("안녕 나는 사람이야..");
}
Person.method("setName",function(val){
this.name = val;
});
Person.method("getName",function(){
return this.name;
});
function F() {};
F.prototype = Person.prototype;
function Student(arg){
Person.apply(this,arguments);
console.log("안녕 나는 학생이야.")
}
Student.prototype = new F();
Student.prototype.constructor = Student;
Student.super = Person.prototype;
var me = new Student("봉수와");
console.log(me.getName());
dir(me);
var inherit = function(P, C){
var F = function(){};
return function (P, C){
F.prototype = P.prototype;
C.prototype = new F();
C.prototype.constructor = C;
C.super = P.prototype;
};
}();

10. 2016 자바카페 스파르탄 스터디캡슐화
 기본적으로 private, public 등 접근 제어자는 미제공
 this객체의 프로퍼티는 외부에서도 접근 가능
 function 내의 var로 선언된건 외부에서 접근 불가
 하지만 ! 클로저로 접근 가능
 객체 반환
 프로토타입 활용 X
 함수 반환
 프로토타입 활용 가능
var Person = function(arg){
var name = arg;
return {
getName : function(){
return name;
},
setName : function(value){
name = value;
}
}
}
var m = new Person("헬로");
m.setName("피카츄");
console.log(m.getName());
var Person = function(arg){
var name = arg;
var F = function(){};
F.prototype = {
getName : function(){
return name;
},
setName : function(value){
name = value;
}
}
return F;
}();
var m = new Person("헬로");
m.setName("피카츄");
console.log(m.getName());