아사페릴의 사생활..

BEGIN
   ＜프로그램 본체＞
EXCEPTION
 WHEN <예외명> THEN
   ＜예외 처리＞
END;

DECLARE
	vNum	NUMBER(2);
BEGIN
	vNum := 1 / 0;
	DBMS_OUTPUT.PUT_LINE('수치=' || vNum);
EXCEPTION
	WHEN OTHERS THEN
		NULL; -- NULL; 는 아무것도 하지 않는다고 하는 명령
END;

DECLARE
	vNum	NUMBER(2);
BEGIN
	-- ZERO DIVIDE EXCEPTION
	vNum := 1 / 0;
	DBMS_OUTPUT.PUT_LINE('수치=' || vNum);
EXCEPTION
	WHEN ZERO_DIVIDE THEN
		DBMS_OUTPUT.PUT_LINE('계산할 수 없었습니다');
	WHEN OTHERS THEN
	--	< 예외 처리 > 
		RAISE;
END;

DECLARE
	vNum	NUMBER(2);
BEGIN
	BEGIN
		-- ZERO DIVIDE EXCEPTION
		vNum := 1 / 0;
	EXCEPTION
		WHEN ZERO_DIVIDE THEN
			NULL;
	END;
EXCEPTION
	WHEN OTHERS THEN
		< 예외 처리 > 
		RAISE;
END;

SQL> variable :num number;
SQL> EXECUTE :num := function_hoge('아 말하는', TRUE);
     ↓ 변환
     BEGIN :num := function_hoge('아 말하는', TRUE); END;
     ↓ 실행
PL/SQL 프로시저가 정상적으로 완료했습니다.
SQL> print :num
...

SQL> variable :num number;
SQL> CALL function_hoge('아 말하는', TRUE) INTO :num ;
     *
행1으로 에러가 발생했습니다.:
ORA-06553: PLS-306: 'FUNCTION_HOGE'의 소환으로, 인수의 수 또는 형태가 올바르지는 않습니다.

-- 행 코멘트의 예
  ;
  ....
 
 /* 블록 코멘트의 예
  블록 코멘트
 ....
 */
 ；
 ...

BEGIN
	-- NULL = NOP ... NO OPERATION 
	NULL;
END;
/

DECLARE
	vNum	NUMBER(2);
BEGIN
	vNum := 1 ;
	DBMS_OUTPUT.PUT_LINE('수치=' || vNum);
END;

SET SERVEROUTPUT ON 

CREATE PROCEDURE DISP_NUMBER
IS
	vNum	NUMBER(2);
BEGIN
	vNum := 1 ;
	DBMS_OUTPUT.PUT_LINE('수치=' || vNum);
END;

CALL DISP_NUMBER() ;
또는,
EXECUTE DISP_NUMBER

DIV 태그 안에

DIV 태그 안에

UL 태그 안에

LI 태그를 쓰면

리스트들이 DIV 태그를 벗어나는 경우가 있다.

IE에서는 괜찮은데 firefox 에서는 확실히 벗어난다.

아래의 코드를 보자..

div {
      border: 1px solid black;
      width:200px;
}
  ul {
      list-style:none; 
      margin:0; 
      padding:0;
  }
  li{
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      border: 0;
      float:left;
  }

<div>
    <div>

        <ul>
            <li>안의내용</li>
            <li>안의내용1</li>
            <li>안의내용2</li>
        </ul>
</div>

</div>

<li>
    <div>첫번째</div>
    <div>두번째</div>
</li>

var Hoge = function (){ 
    this.name = name; 
 this.tall = tall; 
   } 
Hoge.prototype = { 
     alertA: function() { 
          alert(this.name);   
          alert(this.tall); 
     } 
} 
var hoge = new Hoge('홍길동','180cm'); 
hoge.alertA();

위와 같았다.

위와 같은 표기는 Javascript 에서 클래스를 만드는 대표적인 방법이다.
생성자와 메소드로 나뉘어서 클래스화 하면 보기에도 좋고 소스가 깔끔해진다.

하지만 Javascript 에서 무분별하게 new 연산자를 난발하는 것은 메모리를 많이 잡는다.
new 연산자로 인스턴스를 만들게 되면 prototype 오브젝트를 쓸데없이 전부 가져가게 되는 것이다.
(new 연산자의 낭비에 관해서는 다음 포스팅에)

이로인해 YUI에서는 (ExtJs도) 싱글톤 패턴을 지향한 Javascript Module Pattern 이라는 것을 쓴다.
계속 보자..

1. 네임스페이스 오브젝트를 만들자.
    YUI나 ExtJS에서는 namespace 라는 메소드가 있어 YAHOO 오브젝트와 Ext 오브젝트에 원하는 이름의 오브
   젝트를 만들어준다.
   말이 namespace 이지 그냥 빈 오브젝트이다.
   원래는

YAHOO.namespace("myProject"); Ext.namespce("myProject"); 위의 2개를 써야하지만.. 그냥 myProject = {}; 이렇게 해도 상관이 없다. 다만 myProject가 전에 선언되지 않은 오브젝트이어야 한다.

2. namespace 로 지정해준 오브젝트의 익명함수 return 값을 할당한다.
Ext.myProject.myModule 또는 myProject.myModule 이렇게 위에서 선언한 값으로 해도 된다.
하지만 YAHOO Blog에 포스팅 된것이라 맞춰서 하겠다.

YAHOO.myProject.myModule = function () {
          return  {
               myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.";
               myPublicMethod: function () {
                    YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
               }
          };
}(); // 이곳의 괄호는 익명함수의 return 문을 실행시킨다.

마지막 줄의 괄호()는 끝임을 보강한다. 이 기호는 익명함수  return 안의 오브젝트 myPublicProperty 와 myPublicMethod를 즉시 실행시킨다. 익명함수의 return들과 같이 YAHOO.myProject.myModule의
return 오브젝트와 같다.

3. “private” 메소드 그리고 변수는 익명함수에서 return 문 앞에 쓴다.

YAHOO.myProject.myModule = function () {

  //"private" variables:
                var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

  //"private" method:
                var myPrivateMethod = function () {
  YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
                 }

  return  {
                             myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
               myPublicMethod: function () {
                             YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

  //Within myProject, I can access "private" vars and methods:
  YAHOO.log(myPrivateVar);
  YAHOO.log(myPrivateMethod());

  //The native scope of myPublicMethod is myProject; we can
  //access public members using "this":
  YAHOO.log(this.myPublicProperty);
                               }
  };
}();

 Code Conventions for the JavaScript Programming Language
본 문서는 Douglas Crockford 의 자바스크립트 코딩 컨밴션과 YUI 공개 컨밴션을 기본 문서로 하여 작성된
자바스크립트 토딩 컨밴션 문서다.

Javascript File (코드 파일)
- 자바스크립트 포르그램은 .js 확장자로 저장
- 특정 세션 또는 페이지 로직을 위한 코드가 아니면 HTML 파일과 별도의 파일로 저장.
- <script src=filename.js> 태그를 <body> 의 최대한 밑부분에 위치시켜야 한다. 이것은 스크립트 로딩/파싱으로 인한
  지연을 피할 수 있다. 서버가 MIME type을 정하기 때문에 language 또는 type 속서을 안 써도 된다.

Indetation (들여쓰기)
- 들여쓰기의 기본 단위는 4개의 스페이스이다. 현재까지 탭종료 위치지정에 대한 표준이 존재하지 않기 때문에 탭 쓰기를
  피하는 것이 좋습니다. 스페이스를 쓰면 파일 사이즈가 커질 수 있으나 minification 또는 compressor 툴 등을 쓰면 된다.

Line Length (줄 길이)
- 한 라인의 문자수가 80자 이하로 작성하는 것이 좋다. 80자 이상일 경우 다음줄로 넘길 때 연산자 다음으로 넘겨여 한다.
- 콤마가 되로 줄넘기기가 제일 좋다.  다음줄의 8개의 스페이스로 들여쓰기 한다.

Comments (주석)
- 항상 코멘트를 닿을 때 당신의 코드를 이해하고 수정하고 추가해야 하는 사람의 노고를 생각하야 한다.
- 한 눈에 보고 코드의 목적, 흐름, 메인 로직을 쉽게 파악할 수 있도록 작성하는 것이 좋으면 너무 길거나 복잡하면 안된다.
- 약간의 유머가 있으면 더 좋죠^^. 단지 실망시키지 마세요~~ 예를 들면
 i = 0; // Set i to zero. 이것이 전혀 쓸때 없는 코멘트이다.
- 기본적으로 라인 코멘트를 사요하고 블럭 코멘트를 문서화나 주석에 사용하세요.
- 알려진 이슈나 기능요청이 있으면 TODO 코멘트 하기
- 실제 production release 또는 실서버에 옮기기 전에 해결해야 하는 코드 부분이 있을 경우 FIXME 코멘트 하기
- 중요한 TODO 일 경우 bug tracker 에 꼭 이슈 티켓을 쓰기

JavaDoc Style Comments
- 자동 문섬 생성 툴은 JavaDoc, JsDoc, JsDoc Toolkit, ScriptDoc, Helma 등으 라이브러리 사용 가능
/**
 * The module object is ....
 * @module
 * @requires
 * @optional
 * @title
 * @beta
 * @experimental
 */

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/

/**
 * Class is ...
 * @description (deprecated?)
 * @namespace
 * @class
 * @method
 * @property
 * @event
 * @uses
 * @private
 * @public
 * @static
 * @type
 * @constructor
 * @param {type} name Remark
 * @return
*/

Variable Declarations (변수 선언)
- 모든 변수를 사용하기 전에 선언해야 한다. Javascript 는 이것을 요구하진 않지만 프로그램의 더 이해하기 쉽게 하고
  변수가 (Implied)비의도적으로 전역변수(global variable) 될 수 있는 것을 방지할 수 있다.
- var 구문 변수 선언들을 함수 버디의 가장 위부분에 해야 한다.
- 변수들을 각각의 하나의 라인에 alphabetical 순서대로 선언하고 코멘츠를 달아주는 것이 좋다.
- 전역변수 사용을 되도록 최소화하고 비의도적의 전역변수의 사용을 금지

Variable Type Prefixes
aFoo   array  
dtFoo  date  
eFoo  error  
elFoo  HTML element  
doFoo  function related to the fooEvent handler, which may be called separately or overridden  
fnFoo  function  
nFoo  number  
oFoo  object  
onFoo  function to handle fooEvent  
sFoo  string  
xFoo  regular expression  
isFoo  boolean  also hasFoo, useFoo, or bFoo

Suffixes
fooEvent   event fired when Foo happens

Coding Tools
- syntax 또는 symantic 체크를 Javascript Lint(http://www.javascriptlint.com/) 같은 validation 툴을 쓴다.

Function Declarations (함수 선언)
- 모든 함수 선언 사용전에 해야 한다. inner 함수는 var 구문 뒤에 한다. 이것은 함수 scope 에 어떤 변수들이 있는지를 명확하게 해 준다.
- 함수의 이름과 왼쪽 파라미터 소괄호 "(" 사의에 공백이 있으면 안된다.
- 오른쪽 파라미터 소괄호 ")" 와 함수 버디 구문의 시작인 왼쪽 중괄호 "{" 사의에 1개의 스페이스를 둔다.
- 버디는 4개의 스페이스으로 들여쓰이고 버디 닫는 "}" 중괄호는 함수 시작 리안과 마춰야 한다.

    function outer(c, d) {
        var e = c * d;

        function inner(a, b) {
            return (e * a) + b;
        }

        return inner(0, 1);
    }
- 자바스크립트에서 함수와 오브젝트 리터럴이 표현식(expression)이 허용되면 어디서나 쓰여질 수 있기 때문에 이 컨벤션은 잘 맞는다.
  inline 함수와 복잡한 구조에도 좋은 가독성(readability)를 제공한다.

    function getElementsByClassName(className) {
        var results = [];
        walkTheDOM(document.body, function (node) {
            var a;                  // array of class names
            var c = node.className; // the node's classname
            var i;                  // loop counter

// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the set of results.

            if (c) {
                a = c.split(' ');
                for (i = 0; i < a.length; i += 1) {
                    if (a[i] === className) {
                        results.push(node);
                        break;
                    }
                }
            }
        });
        return results;
    }
- 만약에 함수 리터럴이 anonymous(익명)일 경우 "funciton" 단어와 왼쪽 "(" 관호 사이에 역시 1개의 스페이스를 둔다. 스페이스가 빠지면
  "function" 란 이름의 함수로 혼될 수 있어서 가독성이 떨어진다.

    div.onclick = function (e) {
        return false;
    };

    that = {
        method: function () {
            return this.datum;
        },
        datum: 0
    };

- 전역 함수의 사용을 최소화  해야 한다.

Names (이름)
- 함수, 변수 등의 이름이 26개의 대소문자 (A .. Z, a .. z), 10개의 숫자 (0 .. 9)와 _ (underbar) 으로 구성되어야 한다.
  국제문자 또는 $ (dollar sign),  \ (backslash) 등의 특수문자의 사용금지
- 이름의 첫번째 문자로 _(underbar) 를 사용 금지. 이는 가끔 private 변수로 사용되지만 실제로 private 이지 못한다.
- 일반적으로 변수와 함수가 소문자로 시작되어야 된다.
- new 접두어와 같이 사용되는 생성자 함수는 대문자로 시작된다. 자바스크리트는 new 누락시 compile-time warning 또는
  run-time warning 을 주지 않기 때문에 안 좋습니다.
- 전역 변수일 경우 모두 대문자로 쓴다

Statements (구문)

Simple Statements (단순)
- 모든 단순 구문의 끝에 ; (semicolon) 을 붙인다. 함수 리터럴 또는 오브젝트 리터럴을 할당(assignment) 하는 구문도 할당구문이며 semicolon 으로 끝나야 한다는 것을 주의해야한다..
- 자바스크립트에서 모든 표현식을 구문으로 쓸 수 있기 때문에 semicolon으로 끝난 구문과 끝나지 않은 구문과 혼동될 수 있다.
  이것을 방지하기 위해 단지 할당 표현식과 호출 표현식을 구문으로 인식하고 뒤에 semicol을 붙인다.

Compound Statements (혼합 구문)
- 혼합 구문은 { } 중괄호 안에 여러 개의 구문을 포함하는 구문이다.
- 혼합 구문안의 구문들은 추가 4개의 스페이스으로 들여씌여야 한다.
- 왼쪽 "{" 중괄호는 구문 시작줄의 끝에 있어야 한다.
- 오른쪽 "}" 중괄호는 새 줄에 쓰이며 구문 시잘줄의 시작과 들여쓰기 마춰져야 한다.
- 혼합 구문이 단 1개의 구문을 포함하고 있더라고 "{ }" 중괄호로 둘러쌓는 것이 좋다. 예를 들면 만약 if 구문이 중괄호 없으면 나중에 구문을 더
  추가시 오류를 발생시킬 수 있다

Labels
- 구문 라벨을 선택사항이고 while, do, for, switch 구문에서만 사용될 수 있다

return Statement (반환 구문)
- return 구문에서 반환되는 변수 또는 값을 ( ) 소괄호로 둘러쌓으면 안 된다. 반환 표현식은 return 과 같은 줄에서 시작되야 한다.

if Statement
- if 형태의 구문들의 다음과 같은 형식을 취한다.

     if (condition) {
        statements;
    }
   
    if (condition) {
        statements;
    } else {
        statements;
    }
   
    if (condition) {
        statements;
    } else if (condition) {
        statements;
    } else {
        statements;
    }

for Statement
- for 형태의 구문들의 다음과 같은 형식을 취한다.

     for (initialization; condition; update) {
        statements;
    }

    for (variable in object) if (filter) {
        statements;
    }

- 첫째 형식은 array 에서 사용되어야 하고 정해진 수의 반복을 해야 한다.
- 둘째 형식은 오브젝트와 사용된다. 오브젝트의 prototype에 추가되는 멤버들과 실제 오브젝트의 멤버들을 구별하기 위해
  hasOwnProperty 메소드를 사용하는 것이 바람직하다.

     for (variable in object) if (object.hasOwnProperty(variable)) {
        statements;
    }

while Statement
- while 형태의 구문들의 다음과 같은 형식을 취한다.

     while (condition) {
        statements;
    }

do Statement
- do 형태의 구문들의 다음과 같은 형식을 취한다.

    do {
        statements;
    } while (condition);

- 다른 혼합 구문들과 달리 do 구문은 항상 ; (semicolon) 으로 끝난다.

switch Statement
- switch 형태의 구문들의 다음과 같은 형식을 취한다.

    switch (expression) {
    case expression:
        statements;
    default:
        statements;
    }

- case 는 들여쓰기 필요없기 때문에  switch 가 맞춰져야 한다.
- default 를 제외한 모든 statement가 break, return 또는 throw로 끝나야 한다. fall through 하지 말 것.

try Statement
- try 형태의 구문들의 다음과 같은 형식을 취한다.

    try {
        statements;
    } catch (variable) {
        statements;
    }

    try {
        statements;
    } catch (variable) {
        statements;
    } finally {
        statements;
    }

continue Statement
- continue 구문으로 되도록 사요하지 말아야 한다. 이것은 함수의 로직흐름을 애매모호하게 만들기 때문이다.

Whitespace
- 공백줄이 로직적으로 관련된 코드 섹션들을 분리해주고 가독성을 높인다.
- 공백 스페이스는 다음과 같은 상황에서 쓰인다:
    - keyword의 뒤에 왼쪽 "(" 소괄호가 있는 경우 1개의 스페이스으로 분리한다. 이것은 함수 호출과 keyword 호출을 구별하는데 도움이 된다.
      while (true) {
    - . (점)과 "(" 외쪽 관호와 "[" 대괄호를 제외한 모든 binary 연산자들은 피연산자와 1개의 스페이스으로 분리되어야 한다.
    - 또는 typeof 같은 unary 연산들을 제회한 모든 unary 연산자들은 피연산자과의 사이에 스페이스가 없어야 한다.
    - for 구문의 제어부분에 들어가는 각 구문은 ; (semicolon) 으로 끝나고 중간사이에 1개의 스페이스가 들어간다.
    - 모든 , (comma) 콤마 뒤에 공백이 붙어야 한다.

Bonus Suggestions

{} and []
- 오브제트를 생성할 때 {} 대신에 new Object() 를 사용하다.
- [] 대신에 new Array() 를 사용
- 멤버들의 이름이 순차적일 경우 array 를 사용하다.
- 멤버들의 이름이 의미의 string 일 경우 object 를 사용하다.

, (comma) Operator
- 콤마 연산자의 사용을  for 구문의 제어부분에서의 정말 규칙적인 사용을 제외하여 되도록 피해야 한다.
  (이것은 object 리터럴, array 리터럴, var 구문과 파라미터 목록 등에서 쓰이는  comma seperator 에 적용되지 않는다. )

 Block Scope
- 자바스크립트는 블럭은 scope 가 없고 유일하게 함수는 scope 를 가지고 있다.  혼합구문에서 사용되는 경우 말고는 블럭을 쓰지 말 것.

 Assignment Expressions
- if 와 switch 구문의 제어부분에 할당을 하지 말아야 한다.  if (a = b) { 를 의도한 것인지   if (a == b) { 를 의도한 것인지를 구별할 수 없다.

=== and !== Operators
- 연산자 == 와 != 들은 변수의 타입 체크를 하지 않기 때문에 되도록 === 와 !== 연산자 사용을 추천한다.

Confusing Pluses and Minuses
- a+ 뒤에 + 또는 ++ 를 붙이지 말아야 한다. 이것은 혼동을 유도한다.
    total = subtotal + +myInput.value; 를 total = subtotal + (+myInput.value); 으로 더 파악하기 쉽게 쓸 수 있다.

eval is Evil
- eval 함수는 자바스크립트에서 가장 많이 잘 못 쓰이는 기능이다. 피해야 한다.
- eval 는 aliases 를 갖고 있다
- 절대 Function 생성자를 쓰지 말 것
- 절대 setTimeout 또는 setInterval 함수에 string 을 넘기지 말 것.

참고:
1. Code Conventions for the JavaScript Programming Language (http://javascript.crockford.com/code.html)
2. Conventions  (http://code.google.com/p/yazaar/wiki/Conventions)

Write By : CHULUUNKHUUENKHCHULUUN (엥흐촐론)

Javascript 클래스에서 상속에 관해 들어가기전에

앞의 4개의 포스팅에 관해 다시 한번 정리하고 넘어가겠다.

에 관해

다른건 다 두고서라도

이것에 관해 집고 넘어가겠다.

firefox 와 오페라 9.5(분명 비표준인데 이번에 __proto_ 속성을 추가했다.. 이 시대를 역행하는 오페라 -_-)__proto__ 속성이 있어 프로토 타입 체인을 __proto__ 속성으로 연결한다.

하지만 IE와 사파리에서는 __proto__ 속성이 없고 대신 constructor.prototype 로 __proto__ 를 대체한다.
prototype ECMA 에서 지정한 표준이다.

(IE는 표준을 지키지 않아서 말이 많은데 이건 잘 지키고 있구나..)

이것때문에 앞의 4개의 포스팅을 하면서 의아한 면이 있었는데

이번에 풀렸다..

도움을 주신 행복한 고니님께 감사의 말을.. 전합니다. (음홧홧홧)


그럼 다음은 상속에 관한 포스팅으로 넘어가자

이걸 4개의 포스트에 걸쳐 쓰게 될 줄은 몰랐다. -_-

처음에는 가볍게 시작한 공부였으나..
(이건뭐... 보면볼수록 새로운게 나오니... -_-)

말 그대로 시작은 미미했으나 끝은 창대하리라...

허어...

--------------------------------------------------------------------------------------------------
다시 정리해보자

constructor : 초기화에 사용된 함수(오브젝트)

prototype: 확장하기 위한 오브젝트 (constructor로 초기화된 오브젝트에 대해서)

__proto__ : 프로토타입 오브젝트(프로퍼티가 발견되지 않았을 때에 탐색하러 가는 오브젝트)

이렇게 되는 것인데... (브라우져 마다 틀리다.. -_- firefox 에서는 __proto__ 를 쓰는데 IE에서는 안쓰고
                                prototype 이 대체한다. 괴롭다... 제길)

ECMAscript3 의 오브젝트는 Hash 연상배열이다. 또 각각의 오브젝트는, 프로토 타입 오브젝트를 가진다.
__proto__ 는 Firefox 등에 있는 독자적인 프로퍼티이다.
(firefox 이외에는 잘 모르겠다. 다만 IE 에서는 없다. 대신 이 프로퍼티를 prototype 프로퍼티가 대체한다.)
다음의 코드를 보자

이렇게 성립이 된다.
이전 포스트에서 마지막에 한것이다.
여기에서 프로토 타입 오브젝트와 prototype 프로퍼티에 속해있는 오브젝트는 별개이다.

a 는 constructor 프로퍼티를 가지고 있지 않은 것에 주의해야한다.
constructor은 프로토 타입 체인으로 가지고 있다.( 이것은 첫번째 포스트에서 언급했다.)

프로토 타입 체인이란..

위에서 b.a 로 'a' 의 값이 나올수 있었던것이 프로토 타입 체인이라고 불리는 구조이다.
a 와 b 오브젝트를 생성했을때에는

위와 같이 b.a와 a.a는 같은 오브젝트를 가리키고 있는 것을 알 수 있다.

__proto__  와 생성자의 관계

 new Constructor 로 초기화 될때

이런 식으로 내부에서 실행되고 있는거 같다. a.constructor은 프로토 타입 체인에서 가지고 있지 않는다.

Array.prototype.fill = function() {};

등과 Array 생성자의 prototype 프로퍼티의 오브젝트를 확장하는 것으로  Array 생성자로 생성된 모든 오브젝트에 대해 확장을 한것과 같은 효과를 같는다.

이렇게 된다.


Javascript The Definitive Guide 5th Edition(자바스크립트 완벽가이드)의 p.170 - 171의 오브젝트 관계도 이다.
(내가 말하는 책은 번역서가 아니고 원서이다.. )
 



책에 보면
Rectangle과 PositionedRectangle의 관계는 위의 그림과 같이 되어 있다.
(화살표의 X 표시는 프로토 타입 체인이 연결된다는 표시이다.)

이것의 코드는

Rectangle.prototype 등에는 이름이 없었기 때문에 편의상 _p라는 이름을 붙였다.

예를 들어 r.area 라고 하는 프로퍼티는

1. r.area

2. r.__proto__.area

3. r.__proto__.__proto__.area

이렇게 탐색이 된다.

__proto__ 를 사용하지 않고 어떻게, 붉은 화살표를 연결하고 있는가?

__proto__ 는 ECMA 표준이 아니다. 하지만 지금은 이러한 체인을 만들고 싶은 것이다.
거기서 new Rectangle 로 생성한 오브젝트를 prototype으로 프로토 타입 체인을 형성하고 있다.
책에서 보면 후에 이 오브젝트로부터 불필요한 프로퍼티를 delete 하고 있다.

푸른 화살표만 있으면, 메소드의 탐색은 가능하다.

PositionedRectangle.prototype.constructor = PositionedRectangle;

위의 코드가 없으면  PositionedRectangle 로 만든 오브젝트는 constructor 프로퍼티를 가지지 않기 때문에,
r.constructor === Rectangle; // true

가 되어 버린다.

이것에 관해서는 다음의 포스팅에 prototype 과 constructor 를 이용한 상속에 관해 써볼것이다.