선한열심

xhtml.html

  jQuery+CSS Tree Navigation. 

좋은 정보가 아주 많다

[펌]http://naradesign.net/wp/  

http://naradesign.net/wp/2010/03/15/1225/ 

function Person(name){

    this.name = name;

    return f(this)

}

function f(obj){ 

    return obj.name;

} 

var o1 =   Person('A');  // 나의 생각 함수의 return값이다. 

alert(o1);     // A

var o2 = new Person('V'); // 나의 생각 객체의 instance 임 

alert( o2.name) ; // V  

자바스크립트 이벤트 단계

캡처(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 공개멤버

}