Front-end Developer

0%

this

Posted on Edited on

the object that is executing the current function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//method -> object itself.
const video = {
  title: "a",
  play() {
    console.log(this);
  }
};

video.play(); // {title: "a", play: f}
// play는 video의 메소드이므로 this는 video 객체를 참조한다.

//video 객체가 끝난 후에 메소드를 사용해도 같은 결과가 나온다.

video.stop = function() {
  console.log(this);
};

video.stop(); //{title: "a", play: ƒ, stop: ƒ}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//function -> global(window, global)

const video = {
  title: "a",
  play() {
    console.log(this);
  }
};

function playVideo() {
  console.log(this);
}

playVideo();
//Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const video = {
  title: "a",
  play() {
    console.log(this);
  }
};

function Video(title) {
  this.title = title;
  console.log(this);
}

const v = new Video("a"); //{}
//Video {title: "a"}
// 생성자 함수는 전역을 참조하는 것이 아니라 new가 생성할 빈 객체를 참조한다.
1
2
3
4
5
6
7
8
9
10
11
12
const video = {
  title: "a",
  tags: ["a", "b", "c"],
  showTags() {
    this.tags.forEach(function(tag) {
      // to get the current object and then get the tags property
      console.log(this.title, tag);
    }, this);
  }
};

video.showTags();