자바스크립트2013. 2. 8. 15:16

스코프체인 과 클로저 이해하기

자바스크립트 개념 없이 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

'자바스크립트' 카테고리의 다른 글

함수안에 함수 만들어 호출하는 방법  (0) 2013.02.08
클로저 로 함수 호출 방법  (0) 2013.02.08
(퀴즈)자바스크립트가 이렇게 어려울 줄이야 -.-  (0) 2013.02.08
[출처] javascript - prototype의 이해|작성자 몽키펀치  (1) 2013.02.07
상속 샘플  (0) 2013.02.06
Posted by 선한열심
자바스크립트2013. 2. 8. 10:16

(퀴즈)자바스크립트가 이렇게 어려울 줄이야 -.-

자바스크립트 퀴즈

http://blog.javarouka.me/



'자바스크립트' 카테고리의 다른 글

함수안에 함수 만들어 호출하는 방법  (0) 2013.02.08
클로저 로 함수 호출 방법  (0) 2013.02.08
스코프체인 과 클로저 이해하기  (0) 2013.02.08
[출처] javascript - prototype의 이해|작성자 몽키펀치  (1) 2013.02.07
상속 샘플  (0) 2013.02.06
Posted by 선한열심
자바스크립트2013. 2. 7. 17:54

[출처] javascript - prototype의 이해|작성자 몽키펀치

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


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

 

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

 

function Animal(name) {

    this.name = name;

 

    this.getName = function () {

        alert(this.name);

    }

}

 

var monkey = new Animal("Monkey");

var dog = new Animal("dog");

var cat = new Animal("cat");

 

monkey.getName();

dog.getName();

cat.getName();

 

 

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

 

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

 

 

 

 

 

 

 

 Object.prototype.getName = function () {

    alert(this.name);

}

 

function Animal(name) {

    this.name = name;

}

 

var monkey = new Animal("Monkey");

var dog = new Animal("dog");

var cat = new Animal("cat");

 

monkey.getName();

dog.getName();

cat.getName();

 

 

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

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

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

 

 

 

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

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

 

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

 

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

 

 

[출처] javascript - prototype의 이해|작성자 몽키펀치

'자바스크립트' 카테고리의 다른 글

함수안에 함수 만들어 호출하는 방법  (0) 2013.02.08
클로저 로 함수 호출 방법  (0) 2013.02.08
스코프체인 과 클로저 이해하기  (0) 2013.02.08
(퀴즈)자바스크립트가 이렇게 어려울 줄이야 -.-  (0) 2013.02.08
상속 샘플  (0) 2013.02.06
Posted by 선한열심
자바스크립트2013. 2. 6. 15:17

상속 샘플

출처 : http://kuimoani.egloos.com/1272779



<html>

<script type="text/javascript"> 

    

    

    

function BaseClass () {    

    this.name = "base name";    

    this.type = "base type";    

    this.Run = function () {        

        alert("Run Base = " + this.name);    

    }    

    this.Exec = function () {        

        alert("Exec Base = " + this.name);    

    }

}

            

function SubClass () {    

    this.base = new BaseClass();    

    this.name = "sub name";    

    this.Run = function () {        

        alert("Run Sub = " + this.name);        

        this.base.Run();    

    }

}


SubClass.prototype = new BaseClass();

var a = new SubClass();

var msg = "";


msg += a.name;               // print "sub name"

msg += a.type;               // print "base type"

alert(msg);   

msg += a.Run();              // print "Run Sub = sub name" , "Run Base = base name"

msg += a.Exec();             // print "Exec Base = sub name"

// 

    

    

    

    

function Base(){    

    this.name = "base";    

    this.type = "human";    

    this.getName = function () {        

        return this.name + " is base";    

    }

}


function Child(){    

    this.name = "child";    

    this.getName = function () {        

        this.name = "child2";        

        return this.name + " " + this.$getName() + " " + this.type;    

    }

}


function Extend(child, base) {    

    child.prototype = new base();       //상속    

    var objBase = new base();    

    var objChild = new child();    //base 객체 생성    

    for(var item in objBase) {        

        if(typeof(objBase[item]) == "function")            

        objChild["$" + item] = objBase[item];    

    }    

    return objChild;

}


var obj = Extend(Child, Base);

alert(obj.getName());


//alert : child2 child2 is base human....



</script>


'자바스크립트' 카테고리의 다른 글

함수안에 함수 만들어 호출하는 방법  (0) 2013.02.08
클로저 로 함수 호출 방법  (0) 2013.02.08
스코프체인 과 클로저 이해하기  (0) 2013.02.08
(퀴즈)자바스크립트가 이렇게 어려울 줄이야 -.-  (0) 2013.02.08
[출처] javascript - prototype의 이해|작성자 몽키펀치  (1) 2013.02.07
Posted by 선한열심

티스토리툴바