Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chaining

# Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chaining Web browser 에서 쓰이는, "Object-based based on prototypes" 특성을 갖는 client-side 프로그래밍 언어인 JavaScript를 배워 봅시다. 여기는 제가 헷갈렸던 부분만 조금 정리. ## PH

• 2017-08-14: 코드 스타일만 좀 정리. To SEE.
• 2014-06-13: docuK upgrade.
• 2014-05-21: First Posting.

## TOC ## Making an instance from a constructor function (class-like)

Note: The term "instance" has a specific technical meaning in class-based languages (like C++, JAVA). In these languages, an instance is an individual instantiation of a class and is fundamentally different from a class. In JavaScript, "instance" does not have this technical meaning because JavaScript does not have this difference between classes and instances. However, in talking about JavaScript, "instance" can be used informally to mean an object created using a particular constructor function. So you could informally say that jane (=new Engineer) is an instance of Engineer (=function object). Similarly, although the terms parent, child, ancestor, and descendant do not have formal meanings in JavaScript; you can use them informally to refer to objects higher or lower in the prototype chain. (Quoted from - 11. Details of the object model - # Creating the hierarchy, and slightly edited by kipid.)

Code:

Result: (Tistory 에서 사용하는 javascript 가 Function.prototype 에 뭔가 덮어씌운듯. 결과가 그냥 실행시킬때랑 다름.)

## Property inheritance (Prototype/__proto__ chaining)

An Example of simple object hierarchy.
Copied from: - 11. Details of the object model - # The employee example.

아래 예제를 공부하면서는 각자 object hierarchy를 그려보면서 (property도 표시하면서) 이해하는 것이 도움이 된다. 개인적으로 그려놓긴 했는데, 손으로 그린거라 사진찍어서 올리기 귀찮;;; 계층도를 그릴 때 "a=b;" 명령어에서 b가 primitive type일 경우에만 'return by value'이고 그 외 javascript ojbect 일 때에는 'return by reference'로 이루어진다는 것에 주의하자. 'Return by reference'는 화살표로 원래 object를 가리키는 것이 이해에 좋다. ('a=b;'로 assign 될 때에는 GetValue(b) 가 호출되는 듯한데, b가 primitive type (number, string, boolean literals + undefined, null) 이라면 value를 이 외 object (including Number, String, Boolean objects) 라면 이 object의 address/reference가 return 되어 assigned.) (See - #11.13.1 Simple Assignment ( = ) for the details. #4.3.2 primitive value: member of one of the types Undefined, Null, Boolean, Number, or String as defined in Clause 8. NOTE: A primitive value is a datum that is represented directly at the lowest level of the language implementation.)

When JavaScript sees a property of an object, in other words, when you access an object property, JavaScript performs these steps.

1. Check to see if the value exists locally in that object. If it does, return that value. (This is called 'own property', property that is directly contained by its object. - 4.3.30 own property.)
2. If there is not a local value, check the __proto__ chain (using the __proto__ property). All object have the '__proto__' property by default.
3. If the specified property exists in the __proto__ chain, return that value. (This is called 'inherited property', property of an object that is not an own property but is a property (either own or inherited) of the object’s prototype. - 4.3.31 inherited property.)
4. If not, check the successive __proto__ chain until __proto__ return 'null'.
5. If no such property is found, the object does not have the property. So return 'undefined'.

(Quoted from - 11. Details of the object model - # Property inheritance revisited - # Local versus inherited values, and slightly edited further by kipid.)

Code:

Result:

Property inheritance 특성으로 인해서 html child tag 들이 parent tag 의 attr 를 쉽게 상속받고 parent tag 의 attr 수정이 쉽게 child 쪽에 적용이 되는듯함. OnAttributeChange event 같은것도 있는건가? 인터넷 브라우저가 참 잘만들어진듯 =ㅇ=;;; 신기하당. ## RRA

Guides

1. MDN (Mozilla Developer Network) - JavaScript Guide, and JavaScript Reference; 프로그래밍 언어로 깊이있게 배우는 목적이라면 이것을 읽는 것이 좋은듯. Wiki 비슷하게 집단 편집방식으로 작성된 문서인데, 깊이있게 잘 정리되어 있음.
2. w3 Schools.com - JavaScript Tutorial, and JavaScript and HTML DOM Reference; 여기를 마음에 안들어하는 사람들도 많은듯. Outdated 된 내용들도 있고 오개념을 심는 경우도 있는듯해서... 뭐 그래도 "Try yourself"가 잘되어 있어서 후딱후딱 배우기 좋음. 단 여기 설명한 방식이 정확하고 최선이다라고는 받아들이지 말아야 할듯.
3. Open Tutorials.org - JavaScript; 한글 페이지. Egoing님이 동영상 강의로 쉽게 설명해주심.

General

4. Wiki - JavaScript
5. Ecma International.org - Standard ECMA-262 - 5.1 Edition, 2011-06; and es5.github.io - Annotated ECMAScript 5.1 (annotated, hyperlinked, HTML version of Edition 5.1 of the ECMAScript Specification), Last updated: 2013-08-31; JavaScript was formalized in the ECMAScript language standard. ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262.
   // 기본적인 operator들 (+,-,%,/,= 등), function, object들의 Logic이 bottom-up으로 정말 자세히 설명되어 있음.

jQuery

6. jQuery.com; and jQuery API documentation;
   // Cross-browsing이랑 문법/coding을 매우 간편하게 해주는 jQuery. 특히나 successive calling을 가능하게 해줘서 좋음.