console.log(this); //Window객체
function 함수(){
console.log(this) // Window객체
}
strict mode가 적용되지 않고
객체가 없을 때의 this는
브라우저 환경에서는 Window라는 전역 객체를 참조하기 때문에
둘 다 결과는 Window라는 오브젝트가 출력된다.
Window가 최상위 객체라고 보면 됨.
'use strict'
써놓으면?'use strict'
console.log(this); //Window객체
function 함수(){
console.log(this) // undefined
}
var 오브젝트 = {
data : 'Kim',
함수 : function(){
console.log('안녕')
}
}
console.log(오브젝트.data); // "Kim"
오브젝트.함수(); // "안녕"
// 오브젝트의 함수 사용할 때는 소괄호 붙여줘야 함.
오브젝트 내의 함수를 메소드라고 부른다. 이 때 메소드 내에서 this를 콘솔창에 띄워보면 메소드가 포함되어있는 객체를 가리킨다.
var 오브젝트 = {
data : 'Kim',
함수 : function(){
console.log(this)
}
}
오브젝트.함수(); // 오브젝트 객체
var 오브젝트 = {
data : {
함수 : function(){
console.log(this)
}
}
}
오브젝트.data.함수() // 객체 data를 출력
var 오브젝트 = {
data : {
함수 : ()=>{
console.log(this)
}
}
}
오브젝트.data.함수() // Window
신 문법 Arrow function의 경우 this를 함수 밖에 있던 것을 그대로 가져와서 사용함.
함수 : ()~ 이렇게 안하고 아래 코드처럼 키 없이 함수 자체를 넣어도 됨.
var 오브젝트 = {
data : {
함수()=>{
console.log(this)
}
}
}
function 함수(){
console.log('함수수');
}
함수();
window.함수(); 둘 다 똑같이 작동함.
결국 this는 나를 담고 있는 객체를 가리킨다.
var 새오브젝트 = {}; //빈 객체인 오브젝트라는 객체 생성
function 기계(){
this.이름 = 'Kim'
}
기본
function 기계(){
this.이름 = 'Kim'
}
var 오브젝트 = new 기계();
// 이름: "Kim" 프로퍼티를 가진 객체가 생성됨
응용
function 기계(name){
this.이름 = name;
}
var 오브젝트 = new 기계("호랑이");
// 이름: "Kim" 프로퍼티를 가진 객체가 생성됨
document.getElementById().addEventListener('click', function(){
this; // === e.currentTarget; 지금 event가 동작하는 곳
})
콘솔 찍어보면 html 태그가 나옴
주의!
콜백함수
var 어레이 = [1,2,3];
어레이.forEach(function(a){
console.log(this);
});
})
콜백함수는 일반함수 -> 일반함수에서의 this는 Window 가리킴
오브젝트 내에서 콜백함수를 사용한다면?
var 오브젝트 = {
이름들 : ['김','이','박'],
함수 : function(){
console.log(this); // 오브젝트
오브젝트.이름들.forEach(function(){
console.log(this); // Window
})
}
}
콜백함수를 Arrow function으로 바꿔본다면?
arrow function은 외부 this의 값을 가져와서 쓴다고 했음.
따라서 오브젝트의 this와 똑같이 출력됨.
var 오브젝트 = {
이름들 : ['김','이','박'],
함수 : function(){
console.log(this); // 오브젝트
오브젝트.이름들.forEach(()=>{
console.log(this); // 오브젝트
})
}
}
function 함수(){}
const 함수 = function(){}
const 함수 = ()=>{}
코드들을 기능으로 묶고 싶을 때
입출력 기계를 만들고 싶을 때
const 함수 = (a) => { return a+10}
a를 주면 결과를 리턴
const 함수 = a => a+10
const 함수 = (a,b) => {
솰라솰라
솰랄
return thkffk
}
[1,2,3,4].forEach(a => console.log(a))
document.getElementById('버튼'),
addEventListner('click',(e)=>{this});
이렇게 쓰면 화살표함수의 this는 외부의 this를 가져와서 쓰기 때문에 window를 가리킴.
document.getElementById('버튼'),
addEventListner('click',function(){
this}); //이렇게 사용하거나
document.getElementById('버튼'),
addEventListner('click',(e)=>{e.currentTarget});
var 오브젝트 = {
함수 : ()=>{
this} // window
}
따라서 오브젝트를 가리키고 싶으면 함수 선언식 function() 쓰면 됨.
var 사람 = {
name: '손흥민',
}
사람.sayHi(); //안녕 나는 손흥민
답 보기
var 사람 = { name: '손흥민', sayHi: function(){ console.log(`안녕 나는 ${this.name}`) }, } 사람.sayHi()
var 자료 = {
data : [1,2,3,4,5],
전부더하기 : function(){
let sum = 0;
for(let i=0; i< this.data.length; i++){
sum = sum + this.data[i];
}
console.log(sum)
}
}
자료.전부더하기()
조건 : 자료 객체 내에 코드 ㄴㄴ
var 자료 = {
data : [1,2,3,4,5],
}
자료.전부더하기 = function(){
var 합 = 0;
this.data.forEach(function(a){
합 += a;
})
console.log(합)
}
자료.전부더하기()
<button id="버튼">버튼이에요</button>
<script>
document.getElementById('버튼').addEventListener('click',
function () { setTimeout(() => {
console.log(this.innerHTML)
}, 1000);
});
</script>
만약 setTimeout 의 콜백함수로 일반함수를 썼으면 window가 나온다. 그래서 이 때는 화살표함수를 사용하면 this는 버튼 태그를 가리킨다.