기본 콘텐츠로 건너뛰기

라벨이 prototype인 게시물 표시

[삽질주의] js에선 object를 어떻게 확장하는가? .map 만들기.

http://spectrum.egloos.com/5580651 옛날 글 소환인데 map을 object 에서도 한번 해볼려고 이렇게 시도해 보았다. > Object.defineProperty(Object.prototype, "map", {value: function(fn) {   for (idx in this) this[idx]=fn(this[idx]); return this; } }); > q={a:1, b:2} > q.map(v=>v+1) Object {a: 2, b: 3} ECMA5부터 Object.defineProperty 를 쓸 수 있고 prototype 삽질을 막을 수 있다. > q={a:1, b: {c: 2, d: 4}} > Object.defineProperty(Object.prototype, "map", {value: function(fn) {   let map=(f,arr)=>{     for (idx in arr)         arr[idx]=typeof arr[idx]==="object" && map(f,arr[idx]) || f(arr[idx]);     return arr;   }   return map(fn, this); }}); > q.map(v=>v+1) Object {a: 2, b: Object} a:2 b:Object   c:3   d:5 뭐 의도한대로 잘 나오긴 한다. value 인 경우만 fn을 실행하고 object면 재귀를 사용한다. 뭐 array만 들어와도 이건 망하겠네; google 에서 왜 [[a,2], [b,3]] 따위 자료 구조를 썼는지 어느정도 이해가 된다.

Fuse 설치/사용기

Fuse라는 툴을 twitter 에서 계속 광고를 하고 있고 나는 twitter가 안 망했으면 하는 1人이므로 눌러줬다. Sketch 하고 연동되고 Transition Animation 및 속도에 민감하다고 한다. html 같은 독자적 xml 구조를 사용하고 로직은 js로 돌아가는 구조. titanium 보고 있나? 매력적인 요소는 많다. 실 기기 동시 AutoReload 라던가 Layout, Transition 등에 목숨 건다던가 Sketch랑 Artboard 1:1 연동 등등. 다리가 후달거린다. 일단 설치하고 App을 만들어보자. 커맨드 라인으로 쓰는 법을 알기 위해 fuse 라고 쳤더니 어랍쇼? 이런게 바로 뜨네. 커맨드 라인은 지원하지만 Dashboard 도 됩니다라는 거냐. New 눌러보자. 이름을 정하고 만들었더니 Sublime 열기가 있다. Sublime 3 설치하고 다시 실행. 호오. 친절하네. 엔터엔터 설정하니 플러긴도 막 깔아줌. 친절친절. 프리뷰 띄워보자. 시뮬레이터랑 iOS/Android 실기기를 지원하나보다. 일단 Local먼저. 연결연결 로딩로딩. 간지간지! 아이폰 연결도 해보자. 이건 시간 좀 걸리네. Xcode를 띄워준다. 헤더 파일이 좀 많네. 프레임웍들은 거의 대부분 다 쓰는 듯.  바람직한 뜨리 샷 내친김에 안드로이드도 가자. 실기기 연결하고. fuse install android 하면 호로홀호롷로로~~ 5.0.1 설치한다 오오. 엔진이 C++로 되있으니 NDK도 깔아야겠지. 끝. 안드로이드는 프리뷰를 처음 할때 좀 느리다. 지겨워도 끊지 말고 기다리면 뜬다. 기본 예제의 MainView.ux (확장자가 무려 ux - 0-!!!) 를 보니 Panel 안에 Page들이 세 개 있고 그 안에 있는 Text들을 좀 수정해보았다.

왜 object에 prototype을 쓰지 않나?

http://triin.net/2009/09/13/Why_exactly_is_Object.prototype_verboten 이유는 이렇다. prototype 에 method 를 정의하면 자기 자신도 해당 object 에 카운트가 된다. 무슨말이냐? object (array포함) 의 key와 value를 보기 위해 종종 아래와 같이 해본다. var ages = {  John: 10,  Mary: 28,  Alice: 16}; 일때 (function(obj){ for (idx in obj) { console.log(idx+':'+obj[idx]) }})(ages)  이렇게 떠 보면 John:30 Mary:30 Alice:30 뭐 이렇게 나오겠지. 그럼 아예 object 에 이걸 prototype 해서 그냥 method 로 만들지 싶어 Object.prototype.printObject=function(){ for (idx in this) { console.log(idx+':'+this[idx]) }}; 요따우로 해주면 ages.printObject() > John:10 > Mary:20 > Alice:30 > printObject:function (){ for (idx in this) { console.log(idx+':'+this[idx]) }} 망한다. 다시 이야기 하지만 자기 자신도 객체의 일부가 되니까. 그래서 쓰지말라는 것이다. hasOwnProperty를 사용해서 피해가는 방법도 있겠지만 다른 문제가 있다. 자세한 설명은 생략한다. 왜 그런지 알고 싶으면 본문 봐라. (난 알고싶지 않아서 안봤다. 안쓸거니까 우왕ㅋ) 결론은 이거다. defineProperty 를 사용하자. ECMAScript 5 스펙이다. 하지만 망할 IE7 에선 안되겠지 http:/