2016 자바카페 스파르탄 스터디

INSIDE Java Script 6

JAVACAFE박진현

2016 자바카페 스파르탄 스터디들어가기 앞서 ..

본 슬라이드는 2016 자바카페 스파르탄 스터디를 위해 제작되었습니다 .

본 슬라이드의 대부분의 내용은 인사이드 자바스크립트(2014 송형주 , 고현준 ) 의 내용을 참고하였습니다 .

2016 자바카페 스파르탄 스터디목 차

객체지향 프로그래밍 클래스 , 생성자 , 메서드 상속 캡슐화

함수형 프로그래밍

2016 자바카페 스파르탄 스터디클래스 , 생성자 , 메소드

함수로 구현 가능한것 클래스 생성자 메소드

우측코드의 문제점은 ?

2016 자바카페 스파르탄 스터디클래스 , 생성자 , 메소드

공통으로 쓸수있는걸 구지 객체마다 가짐 getName, setName

메소드를 정의할떈 프로토타입에 정의후 , new 로 생성한 객체에서 접근하는게 좋음

2016 자바카페 스파르탄 스터디상속

클래스를 기반으로 하는 상속 불가 프로토타입 상속 클래스 기반 상속 흉내내기

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());

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;}

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; };}();

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());