'Prototype' 태그의 글 목록

Prototype

1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등)

2018. 9. 30. 16:26

[ 자바스크립트 중고급 내용 별도 정리(함수,호이스팅,prototype,실행컨텍스트 등. ]

- 해당 내용은 class 상속을 제외한 자바스크립트 중,고급 내용을 정리한 것입니다.

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>

/*
        [ 함수(Function) ]

1. 호이스팅(Hoisting)
        : 변수 선언, 함수선언(익명함수는 X) 을 위로 끌어올리는 성질로
        -> 아래의 예에서 a()를 호출시 자바스크립트는 최초 a함수를 위로끌어올려
        호이스팅하기 때문에 수행 가능하지만 b, c는 에러가 발생

-> 아래 예시를 자바스크립트 수행 순서대로 표시해보면...
        function a(){...}
        var b;
        function bb(){...}
        var c;
        // 여기까지해서 변수 선언부와 함수 선언이 호이스팅 됨...

console.log(a());
        console.log(b());
        console.log(c());

b = bb;
        c = function(){...}
        가 되게됨...
    */
    console.log(a()); // 'a'
    //console.log(b()); // 변수 b가 호이스팅되어 위로 올려지고 bb()함수도 호이스팅되지만 b에
                      // 대입되지 않은 시점에 수행함으로 에러
    //console.log(c()); // 변수 c 선언만 호이스팅되고 c에는 undefined가 들어 있음으로 에러

// 선언적 함수
    function a(){
      return 'a';
    }
    // 기명함수 표현식
    var b = function bb(){
      return 'b';
    }

// 익명함수
    var c = function(){
      return 'c';
    }
    ///////////////////////////////////////////////////////////////////////////////////////

/*
    ex) 아래의 예시를 한번 보자.
      팀작업을 하다보면 다른 사람과 동일한 이름으로 함수를 아래쪽에 한번 더 선언하게 될 수 있는데
      (실수로...)
      이 경우는 호이스팅을 같이 생각하면 어떻게 수행될까?
      -> 첫번째 sum함수 선언이 호이스팅되서 올라가고, 두번째 sum 함수 선언이 호이스팅되는데
        이때, 이미 sum함수가 있음으로 마지막에 선언된 sum함수로 덮어써지고 만다...
        따라서, sum(1,2)와 sum(3,4)가 모두 3, 7의 결과가 나온다.
        (우리 예상으론 a+b=3, 7이 나올것 같지만...)

결론)
        -> 호이스팅에 의해 덮어써질 수 있음으로 함수 선언은 선언적 함수 방식보다
           함수 표현식(익명함수로 대입하는 등...)의 방식을 사용해서 정의하는 것이 좋다!
    */
    function sum(a,b){
      return "a + b = " + (a+b);
    }

sum(1,2); // 3

function sum(a,b){
      return (a+b);
    }

sum(3,4); // 7
    //////////////////////////////////////////////////////////////////////////
    /*
    - 실행 컨텍스트란?
        : 함수 등이 실행되는 시점에 실행시 필요한 호이스팅, this 바인딩 등의 작업이 이루어져
          필요한 정보를 불러모은 하나의 집합체가 되는 작업.
    -> 호이스팅, 실행 컨텍스트를 따져서 아래 예시의 호출 순서에 대해 생각해 보자.
    -> 출력값은 어떻게 되는가?
      : 정답) 1 undefined 1 1
    */
    var a = 1;

function outer(){

console.log(a);

function inner(){
        console.log(a);
        var a = 3;
      }

inner();

console.log(a);

}

outer();
    console.log(a);

/*
    수행순서)
    1. var a; // 호이스팅
    2. outer함수 선언 호이스팅
    3. a = 1;이 대입됨
    4. outer()를 수행함과 동시에 outer함수의 실행 컨텍스트 생성
    5. outer함수 내에서
       inner함수 선언 호이스팅
    6. outer함수 내의 console.log(a) 수행 -> 1출력
    7. inner()를 수행하며 inner함수의 실행컨텍스트 생성
       var a; 호이스팅되며
       console.log(a) 수행하며 undefined가 출력됨(아래 var a=3에서 a가 호이스팅되지만 대입은 아직 전이기 때문)
       a = 3대입이 이루어짐
    8. outer함수 내의 inner()아래 console.log(a)가 수행됨 -> 1 출력
    9. 가장 아래의 console.log(a)가 수행되며 -> 1출력
    */
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////

/*
      [ 사용시점에 따라 달라지는 this의 의미(this 바인딩) ]
      - 각 상황별 this가 갖는 의미에 대해 알아보자.
      1. 전역 스코프에서 this의 의미 -> "window 객체"를 가리킴
      2. 함수 내부에서 this의 의미 -> "window 객체"를 가리킴
        -> 이 부분이 메서드 내의 this와 헷갈릴 수 있는데
        -> 함수와 메서드는 다름... 메서드는 -> 우리가 흔히 아는 클래스 내에 있는 메서드를 의미하는 것!
        -> 주의하자!! 함수 내의 this의 의미는 "window 객체!"
      3. 메서드 내부에서 this의 의미 -> 메서드 실행 앞까지(호출주체)가 this
          -> 생성자 함수든 리터럴 선언이든 그 안에 정의된 메서드는
          -> new a().print()일 경우 메서드 .앞까지 new a()가 this를 의미하게 됨!
      4. callback에서 this의 의미 -> 함수 내부에서와 동일.
      5. 생성자 함수에서 this의 의미 -> 인스턴스
    */
    // 1. 함수 내에서 this의 의미 ex)
    function a(){
      console.log("함수 내부에서 this의 의미");
      console.log(this); // window 객체...
    }
    function b(){
      function c(){
        console.log("함수 내의 내부 함수에서 this의 의미");
        console.log(this); // 아무리 내부함수여도 역시 window 객체...
      }
      c();
    }

// 2. 메서드 내에서 this의 의미
    var d = {
      e : function(){
        function f(){
          console.log("메서드 내의 내부함수에서  this의 의미");
          console.log(this);
        }
        f();
      }
    }
    d.e(); // window 객체!
    // 여기서 메서드 내의 내부 함수여서 메서드 실행 앞까지가 this를 의미할 것 같지만
    // -> 역시 함수 내부이기 때문에 this가 가리키는 것은 window객체이게 됨!(함수 내부의 this는 무조건!!! window 객체)
    /*
    var a = {
      b : function(){
        console.log("메서드 안에서의 this의 의미");
        console.log(this);
      }
    }
    a.b(); // b()수행 . 앞까지 즉 a 인스턴스가 this
    */

// 그럼... 메서드 내의 내부함수에서 this가 객체를 가리키게 할 순 없을까?
    var obj2 = {
      a : 20,
      b : function(){
        var self = this; // 여기서 미리 this를 담음
        function cc(){
          console.log(self.a);
        }
      }
    }

// 3. callback 함수 내에서 this의 의미 ex)
        // -> 함수에서와 동일 but 함수 수행시 this 바인딩을 지정할 수 있음(함수도 마찬가지)
    var callbackFunc = function(){
      console.log("callback 함수 내에서 this");
      console.log(this);
    }
    var obj3 = {
      a : 1,
      b : function(callBackFunc){
        callBackFunc();
      }
    }
    obj3.b(callbackFunc); // callback 함수 내에서 this -> window 객체
    /*
    [ 함수 실행시 this 바인딩 시켜 실행하는 몇가지 방법 ]
    1. func.call(this바인딩할녀석, 해당함수 매개변수...)
        -> func.call(obj3, 1,2,3)
    2. func.apply(obj3, [1,2,3])
    3. var d = func.bind(obj3, 1,2,3)
        -> 1,2번은 즉시 호출되어 수행되고 3번은 새로운 함수를 생성하게 됨
        -> 즉시 수행되는게 아님... this 바인딩만 결정해서 다른 함수의 매개변수 등으로 전달하고자 할 때 주로 사용됨.
    */
    var cb = function(){
      console.log("bind를 통해 this를 변경해 호출하자.");
      console.log(this);
    }
    var obj4 = {
      a : 1
    }
    setTimeout(cb.bind(obj4),100);
    // setTimeout의 첫번째 매개변수는 함수를 받는데 apply, call은 즉시 수행함으로 bind를 통해서 더해야함
    // 이때, cb함수 수행시 매개변수는 넘기지 않았고, cb함수 수행시 cb함수 내의 this의 의미만 obj4를 가리키도록 bind했음
    // 따라서 this는 obj4를 가리키게 됨.

// 4. 생성자 함수 내에서 this의 의미 ex)
        // -> 인스턴스
    function constructorObj(){
      this.a = 10; // constructorObj 생성자를 통해 생성된 인스턴스를 가리킴(this)
      this.print = function(){
        console.log("이곳에서의 this는 ? ");
        console.log(this); // 메서드 내에서니까 new constructorObj() 가 됨.
      }
    }
    new constructorObj().print();
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /*
      [ prototype ]
      : 많이 들어밨을테지만... 간단히 알면 엄청 쉽고... 자세히 알면 너무너무 어려운... 우리 prototype님...
      -> 우리가 흔히 제일 많이 아는 사용 이유?)
        : 생성자 함수 등에서 메서드를 선언하고 new를 통해 인스턴스를 생성시 모든 인스턴스에서 중복으로 메서드를 위한
        : 메모리 공간을 할당해 비효율 적이니까 공유될 수 있는 prototype에 선언해 효율적이게 관리하고
        : 또, prototype을 통해 상속을 구현하기 위해서... 정도?
      -> 이정도까진 기본적이니까... 많이들 안다. 하지만 인스턴스.메서드() 를 수행했을 때 어떻게 prototype내의 메서드가
        수행되고 하는 원리에 대해 아는 사람은 그리 많지 않다... 아래부턴 그것에 대해 설명한다.

---------------------------------------------------------------------------------------------------------
      - 생성자 함수를 정의시 자동으로 생성자 함수 내에는 prototype 객체라는 프로퍼티가 생성되게 된다.
      - 이때, 생성자 함수를 new를 통해 인스턴스를 생성하게 되면
          -> 해당 인스턴스에는 __proto__ 라는 변수가 하나 생성되게 되는데 이 __proto__는 바로 생성자의 prototype을
          -> 가리키게 된다.
          -> 이때 중요한건!
                -> 인스턴스는 __proto__를 생략하고 prototype에 바로 접근할 수 있다.(__proto__는 생략이 가능하다.)
                ex) new obj().__proto__.testMethod() == new obj().testMethod()

-> 위의 this바인딩과 연계해 얼마나 잘 이해했나 테스트해보자. 아래 예시를 보라.
    */
    function Person(n,a){ // Person 생성자 함수
      this.name = n;
      this.age = a;
    }

Person.prototype.setOlder = function(){
      this.age += 1; // 메서드 내의 this는? .앞까지 호출대상
    }
    Person.prototype.getAge = function(){
      return this.age;
    }

console.log("prototype EX");
    var youngRong = new Person('영롱',29);// 인스턴스 생성
    youngRong.__proto__.setOlder();
    console.log(youngRong.__proto__.getAge()); // NaN 발생 why?
    // -> 메서드내의 this는 메서드 앞 .까지가 호출대상임
    // 따라서, 여기선 youngRong.__proto__ 객체 즉 prototype객체가 this인데 해당
    // prototype내에 a를 정의한 적이 없음 따라서 undefined랑 1이랑 위에서 연산이 이루어져서 NaN가 나옴.
    console.log(youngRong.getAge()); // 29가 출력됨... youngRong이란 인스턴스를 가리키게 되니까... this가
    // 이처럼 __proto__를 생략하고 prototype에접근할 수 있는 것임...
    ////////////////////////////////////////////////////////////////////////////////////////////////////

/*
      [  자바스크립트 상속을 구현하기 위해 반드시 이해해야하는 prototype 체이닝에 관하여... ]
      - 자 우리는 자바스크립트에서 모든 객체는 Object 객체로부터 파생된다라는걸 알고있을거다.(Object 최상위 객체)
      - 모르면... 난감...
      - 그럼 어떻게 모든 자바스크립트 객체들은 Object 객체를 상속받고 있고 또 Object 내에 정의된 toString(), valueOf()등의
      - 메서드를 사용할 수 있는걸까?
      -> Array도 객체임으로 Object를 똑같이 상속하고 있을 텐데 Array로 예를 들어보자.

Object 생성자  -------> Object prototype
                                          /              - toString()
                                        /                - valueOf()
                                      /                  - isPrototypeOf() .. 등의 메서드
                                    /
                                  /
      Array 생성자  ---------> Array prototype
          |                    /
         new                 /
          |                /
      Array 인스턴스 -- __proto__
      -> Array인스턴스의 __proto__는 Array prototype을 가리키고 있고 Array prototype은 Object의 prototype을 가리키고 있기 때문!
      따라서 __proto__는 생략이가능하기 때문에 배열에서 바로 new Array().toString()처럼 접근할 수 있는 것!
    */
    var arr = [1,2,3];
    console.log("Array Object 관계")
    console.log(arr.toString()); // Object prototype에 선언되있는 toString()을 수행함 -> 1,2,3
    arr.toString = function(){ // 이렇게 정의하면 클래스에 static 메서드로 정의하게 되는 것!
      return this.join('_'); // 메서드 내의 this임으로 .앞까지가 호출대상이 this
    }
    console.log(arr.toString()); // arr에 선언된 toString()이 호출되 -> 1_2_3 출력(직접 정의한 것 호출)
    var arr2 = [3,4,5];
    console.log("this bind 변경");
    console.log(arr.__proto__.toString.call(arr2)); // this 바인딩을 arr이 아니라 arr2로 해서 수행할 수도 있음 -> 3,4,5 출력
    // 그럼 우리가 여기서 알 수 있는건 머임?
    // 우리가 event처리할 때 event의 함수 내에서 this를 써서 이벤트가 발생한 돔객체를 가리키도록 하는데 이게 어떻게 가능할까?
    // -> 그래, addEventListener 내에서 전달된 callback함수 수행시 bind를 이벤트가 발생한 돔을 가리키도록 했기 때문이지...
    // -> 이런 이유도 모르고 그냥 이벤트 처리에서 this를 사용하는 사람들이 정말 많다...

var obj5 = {
      a:1,
      b:{
        c:'c'
      }
    }
    console.log("obj5 : ");
    console.log(obj5.toString()); // Object prototype의 toString을 수행해 결과 -> [ Object Object ]
    // 이처럼 Object의 toString()은 우리가 원하는 결과를 얻을만큼 구체적으로 구현되어 있지 않음...
    // 따라서, 객체들의 toString()을 디버깅 용으로 찍어보기 위해 Object prototype을 재정의해 사용하는 것이 권장됨.

obj5.toString = function(){
      var res = [];
      for(var key in this){ // this는 obj5객체를 가리키게 될 것이고, for in을 통해 각 프로퍼티 key가 var key에 들어오게 될 것임
        res.push(key + ': ' + this[key].toString());
      }
      return '{' + res.join(', ') + '}';
    }

console.log(obj5.toString());
    // {a: 1, b: [object Object], toString: function (){
    //
    //   var res = [];
    //
    //   for(var key in this){ // this는 obj5객체를 가리키게 될 것이고, for in을 통해 각 프로퍼티 key가 var key에 들어오게 될 것임
    //
    //     res.push(key + ': ' + this[key].toString());
    //
    //   }
    //
    //   return '{' + res.join(', ') + '}';
    //
    // }}

// b 프로퍼티는 원하는 결과를 얻기 어렵고 매 클래스마다 저렇게 toString을 재정의하기도 번잡함... 따라서 아래처럼 수정하자.
    // Object prototype의 toString을 재정의
    Object.prototype.toString = function(){
      var res = [];
      for(var key in this){ // prototype체인을 통해 인스턴스에서 메서드 수행시 메서드 앞까지가 this가 됨으로 해당 객체
                            // 가 된다.
        res.push(key + ': ' + this[key].toString());

}
      return "{" + res.join(', ') + "}";
    }
    console.log(obj4.toString());
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
  </script>
</head>

저작자표시 비영리

'스터디 > 자바스크립트중고급' 카테고리의 다른 글

1. 함수(Function) 및 객체(Object) (0)	2018.09.27

지역변수,전역변수 개념과 자바스크립트의 객체(Object)

2017. 8. 10. 17:26

- 자바스크립트의 지역변수와 전역변수 개념

=> 함수내에 선언된 변수만 지역변수!! 그 외에는 다 전역변수이다. 즉, 함수내에 선언된게 아니면

어떠한 블럭이건 for문 안에서건 전부 전역변수이다.

{

var param = 10;

}

이것도 어면히 전역변수

var f = function(){

var str = "string";

}

이 str변수는 지역변수

[ 자바스크립트의 객체(Object)에 대해서]

<!DOCTYPE html>

// 일반적인 객체 생성 방법(선언과 동시에 생성)
	var studentObj = {
		// 필드
		name : "황영롱",
		age : 28,
		// 메서드
		sayHello : function(){
			// 객체 내의 필드변수에 접근할 때는 반드시 this키워드를 써줘야한다.(자바와 다름...생략 불가)
			return this.name + "입니다. 안녕하세요.";
		}
	}

alert(studentObj.name + "입니다. " + studentObj.sayHello());

var students = [];
	// 배열에 객체 추가
	students.push(studentObj);

// 객체명을 생략해 편리하게 이용하도록 도와주는 with
	// 본래 아래와 같이 필드변수에 접근해야한다.
	console.log( studentObj.name + studentObj.age );
	// 하지만... width를 쓰면 다음처럼 접근할 수 있다.
	with(studentObj){
		console.log( name + age );
	}

// 매번 객체에 값을 넣어논 상태로 생성하는 것이 불편하기 때문에 생성자를 이용해 객체를 생성하도록 한다.
	function Student(name,age,kor,math){
		
		this.name = name;
		this.age = age;
		this.kor = kor;
		this.math = math;

this.getSum = function(){
			return (this.kor + this.math);
		}

this.toString = function(){
			return ("이름 : " + this.name + "나이 : " + this.age + "합계 : " + this.getSum() );
		}

}

// 객체 생성
	var s1 = new Student("홍길동",20,100,98);
	// 메서드 호출
	alert(s1.toString());

// 이런 객체 생성방식에서 필드변수의 값은 매번 다를 수 있지만 함수는 매번 똑같기 때문에
	// 매번 메모리를 잡아먹으면 낭비가 된다. 따라서 생성자 함수 정의시 필드 변수만 넣고 메서드는 prototype 객체에 넣도록 한다.
	// prototype 객체는 모든 객체가 공통으로 가지는 객체이다. 이 prototype에 메서드를 등록해서 사용한다.

function Car(name,color){
		this.name = name;
		this.color = color;
		// 필드 변수만 기재한다. 메서드는 따로 prototype에 등록한다.
	}
	// 프로토타입에 메서드 등록
	Car.prototype.performance = function(){
		return this.name + "의 차이며 색상은 : " + this.color + "입니다.";
	}
	Car.prototype.newParam = 10;

var c1 = new Car("아반떼","검정");
	var c2 = new Car("소나타","레드");
	alert(c1.performance());
	alert(c2.performance());

// 이 경우 c1과 c2에 본래 performance메서드가 각각 메모리에 잡히게 되고 만약 이런 객체를 100개를 만들면 100개의 공간이잡힐 것이다.
	// 하지만, 둘 다 공유할 수 있는 prototype이라는 객체에 메모리를 할당해 놓고 두 객체는 이 공간을 공유해 사용하게 되서 메모리를 절약할 수 있게 되는 것이다.
	// 만약, 메서드뿐 아니라 필드변수값도 공유하고 싶다면 아래와같이 할 수 있다.
	// Car.prototype.newParam;
	
	alert("c1의 값 : " + c1.newParam); // 10
	// 이건 공통 prototype에서가 아니라 새로 생성한 것
	c1.newParam = 20;
	// c1, c2 공통으로 공유되는 값을 바꾼 것
	Car.prototype.newParam = 30;
	alert("c1'''의 값 : " + c1.newParam); // 위에서 c1.newParam으로 생성했음으로 자기 newParam을 사용해 20이 나옴
	alert("c2의 값 : " + c2.newParam); // 30

</script>

저작자표시 비영리

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

자바스크립트 객체의 캡슐화 (0)	2017.08.14
eclipse(이클립스) 자바스크립트(javascript) 자동완성 플러그인 설정하기 (0)	2017.08.11
자바스크립트 정리1 (0)	2017.08.09
자바스크립트 navigator를 이용한 IE 버전 알아내기 (0)	2017.08.08
자바스크립트로 부모,자식 요소 접근하기 (0)	2017.08.08

PREV 1 NEXT

악덕고용주의 개발 일기

Prototype

1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등)

'스터디 > 자바스크립트중고급' 카테고리의 다른 글

지역변수,전역변수 개념과 자바스크립트의 객체(Object)

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

+ Recent posts

티스토리툴바