[Javascript] this

this 5가지 사용법

1. 생성자 안에서 쓴 this (사용 多)

function Person(name) {
  this.name = name;
}
 
var kim = new Person('kim');
var lee = new Person('lee');
 
console.log(kim.name); //kim
console.log(lee.name); //lee

ES6식 생성자 함수 만들기

class Coupon {
    constructor (price, expiration) {
        this.price = price;
        this.expiration = expiration || '2주'
    }
    getPriceText() {
        return `$${this.price}`
    }
    getExpirationMessage() {
        return `이 쿠폰은 ${this.expiration} 후에 만료됩니다.`
    }
}
const coupon = new Coupon(5)
console.log(coupon.getPriceText())            
console.log(coupon.getExpirationMessage())

//result
$5

=> 생성자함수가 생성하는 객체로 this가 연결된다.(new빼면 this는 window에 바인딩됨)

• 착각주의, this.name = name 똑같다고 name만 쓰면 안된다. this붙으면 생략안됨

//(ES6) 변수만으로 프로퍼티 생성
var x = 10;
var y = 20;
var hello = function(){return 'hello';};

var newObj = {
    x,  // 프로퍼티
    y,  // 프로퍼티
    hello  // 메서드
};

console.log(newObj);  // { x: 10, y: 20, hello: [Function: hello] }

키와 값이 같으면 하나만 적어도 된다. this는 안됨

2. 객체안에서 정의된 함수(메서드)에서 쓰는 this

=> this는 함수가 소속된 객체로 연결

var person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  },
};
 
person.fullName(); //"John Doe"

3. 그냥 함수안에서 쓴 this

var num = 0;
function addNum() {
  this.num = 100;
  num++;
  
  console.log(num); // 101
  console.log(window.num); // 101
  console.log(num === window.num); // true
}
 
addNum();

=> window객체에 연결됨(use strict쓸땐 undefined)

4. 이벤트 핸들러 안에서 쓴 this

var btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
  console.log(this); //#btn
});

=> 그 이벤트를 받는 html요소를 가리킨다.

5. 화살표 함수로 쓴 this

=> 전역객체를 가리키지 않고 바로 바깥함수에 바인딩

var Person = function (name, age) {
  this.name = name;
  this.age = age;
  this.say = function () {
    console.log(this); // Person {name: "Nana", age: 28}
 
    setTimeout(function () {
      console.log(this); // Window
      console.log(this.name + ' is ' + this.age + ' years old');
    }, 100);
  };
};
var me = new Person('Nana', 28);
 
me.say(); //global is undefined years old 

setTimeout안에 함수는 메서드가 아님, this가 전역객체가 되어서 this.age가 undefined가 된 모습이다. setTimeout내 함수를 화살표함수로 쓰면

var Person = function (name, age) {
  this.name = name;
  this.age = age;
  this.say = function () {
    console.log(this); // Person {name: "Nana", age: 28}
 
    setTimeout(() => {
      console.log(this); // Person {name: "Nana", age: 28}
      console.log(this.name + ' is ' + this.age + ' years old'); 
    }, 100);
  };
};
var me = new Person('Nana', 28); //Nana is 28 years old

화살표함수로 써서 바로 바깥함수인 Person에 연결되었다.