음 아마 비둘기보단 똑똑할꺼야
준돌 Jundol / 2015.10.30 14:57 / JavaScript/Core

본 포스팅은 MDN에 있는 변역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.

추가적인 사담이 존재합니다.


Object.observe()

Object.observe() 메소드는 객체에 변화가 생기는 것을 감지하는 곳에 사용됩니다.

observe 메소드는 객체내에 변화가 생겼을 때 명령을 내리는 것을 제공합니다.

사담 : Object.observer() 메소드는 ECMAScript7 에서 지원하는 것이므로 2016년에 배포될 예정입니다.

브라우저 지원은 포스팅하는 지금 시점에는 크롬 46버전 부터 지원하는 것으로 알려져있습니다.

현재 크롬 최신 버전은 47 버전이므로 크롬으로 테스트하실경우 테스트가 가능합니다.

문법

Object.observe(obj, callback[, acceptList])

매개변수

obj
감시할 객체.
callback
콜백함수는 아래와같은 변수변화가 생길때 호출됩니다. 
changes
changes 배열객체의 프로퍼티들은 아래의 객체들과 같습니다.
  • name: name 프로퍼티는 변화가 생긴 프로퍼티 이름 입니다.
  • object: 객체의 변화가 생긴 후의 객체를 가리킵니다. 즉, 변화가 생긴 객체.
  • type: 문자열인 이 프로퍼티는 "add", "update" 혹은 "delete" 중 어떤 변화인지 나타냅니다.
  • oldValue: "update"와 "delete" 타입에서만 값이 할당되며 변화되기 이전의 값을 나타냅니다.
acceptList
The list of types of changes to be observed on the given object for the given callback. If omitted, the array ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]will be used.

설명

콜백은 객체의 변화가 있을 때 호출 됩니다.

예시

6가지 모든 타입을 기록합니다.

var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});

obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]

obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]

delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]

Object.defineProperty(obj, 'foo', {writable: false});
// [{name: 'foo', object: <obj>, type: 'reconfigure'}]

Object.setPrototypeOf(obj, {});
// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}]

Object.seal(obj);
// [
//   {name: 'foo', object: <obj>, type: 'reconfigure'},
//   {name: 'bar', object: <obj>, type: 'reconfigure'},
//   {object: <obj>, type: 'preventExtensions'}
// ]

데이터 바인딩

// A user model
var user = {
  id: 0,
  name: 'Brendan Eich',
  title: 'Mr.'
};

// Create a greeting for the user
function updateGreeting() {
  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // Any time name or title change, update the greeting
    if (change.name === 'name' || change.name === 'title') {
      updateGreeting();
    }
  });
});

직접 변화를 시켜보겠습니다.

// A point on a 2D plane
var point = {x: 0, y: 0, distance: 0};

function setPosition(pt, x, y) {
  // Performing a custom change
  Object.getNotifier(pt).performChange('reposition', function() {
    var oldDistance = pt.distance;
    pt.x = x;
    pt.y = y;
    pt.distance = Math.sqrt(x * x + y * y);
    return {oldDistance: oldDistance};
  });
}

Object.observe(point, function(changes) {
  console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
}, ['reposition']);

setPosition(point, 3, 4);
// Distance change: 5

특징

Strawman proposal for ECMAScript 7.

ECMAScript7 에 포함될 예정입니다.

브라우저 지원

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support36Not supported [1]Not supported [2]23Not supported

[1]: See bug 800355

[2]: See relevant MS Edge platform status entry

See also


준돌 Jundol / 2015.10.28 23:31 / JavaScript/Core



http://kangax.github.io/compat-table/es6/#ie10


브라우저별로 현재 지원되고 있는 core function 을 확인할 수 있는 사이트입니다.

잘 정리가 되어 있고 가독성도 높습니다.

ECMASCRIPT6 는 엣지브라우저에서나 사용할 수 있을 것 같네요.

빌어먹을 IE


준돌 Jundol / 2015.10.28 23:26 / JavaScript/Core

본 포스팅은 MDN 에 있는 번역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.

추가적인 사담이 존재합니다.



TypedArray.prototype.fill()

fill 메소드는 배열의 모든 요소를 지정한 시작 인덱스부터 종료 인덱스까지 정적인 값으로 채우는 메소드입니다.
TypedArray.prototype.fill 메소드는 Array.prototype.fill 메소드와 동일한 알고리즘을 가지고 있습니다.
TypedArray 는 typed array types 이곳에 있는 것 중 하나 입니다.

사담 : 개인적으로 정말 마음에 안듭니다. fill 이라는 범용적으로 사용되는 단어를 코어함수의 이름으로 사용한건 정말 별로네요...


문법

typedarray.fill(value[, start = 0[, end = this.length]])

매개변수

value
배열에 채워넣을 값.
start
선택사항. 시작 위치. 기본값은 0.
end
선택사항. 종료 위치 (종료위치를 포함하지않습니다. 즉, end -1 까지만 해당됩니다.). 기본값 this.length(배열의 길이).

설명

start 와 end 사이에 요소들을 채웁니다.

fill 메소드는 value, start 그리고 and 3개의 매개변수를 요구합니다. start 와 end 매개변수는 선택사항이며 기본값은 0 과 지정한 배열객체의 길이값 입니다.

만약 start 매개변수가 음수이면, start 의 값은 배열의 길이값을 합한 결과가 시작지점이 되고, 만약 end 가 음수라면, end 매개변수와 배열의 길이값을 합한 결과가 종료지점이 됩니다.

예시

new Uint8Array([1, 2, 3]).fill(4);         // Uint8Array [4, 4, 4]
new Uint8Array([1, 2, 3]).fill(4, 1);      // Uint8Array [1, 4, 4]
new Uint8Array([1, 2, 3]).fill(4, 1, 2);   // Uint8Array [1, 4, 3]
new Uint8Array([1, 2, 3]).fill(4, 1, 1);   // Uint8Array [1, 2, 3]
new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]

특징

SpecificationStatusComment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'TypedArray.prototype.fill' in that specification.
StandardInitial definition.

브라우저 지원

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic supportNot supported37 (37)Not supportedNot supportedNot supported

See also

원본 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/fill

준돌 Jundol / 2015.10.02 00:23 / JavaScript/Core





IE9 과 window.console 객체


오늘은 ie9 와 window.console 객체에 대하여 포스팅 해 보도록한다.

근무중인 회사에 OO 편집기에서 3개월만에 신규 배포한 버전이 IE9 에서 실행되지 않는다는 버그 리포트를 갑작스레 받게되었다.

처음엔 굉장히 당혹스러웠다. 내부 QA에서 잘 동작하는걸 확인하고 배포하였으나 클라이언트에서 초기화가 되지않는다니!!!

클라이언트 환경 문제라 생각하였지만 이슈화되고 디버깅을 시작하니 vmware native ie9 에서 편집기가 구동조차 되지 않는 심각한 문제인 것을 확인하였다.

이전 버전과의 code diff 를 통해 알아보니 튜닝작업을 진행하면서 편집기 시작시간을 체크했던  console.log 가 말썽을 부리고있었다.

개발도중에는 항상 개발자모드를 켜놓고 개발을 진행하니 당연히 window.console. 객체가 생성되어있는 상태였고 클라이언트가 개발자모드를 켜놓고 편집기를 실행하진 않으니 말이다...


IE9(and ie8) 에서 console 객체는 개발자도구를 따로 열었을 경우에만 노출된다.

개발자도구를 켰다가 껏더라도 console 객체는 노출된채로 남아있게 된다.

만약 ie9 혹은 ie8을 가지고 있다면 아래 링크를 한번 실행해 보면 알 수 있다.

http://jsfiddle.net/Hmmim/6ouacgoy/

소스코드

1
2
3
console.log("first console.log");

alert("hi?????");

예제 코드는 굉장히 간단하다.

ie9 혹은 ie8 로 개발자도구를 실행한적 없이 위 코드를 실행하면 "hi?????" 라는 alert 창은 띄워지지 않는다.

console 객체가 생성되지 않아 오류가 발생한다고 ie9 에서는 따로 알려주지 않는다.

그래서 더욱 헛짓거리 삽질 하기 쉬워진다.


해결책은 전역 컨텍스트 위치에 wiondow.console 객체를 찾는 if 문을 두고 없다면 만들어주거나 다른 함수로 window.console 을 만들면 된다.


참고링크

http://stackoverflow.com/questions/5472938/does-ie9-support-console-log-and-is-it-a-real-function

http://stackoverflow.com/questions/10183440/console-is-undefined-error-in-ie9

준돌 Jundol / 2015.06.11 15:28 / JavaScript/Core



!! [double exclamation mark]

주로 타입을 boolean 으로 변경할 때 사용한다.


느낌표가 한 개 일때는 not 이라는 표현이다.

두개일 때는 not not


자 이제 프로그래밍 언어에서 0은 false란 뜻이고 0이외의 숫자는 true 라는 의미이다.

또한 객체는 true 다.

하지만 이걸 true 혹은 false 로 boolean 형태로 나타내고 싶다면

! [exclamation mark] 를 사용하면 된다.

별로 좋은 방법은 아니라고 생각한다. 가독성 면에서 떨어진다랄까?


! 은 Not , !true 는 false , !false 는 true , !0 은 true , !1 은 false

어떠한 타입이건 boolean 타입으로 변경이 가능하다.

준돌 Jundol / 2015.06.10 17:05 / JavaScript/Core


Document.createEvent()

DOM 레벨 2 이벤트

지원 브라우저
크롬 15, FF 11, Opera 11.6, Safari 6
IE는 DOM Events 모듈을 지원하지 않기 때문에 지원되지않는다.

Event createEvent(String eventType)

         throws DOMException

반환값
지정된 타입을 갖는 새로 생성된 Event 객체.

전달인자
eventType --> 원하는 Event 객체에 대한 이벤트 모듈의 이름.

예외 
현재 구현이 요청된 타입의 이벤트를 지원하지 않으면, code 값이 NOT_SUPPORTED_ERR 인 DOMException 을 발생시킨다.

설명
파라미터로 전달받은 이벤트타입을 갖는 새 이벤트 객체를 생성한다. 주의점은 파라미터의 값이 생성할 인터페이스(단수형)의 이름이 아니라 해당 인터페이스를 정의하는 DOM모듈(복수형)의 이름이어야 한다는 것이다. 


 eventType 전달인자

이벤트 인터페이스 

초기화 메소드 

HTMLEvents 

Event 

initEvent() 

MouseEvents 

MouseEvent 

initMouseEvent() 

UIEvents 

UIEvent 

initUIEvent() 


Document.createEvent() 메소드로 Event객체를 생성한 후에는 반드시 위 표에 있는 초기화 메소드를 이용해서 그 객체를 초기화 해야한다.


예제
구식방법
자바에서 영감을받아 작성한 구식이벤트 발생방법.

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
document.addEventListener('build', function (e) {
  // e.target matches document from above
}, false);

// target can be any Element or other EventTarget.
document.dispatchEvent(event);

이벤트를 정의하는 굉장히 오래된 기법이다. 없어질 기법이라고 봐도 무방할것 같다.

참고
1. 자바스크립트 완벽가이드 별책 page.1010
2. 모질라 개발자네트워크
https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent

준돌 Jundol / 2015.01.26 10:38 / JavaScript/Core

JavaScript 에서는 상속개념을 자주 쓰다보면 머리에 쥐가나고 불필요한 메소드에 프로토타입까지 상속받아오느라 메모리 낭비도 심해진다.


JavaScript는 굉장히 유연한 언어이기때문에 별게 다된다... (java,C 만 배우던 나에겐 정말 컬쳐쇼크...)


바로 메소드만 살짝쿵 빌려와서 써버리는것!! 일명 메소드 빌려쓰기!


이건 뭐 날강도수준이다... 세상에 남의 메소드를 살짝 빌려와서 써버린다니... 그것도 그냥! 그냥!! 쓸수있다.


call, apply 이 두놈이 정말 날강도다. 소매치기 수준!


일단 정확한 문법과 사용을 집고 넘어가자


call()

Syntax

fun.call(thisArg[, arg1[, arg2[, ...]]])


Parameters

fun : 가져다쓸 메소드

thisArg : 현재 객체로 사용될 객체

arg1,arg2,arg3 : 메소드에 전달할 인자목록


JavaScript에서는 this 키워드가 굉장히 중요하다. call()를 사용하게 되면 this는 thisArg객체를 가리키게 되는데 전달하지않으면 전역객체를 가리킨다.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
function callMe(arg1, arg2){
    var s = "";

    s += "this value: " + this;
    s += "<br />";
    for (i in callMe.arguments) {
        s += "arguments: " + callMe.arguments[i];
        s += "<br />";
    }
    return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with call: <br/>");
document.write(callMe.call(3, 4, 5));


그냥 막 갔다 쓰면 된다. 안어렵다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0)
    throw RangeError('Cannot create product "' + name + '" with a negative price');
  return this;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}
Food.prototype = new Product();

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}
Toy.prototype = new Product();

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);


 

이제는 이놈과 형제급인 

apply()

Syntax

fun.apply(thisArg[, argsArray])

Parameters

fun : 위와 동일

thisArg : this객체로 사용될 객체

argsArray : 함수에 전달할 인수 집합 인데 배열로 전달한다. call은 인수로 보내고 apply는 배열로 보낸다.




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function callMe(arg1, arg2){
    var s = "";

    s += "this value: " + this;
    s += "<br />";
    for (i in callMe.arguments) {
        s += "arguments: " + callMe.arguments[i];
        s += "<br />";
    }
    return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));

// Output: 
// Original function: 
// this value: [object Window]
// arguments: 1
// arguments: 2

// Function called with apply: 
// this value: 3
// arguments: 4
// arguments: 5


이놈도 별거없다. 그냥 쓰면된다. 


위 두 놈을 쓰는곳 혹은 책에서 많이 출몰하시는

Array.prototype.slice.call(arguments,0) 뭐 요로케 많이 들어가는데 별거없다. 걍 slice 메소드 가져다 쓰겠다는거다. 그리고 반환값을 변수에 저장하면 끝!

준돌 Jundol / 2015.01.26 10:37 / JavaScript/Core

지금까지 JavaScript를 사용하다 보면 html 파일안에 <script>태그를 <head>에 넣었는데 


해외 예제를 보던중 지금까지 했던 방식으로 했더니 동작이 안되는것이였다.


예제는 [Automatically Maximize Text Contrast On A Page] 였는데, ColorPicker를 이용 background를 비동기적으로 변경하는 예제였다.


소스참조


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function splitComponent(color) {
            var rgbColors = new Object();
            color = color.substring(color.indexOf('(') + 1, color.indexOf(')'));
            var result = color.split(',', 3);
            return result ? {
                r: parseFloat(result[0] / 255),
                g: parseFloat(result[1] / 255),
                b: parseFloat(result[2] / 255)
            } : null;
        }
        var gamma = 2.2,
        test = document.getElementById("test");
        function changeBG(colorValue) {
            test.style.backgroundColor = colorValue;
            var computedStyle = getComputedStyle(test, null);
            var bgColor = computedStyle.backgroundColor;
            var luminosity = 0.2126 * Math.pow(splitComponent(bgColor).r, gamma) + 0.7152 * Math.pow(splitComponent(bgColor).g, gamma) + 0.0722 * Math.pow(splitComponent(bgColor).b, gamma);
            if (luminosity < 0.5) { test.style.color = "#fff" } else { test.style.color = "#000" }
        }
    </script>
    <style>
        #test { background-color: #332; color: #fff; font-family: Avenir, sans-serif; padding: 2rem; text-align: center; }
    </style>
</head>
<body>
    <div id="test">
        <h1>I SHALL ALWAYS REMAIN LEDGIBLE</h1>
        <label for="bgcolor" >Set the background color for this element:</label>
        <input type="color" value="#777777" id="testbg" name="testbg" oninput="changeBG(testbg.value)" />
    </div>
</body>
</html>


이렇게 하고 돌렸는데 안먹힌다... 크롬에서는 요렇게!

 


test가 null 이라고 뜬다. 함수를 못불러오는거다. html 이 로딩이 안된것처럼 받아들인다는것...


한참동안 끙끙거리고 있다가 문득 책에서 <script>태그의 위치는 html파일의 로딩이 끝난뒤 불러오는 </body>의 바로 윗쪽에 위치시키는것이 좋은 습관이다 라는걸 생각해내서 위치를 바꿔봤다!



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    
    
    <style>
        #test { background-color: #332; color: #fff; font-family: Avenir, sans-serif; padding: 2rem; text-align: center; }
    </style>
</head>
<body>
    <div id="test">
        <h1>I SHALL ALWAYS REMAIN LEDGIBLE</h1>
        <label for="bgcolor" >Set the background color for this element:</label>
        <input type="color" value="#777777" id="testbg" name="testbg" oninput="changeBG(testbg.value)" />
    </div>
</body>
    <script>
        function splitComponent(color) {
            var rgbColors = new Object();
            color = color.substring(color.indexOf('(') + 1, color.indexOf(')'));
            var result = color.split(',', 3);
            return result ? {
                r: parseFloat(result[0] / 255),
                g: parseFloat(result[1] / 255),
                b: parseFloat(result[2] / 255)
            } : null;
        }
        var gamma = 2.2,
        test = document.getElementById("test");
        function changeBG(colorValue) {
            test.style.backgroundColor = colorValue;
            var computedStyle = getComputedStyle(test, null);
            var bgColor = computedStyle.backgroundColor;
            var luminosity = 0.2126 * Math.pow(splitComponent(bgColor).r, gamma) + 0.7152 * Math.pow(splitComponent(bgColor).g, gamma) + 0.0722 * Math.pow(splitComponent(bgColor).b, gamma);
            if (luminosity < 0.5) { test.style.color = "#fff" } else { test.style.color = "#000" }
        }
    </script>
</html>


정상적으로 동작한다.

<script>의 위치가 <body>를 모두 읽어온 후에 읽어야 제대로 동작하던데...

페이지의 로딩 속도 측면에서도 <script>태그를 하단에 위치시켜야 속도향상에도 도움이 된다.

그 이유인즉슨... 보통 <script>외부 태그나 외부적으로 다운로드하게 되는데 <script>파일의 크기가 크거나 혹은 정상 다운로드가 되지 않으면 html 파일이 정상적으로 로딩되지않게되어 화면이 뜨지 않거나 늦게 뜨게 된다. 

이런 점을 고려해 속도 향상을 하려면 <script>태그(html 내용이 전부 읽히고 나서 후에 실행되는 함수내용들)는 </html>의 바로 윗부분에 위치시키는게 좋다.


하지만 html태그가 읽히기전에 수행되어야하는 <script>태그들은 윗부분에 위치시켜야 한다.또한 jQuery같이 여러 페이지에서 같이 동작해야 하는 것들도 <head>태그에 놓는게 좋다.


추가로 <css>는 항상 <head>태그 사이에 위치시켜야 한다. 하단에 위치시키게되면 html 파일을 두번 읽어서 적용시킨다.


준돌 Jundol / 2015.01.26 10:36 / JavaScript/Core

String.prototype.charCodeAt()


Syntax

string.charCodeAt(index)

문자열에서 index에 해당되는 문자값의 유니코드값을 반환한다.


index === 0보다 큰 정수여야한다.



1
2
var str = "HELLO WORLD";
var n = str.charCodeAt(0);  //72

어때요 참 쉽죠? H의 유니코드값인 72를 반환해서 n에는 72라는 값이 입력된다.
준돌 Jundol / 2015.01.26 10:36 / JavaScript/Core

이번엔 프로토타입(prototype)에 대해 포스팅 해 보도록 한다.


얼마전까지 나는 프로토타입에 대해 50프로만 알고 있었다.


얼마전까지 나의 프로토타입에 대한 정의는 --> 생성자에 의한 객체 생성시 메모리낭비를 줄이기 위해 사용하는 메소드들의 집합


이라고만 알고 있었다.


이렇게만 알고 있으면 고급 자바스크립트 개발자로 더이상 갈 수 없다. (코어단으로 넘어갈 수 없단 이야기.)


보통 대부분의 자바스크립트 입문 서적들을 살펴보면 나와같이 이해하고 설명되어 있고 넘어가더라... 후우...


자 이제 쉽고 간단하게 프로토타입에 대해 설명하고 prototype chain 에 대해 설명하겠다.


prototype은 두가지의 의미를 내포하고있다.


1. __proto__ : 상위에서 물려 받은 객체의 프로토타입에 대한 정보. (prototype link 라고도 함)

2. protytpe : 자신을 원형으로 만들어질 새로운 객체들의 속성을 담는 그릇.(대부분의 입문자들이 알고 있는 정의 prototype object)


코어스크립트로 가기위한 첫발은 __proto__ 를 이해하고 prototype chain 을 이해하는 것.


prototype chain : 객체의 생성 과정에서 모태가 되는 프로토타입과의 연결고리가 이어져 상속관계를 통하여 상위 프로토타입으로 연속해서 이어지는 관계를 프로토타입체인이라 한다. 이 연결은 __proto__를 따라 올라가게 된다.



 


쉽게 말해 이런 구조를 띄고 있게 된다. constructor는 prototype 의 주인객체를 가리킨다.

이때 B,C객체가 A객체에 의해 생성되어있다면 A.prototype에 선언되어 있는 x를 공유 할 수 있게 된다. 여기서는 상속받는다가 아닌 공유한다 이다.


A.prototype.x 를 선언하고 B객체와 C객체를 선언하여 B.x 혹은 C.x를 사용하면 A.prototype.x 가 호출되게 된다.

이런 방법으로 선언하면 A.prototype.x 를 수정하면 B.x , C.x 도 (B.x 와 C.x를 따로 선언하지 않는 이상)수정된 값을 가지게 된다. 즉 공유한다는 말이 된다.


하지만 A.prototype.x 가 아닌 A.x 즉, A의 프로퍼티로 선언하여 B,C를 선언한다면 x를 공유하는 것이 아닌 상속을 받게된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var A = function() { console.log("This is Constructor A"); }; A.prototype.x = function() { console.log("This is A.prototype.x"); }; var B = new A(); B.x(); //"This is A.prototype.x" B.__proto__.x = function() { console.log("Edit B.__proto__.x"); }; B.x(); //"Edit B.__proto__.x" var C = new A(); C.x(); //Edit B.__proto__.x C.__proto__.x = function() { console.log("Edit C.__proto__.x"); }; C.x(); //Edit C.__proto__.x B.x(); //Edit C.__proto__.x A.prototype.x(); //Edit C.__proto__.x


진짜 재밌지 않는가? 이건 마치 자유도 최강인 GTA시리즈를 게임하는 느낌이다!


이런 방법으로 상속을 해 상속받은 객체들의 부모객체의 prototype의 메소드를 수정하면 모든 상속받은 객체의 메소드를 수정할 수 있다는 장점이 있다. (단, 상속객체가 별도의 재정의를 하지 않는다는 가정하에 말이다.)

© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
147 / 14 / 114,041