[javascript] 자바스크립트 this 정리

1. 메소드 안 : 메소드를 소유한 object

this : object person

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

 

2. alone(어디에도 속하지 않을 때?) : 전역 객체 (window)

<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>

 

3. 함수 안 : 전역 객체 (window)

<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}
</script>

 

4. 함수 안 (strict mode) : undefined

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}
</script>

 

5. event 안 : event를 받는 element

this : button

<button onclick="this.style.display='none'">Click to Remove Me!</button>
 

 

6. call(), apply() :  any object (그 어떤 객체도 의미 가능)

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
var x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 

call(), apply() : https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd

 

출처 : https://www.w3schools.com/js/js_this.asp