자바스크립트 팁 #1, This 제대로 알고가자 (this와 window 객체, new )

https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%8C%81-This-%EC%A0%95%EB%A6%AC-x4k5upn6i6

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

 

this가 window인지 obj인지 소스 코드 

 

this; // Window {}

function a() { console.log(this); }; a(); // Window {}

var obj = {

    a: function() { console.log(this); },

};

obj.a(); // obj

var a2 = obj.a; a2(); // window

a2는 obj.a를 꺼내온 것이기 때문에 더 이상 obj의 메서드가 아닙니다.

 

var obj2 = { c: 'd' }; 
function b() { 
    console.log(this); 
} 
b(); // Window 
b.bind(obj2).call(); // obj2 
b.call(obj2); // obj2 
b.apply(obj2); // obj2

명시적으로 this를 바꾸는 함수 메서드 삼총사 bind, call, apply를 사용하면 this가 객체를 가리킵니다.

 

 

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHi = function() {
  console.log(this.name, this.age);
}
Person('ZeroCho', 25);
console.log(window.name, window.age); // ZeroCho 25 -> //window


//obj로 실행되려면 new Person을 사용해야 합니다.
var hero = new Person('Hero', 33); // Person {name: "Hero", age: 33}
hero.sayHi(); // Hero 33

 

 

$('div').on('click', function() {
  console.log(this); // <div>
  function inner() {
    console.log('inner', this); // inner Window
  }
  inner();
});
//inner() window를 가져옴

//obj를 불러오게 하려면.. 2가지 방법 that과 ES6 함수 사용
$('div').on('click', function() {
  console.log(this); // <div>
  var that = this;
  function inner() {
    console.log('inner', that); // inner <div>
  }
  inner();
});
//ES6 함수 사용
$('div').on('click', function() {
  console.log(this); // <div>
  const inner = () => {
    console.log('inner', this); // inner <div>
  }
  inner();
});