[자바스크립트 정리] 실행컨텍스트3. this

Kyungoh Kang·2021년 1월 26일
0

javascript 정리

목록 보기
4/7

this

= 클래스로 생성한 인스턴스 객체
= 실행 컨텍스트가 생성될 때 함께 결정됨(실행컨텍스트가 실행될 때 = 함수가 호출될 때)
= 해당 함수를 호출한 주체에 대한 정보를 가지고 있다.

전역공간에서

  1. 전역공간에서 this는 전역객체.
	let a = 1;

	a = window.a = this.a;
  1. 자바스크립트의 모든 변수는 전역객체의 프로퍼티로 할당된다. (l.e에 저장)

메서드에서 this

  1. 메서드 = 자바스크립트에서는 함수와 매우 유사하지만 함수와 달리 독립성을 가지지 못한다.

    • 보통 객체의 프로퍼티로 할당된 함수로 이해하면 대부분 맞음.
    • 객체의 프로퍼티로 할당된 함수라도 객체의 메서드로서 호출하는 경우에만 메서드이다.
    • 예시
    let a = function (b) {
     	console.log(this, b) 
    }
    
    a('a'); //여기서 this는 전역객체(window)
    
    let c = { method: a };
    
    c.a('a'); // 여기서 this는 c 객체
  1. 함수와 메서드의 구분은 객체의 프로퍼티를 호출할 때 .이나 []이용해 부르기 때문에 저것들이 없으면 함수, 있으면 메서드.(앞에 객체가 명시되어 있어야하고 이 경우 this는 점앞에 명시된 객체)

함수에서 this

  1. 함수 내부에서
  • 함수를 함수로서 호출할 때, this는 전역객체가 된다.(명확한 호출 주체가 없을 때)
  1. 메서드 내부함수에서
	let a = {
    	outer: function () {
        	console.log(this);  
        
        	let inner = function () {
            	console.log(this);  
            }
            
            inner(); // this = window
            
            let b = {innerMethod: inner};
            
            b.innerMethod(); // this = b
        }
    }
    
    a.outer(); // this = a
- 함수앞에 .이나 []가 있는지 없는지가 this를 판별하는 방법임.(메서드인지 함수인지, 메서드면 this는 앞에 객체, 함수면 this는 전역 객체)

bind

  1. 메서드 내부함수에서 this를 해당 객체로 만들기
	let a = {
  outer: function () {
    console.log(this); // this = outer
    
    let innerfunc = function () {
      console.log(this);
    };
    
    innerfunc(); // this(innerfunc의 this) = window
    
    let self = this;  // outer의 this를 담음
    
    let innerfunc2 = function () {
      console.log(self);
    };
    
    innerfunc2();  // this = outer
  }
};

obj.outer();
  • es6부터는 arrow function을 이용할 수 있기 때문에 필요 없어짐.
  1. Arrow Function (es6)
    = this를 바인딩하지 않는다.
    = this에 접근하려고하면 가장 가까운 this에 접근한다.
    let obj2 = {
     outer: function() {
       let inner = () => {
         console.log('this',this);
       };
       
       inner(); ///this = outer
     }
    };

obj2.outer();


3. 생성자 함수 내부에서
	- 클래스 = 생성자, 인스턴스 = 클래스로 만든 객체.
    - 자바스크립트에서는 함수가 생성자의 역할을 가진다.
    - 예시 
    
```javascript
	let Cat = function (name, age) {
		this.name = name;
  		this.age = age;
	};	//생성자

	let choco = new Cat('choco', 2); // {name: 'choco', age: 2} --> 인스턴스
  1. bind 메서드 이용
let abc = function (x){
  console.log(this, x);
};

let bindabc = abc.bind({x: 1}, 1); ///첫번째 인자에 바인딩 되고 추가로 인자를 넘겨줄 수 있음.

bindabc(); // this = {x:1}
  • cf) call, apply 메서드를 이용해도 첫번째 인자에 바인딩 시킬수 있음.
	let abc = function (x){
  console.log(this, x);
};

let callabc = abc.call({x: 1}, 1); ///첫번째 인자에 바인딩 되고 추가로 인자를 넘겨줄 수 있음.
let applyabc = abc.apply({x:1}, [1]); //call과 같지만 추가 인자가 배열로 들어감

callabc; // this = {x:1} , 1
applyabc; // this = {x:1}, undefined

0개의 댓글