WHAT THE BBUNG!

아리까리해서 정리하는 javascript 싸지르기 2.

1. psuedo-classical
유사 class 방식.
객체는 생성자 함수의 prototype에 접근할 수 있는 특성을 이용한다.

(1), (2) 함수가 생성되면서 prototype property 생성 및 초기화

(3) B의 prototype property에 A의 객체를 할당.
    (2)에서 기본 할당되었던 {constructor:A}에 대한 참조를 잃는다.
   
(4) constructor property를 다시 B로 할당한다.
   
(5) 이제 B를 통해 생성한 모든 객체는 A의 property a를 참조한다.



2. prototypal
프로토타입 방식.
built in object Object의 create 함수를 이용한다. [참조]

create 함수가 작동하는 방식은 다음과 같다.[참조]

3. 차이점 [참조]

psuedo-classical 방식은  class(function)로부터 object를 생성한다. java에서 class - object 관계와 유사하다.

prototypal 방식은 object로부터 object를 생성한다. 

javascript 초기에 java와 유사하게 사용할 수 있도록 psuedo-classical 방식을 도입했다.

그러나 OOP의 상속 구현은, 꼭 class가 있어야 할 필요가 없다. 상위 객체의 속성을 하위 객체에서 받아서 쓸 수 있으면 된다.

class가 없는 javascript에서는 prototypal 방식이 언어 특성에 더 적합하다.

cf1) new의 작동방식, create의 작동방식을 보고 있으면 둘의 차이가 뭔지 헷갈린다. javascript의 기능이 막강해서 이런 저런 방식으로 다 사용이 가능하지만, prototypal방식이 언어 특성에 부합하다. (실제 내부 구현이 vender마다 다르니 꼭 저렇다고 말하기 어렵고..)

cf2) prototypal 방식에서는 method chaining이 가능하다.

ex) Object.create().apply(...)

자꾸 까먹어서 다시 정리하는 javascript 관련 정리 싸지르기 1.

1. 객체 생성

1.1 {}

built in object인 Object를 생성한다. 

javascript의 Object는 Dictionary라서 key:value 쌍으로 property를 지정한다.

1.2 new 연산자

new 연산자를 사용하여 객체를 생성할 수 있다.

new 뒤의 함수는 java의 생성자 함수처럼 property를 초기화할 수 있다.

new는 연산자로서, 아래와 같은 작업을 한다.

다음과 같이 표현할 수 있다.

cf) 1. Object.create(...)을 사용하여 객체를 생성할 수도 있으나 다른 주제로 정리함.
     2. call(), apply() 에 대하여 다른 주제로 정리함.

2. 객체와 함수 - property

firefox console을 보면, (a), (b)의 결과는 각각 아래와 같다.

(a) Function A                                                          (b) object o

A.prototype.constructor == o.__proto__.constructor ?!

(a) Function A의 로그

함수 A의 property로 arguments, caller 와 함께 prototype이 존재한다. 

javascript engine은 소스상의 함수들에 대하여 다음과 같은 작업을 수행한다.

(b) object o의 로그

A에 정의된 property a외에, __proto__가 존재한다. 아래 log의 결과를 보자.

(1) A.prototype에 할당된 객체와 o.__proto__에 할당된 객체는 값이 같다. 

(2), (3) __proto__ 없이 접근할 수 있다!!! __proto__는 객체가 자신의 생성자 함수의 prototype property를 참조할 수 있도록 하는 특수 property이다. (__proto__는 firefox, chrome에서 사용하는 이름이다.)

(4) 객체에는 prototype property가 없다.

(5) A.prototype = {constructor:A} 이므로.

(6), (7) 은 나중에 정리. 참고만 하자.

결론

1. 함수가 생성될 때 A.prototype = {constructor:A} 실행.

2. 객체가 생성되면 함수의 prototype 영역에 대한 참조 property 발생.( __proto__ )

nodejs용 에디터를 찾다가 cloud9을 설치해 보았다. 대문은 c9.io 이다.

설치는 아래처럼 npm을 이용하여 간단하게 진행했다.

설치되는 내용을 자세히 안 봤더니 어디에 설치되었는지 모르겠다.

/usr/local/에는 없고, ~/node_modules/cloud9을 만들고 그 밑에 풀어놓았다. 설치형이 아닌가보네.

(참고로, npm이 내려받은 파일은 ~/.npm/에 있다.)

~/node_modules/cloud9/README.md를 열어보면 실행할 수 있도록 설명이 나와있다.

linux와 osx는 bin/cloud9.sh을 실행하란다. 그런데 실행하면 에러난다.

문제는 bin/cloud9.js파일의42line이다.

구글링해보니 경로에 문제가 있는 것 같다. server/cloud9으로 바꿔주면 된다고 한다.

뭔가 상대경로가 맞지 않은 것 같다. 음.. 그냥 날로 먹기가 그래서 아래처럼 유추해 보았다.

bin/cloud9.sh에서는 bin/cloud9.js를 호출한다.

cloud9.js 42line에서 require('cloud9')을 하면 bin/cloud9.js를 찾거나, bin/cloud9/index.js를 찾을 것이다. (nodejs document참조)

- bin/cloud9.js라면, 현재 실행되는 자신일텐데 (기동파일에서 재귀라니.. 이상하다.) bin/cloud9.js에는 exprot.main이 없다.

- bin/cloud9/index.js를 찾는 경우라면, bin/cloud9 폴더가 없다.

find로 cloud9.js를 찾으면 bin/cloud9.js 하나 밖에 없다. 어딘가에 있는 cloud9/index.js에서 exports.main하고 있다는 거다.

index.js로 찾으면, server/cloud9/index.js가 나온다. 다른 index.js도 있지만 cloud9/index.js는 이거 하나밖에 없다.

grep으로 exports.main을 찾으면 server/cloud9/index.js 하나만 나온다.

그래서, require("../server/cloud9").main(options); 로 바꾸고 bin/cloud9.sh을 실행하면 3000번 포트로 잘 올라온다. 올라오면서 기본브라우저인 사파리가 열리면서 'http://127.0.0.1:3000/'을 열어준다.

첨에는 하얗게 아무 것도 안 뜨길래 뜨악했는데 firefox로 다시 열어보니 잘 열린다.

safari에서 css관련 issue가 있던 것 같다.

- 오늘 열어보니 safari에서도 잘 뜬다. 좀 전에  update 하나 떠서 적용했는데 그 영향일까?