선한열심

자바스크립트 이벤트 단계

캡처(capture) 단계 : 가장 먼저 실행되는 단계로서, document에서 시작해서 실제 이벤트를 발생시킨 타켓까지 이동합니다.

이를 캡처링이라고 합니다.. 이때 리스너가 등록돼 있다면 리스너가 바로 실행됩니다.

타켓(Target) 단계 : 캡처 단계를 거쳐 실제 이벤트를 발생시킨 타켓에 도착한 상태를 말합니다.

버블(Bubble) 단계 : 타켓 단계까지 오면 이벤트 흐름은 다시 타켓단계의 역순으로 움직이기 시작합니다

            이 흐름을 버블링(bubbling) 이라고 합니다. 

Object의 프로토타입 멤버를 모든 객체에서 상속하듯이 

Function 의 프로토타입 멤버는 모든 함수에서 상속한다.

function Constrcutor01(){

    Constrcutor02.call(this);

    this.method01 = function() { };

}

function Constrcutor02(){

    this.method02 = function() {};

}

// call 을 이용해서 호출하는 Constrcutor02 내부에서의 this는 결국 Constrcutor01 객체에 대한 참조가 된다

// 결국 method02도 Constrcutor01객체의 메서도로 정의 된다 

[출처]- 자바스크립트 객체지향프로그래밍

* 자바스크립트 : 개체지향 기술을 이용한 고급 웹응용 프로그램 만들기

    http://msdn.microsoft.com/ko-kr/magazine/cc163419.aspx#S9

* Object 멤버정리

    http://www.javascriptkit.com/jsref/object.shtml    

* 클로저  ( closure )

    http://en.wikipedia.org/wiki/Closure_(computer_programming)#C.23

* Object 멤버정리

    http://code.google.com/p/trimpath

/*  3 hasOwnProperty 함수의 프로퍼티나 메서드 있는지 확인 

var msg3 = "";

// 객체 리터럴 사용법

var obj3 = {

    prop : "exist",

    change : function (){

        this.newProp = this.prop;

        delete this.prop;

    }

};

//var bool3 = obj.hasOwnProperty('멤버명');

msg3 += "\n obj3.hasOwnProperty('prop')=" + obj3.hasOwnProperty('prop');

msg3 += "\n obj3.hasOwnProperty('change')=" + obj3.hasOwnProperty('change');

obj3.change();   // () 꼭 넣어줘야 함수가 호출된다 

msg3 += "\n obj3.hasOwnProperty('prop')=" + obj3.hasOwnProperty('prop');

$('re').innerText = msg3; //msg3;

*/

1.  객체의 인스턴스를 생성 후 프로토타입을 추가해도 모든 인스턴스에 적용이 된다 

2. 객체에 프로토타입 객체 대체

var msg4 = ""; 

function Person4(name)

{

    this.name = name; 

}

Person4.prototype.getName = function(){ return this.name ;}; 

var mySon = new Person4('달봉이');

// 1.  객체의 인스턴스를 생성 후 프로토타입을 추가해도 모든 인스턴스에 적용이 된다 

Person4.prototype.nickName = '별명';

Person4.prototype.age = 6;      // Person4.age 안됨 

msg4 += "\n mySon.nickName=" + mySon.nickName  // 별명

mySon.nickName = '달봉이 별명';

msg4 += "\n mySon.nickName=" + mySon.nickName  // 달봉이 별명 

msg4 += "\n mySon.age=" + mySon.age             // 6 

mySon.age = 66;

msg4 += "\n mySon.age=" + mySon.age             // 66 

Person4.prototype.age = 6;  

msg4 += "\n mySon.age=" + mySon.age             // 66 (처음이 아니기 때문에 )

msg4 += "\n mySon.getName()=" + mySon.getName();// 달봉이

delete Person4.prototype.age;

msg4 += "\n delete Person4.prototype.age=" + Person4.prototype.age; // undefined 

msg4 += "\n mySon.age=" + mySon.age

msg4 += "\n\n 프로토타입 객체 대체 전 ";

for ( var item in mySon){

    msg4 += "\n mySon[" + item + "] = " + mySon[item];

}

// mySon[name] = 달봉이

// mySon[nickName] = 달봉이 별명

// mySon[age] = 66

// mySon[getName] = function (){ return this.name ;}

var personProto = {};

personProto.specises    = "human";

personProto.countOfLegs = 2;

Person4.prototype = personProto; // 기존에 추가했던 prototype은 삭제된다 

// 2. 객체에 프로토타입 객체 대체

msg4 += "\n\n 프로토타입 객체 대체 후 ";

for ( var item in mySon){

    msg4 += "\n mySon[" + item + "] = " + mySon[item];

}

// mySon[name] = 달봉이       

// mySon[nickName] = 달봉이 별명

// mySon[age] = 66         var t5 = new Person4('t5');

// mySon[getName] = function (){ return this.name ;}var ar5 = [];

var t5 = new Person4('t5');

for ( var item in t5){

   msg4 += "\n t5[" + item + "] = " + t5[item];

}                                 

// t5[name] = t5

// t5[specises] = human

// t5[countOfLegs] = 2

for ( var item in Person4.prototype){

    msg4 += "\n Person4.prototype item = " +  item;

} 

// Person4.prototype item = specises

// Person4.prototype item = countOfLegs

var msg6 = ""; 

function A(){

    var _localX = 7;        // 내부 지역 변수

    this._localX = 0;       // 멤버 변수

    this.getThisX = function() { return this._localX; };

    this.getX = function() { return _localX; };

    this.setX = function(x){ if(x<10){ 

        _localX = x; 

        }

        return _localX; 

    }        

}

var obj6 = new A();

var x = obj6.getX();

msg6 += "\n x = " +  x;

msg6 += "\n obj6._localX = " +  obj6._localX;

msg6 += "\n obj6.getThisX = " +  obj6.getThisX();

msg6 += "\n obj6.setX(8) = " +  obj6.setX(8);

msg6 += "\n obj6.setX(18) = " +  obj6.setX(18);

$('re').innerText = msg6;  

/* 

obj6._localX = 0

obj6.getThisX = 0

obj6.setX(8) = 8

obj6.setX(18) = 8

*/

클로저.html

// 클로저를 호출하면 단순히 객체가 반환되는 것이 아니다.

// 객체와 함께 그것과 연결된 닫힌 공간이 함께 반환되는 것이다. 그리고 닫힌 공간에는 내부 변수가 존재한다 

function outer()

{

    var _x=0;    // // 비공개 멤버

    function _private01(){   // 비공개 멤버

        return ++_x;

    }

    function _private02(){     // 비공개 멤버

        return ( _x += 2 );

    }

    return { public01:_private01, public02 : _private02 };      // public01, public02 공개멤버

}

자바스크립트 개념 없이 10년 동안 개발 햇다 -.-  기본에 충실하자 

// 함수안의 변수는 함수안에 선언이 있는지 먼저 확인한다 그래서 함수 i는  var i ,alert(i), i=3 ; 

var i=0; 

function T1(){

    alert(i);        // undefined

    var i=3;

    alert(i);    // 3

}

 T1();

function outer()

{ 

    var x=0; 

    return ++x;

} 

var f = outer();  

 alert(f);  // f()하면 오류 발생 

var f = outer; 

 alert(f());  // f() 가능 

// 클로저 : 내부 함수를 반환값으로 사용하는 특수한 함수

function outer1()

{

    var x=0;

    return function(){ return++x; };  // 함수 호출 (클로저)

}

var f1 = outer1();

f1();    // 1

f1();      // 2

alert(f1());  // 3

자바스크립트 퀴즈

http://blog.javarouka.me/

출처 - http://blog.naver.com/oaie/140172333031

이거 이해 하는데 하루종일 걸리네

우선 동물 클래스를 만들고 원숭이,개,고양이를 만들어 보자.

잘만들어 지고 alert로 Monkey,dog,cat 세번 띄우겠지..

이렇게 하면 객체마다 this.name과 this.getName() 을 갖게 된다.

 이렇게 하면 각 객체들은 getName 메소드는 가지고 있지 않고.

객체가 getName메소드를 호출할때 Object.prototype.getName을 참조하여 메소드를 호출하게 된다.

Object.prototype 메소드를 한번만 만들기 때문에 메모리 효율이 더 좋아진다.

monkey.getName했을 때 우선 monkey.prototype.getName 이 있는지 없는지 확인하고 없으면 Object.prototype.getName 을 참조한다.

있으면 리턴해서 getName()를 호출한다.

Object.prototype.getName하나만 만들었기 때문에 각 객체에 getName메소드가 있는 것 보다 메모리 효율이 좋을 것이다.....

라고 나는 이렇게 이해한다.