this

hoonnotes

what is this!

자기 참조 변수

생성자함수가 만들 인스턴스를 참조

메서드나 프로퍼티가 속한 객체를 참조

what is this!

function Person(name, job) {
  this.name = name;
  this.job = job;
}

Person.prototype.introduce = function () {
  console.log(`안녕하세요. 저는 ${this.occupation} ${this.name} 입니다`);
};

const hoon = new Person("hoon", "marketer");
const jane = new Person("jane", "ux writer");

what is this!

function Person(name, job) {
  // this = {}
  this.name = name;
  this.job = job;
  
  // return this {
  //    name: name,
  //    job: job
  // }
}

Person.prototype.introduce = function () {
  console.log(`안녕하세요. 저는 ${this.occupation} ${this.name} 입니다`);
};

const hoon = new Person("hoon", "marketer");
const jane = new Person("jane", "ux writer");

다양한 함수 호출 방식

함수 호출 방식
 

1. 일반 함수 호출

2. 메서드 호출

3. 생성자 함수 호출

4. Function.prototype.apply / bind/ call

const normal = function () {
  console.log(this); // global
};
normal();

const methods = {
  method: function () {
    // { methods: [Function] } <= methods 객체
    console.log(this); 
  },
};
methods.method();

function Constructor() {
  console.log(this);
}
new Constructor(); // Constructor { }

const indirect = { name: "hoon" };
normal.call(indirect); // { name: 'hoon' } <= indirect 객체
normal.apply(indirect); // { name: 'hoon' } <= indirect 객체
normal.bind(indirect)(); // { name: 'hoon' } <= indirect 객체

일반함수 호출

일반 함수 호출하는 경우
 

this는 전역 객체에 바인딩 

function test() {
  console.log(this);
  function inner() {
    console.log(this);
  }

  inner();
}

test();

일반함수 호출

메서드 내부에 일반함수로 정의한 경우
 

this는 전역 객체에 바인딩 

const student = {
  course: "JavaScript Deep Dive",
  getInfo() {
    console.log("getInfo의 this: ", this);
    console.log("공부중인 과목: ", this.course);

    function test() {
      console.log("메서드 안의 일반함수 this: ", this);
    }
    test();
  },
};

student.getInfo();

일반함수 호출

콜백함수가 일반함수로 정의되는 경우
 

this는 전역 객체에 바인딩 

const student = {
  course: "JavaScript Deep Dive",
  getInfo() {
    console.log("getInfo의 this: ", this);
    console.log("공부중인 과목: ", this.course);

    setTimeout(function () {
      console.log("메서드 안의 일반함수 this: ", this);
    }, 300);
  },
};

student.getInfo();

일반함수 호출

콜백함수가 일반함수로 정의되는 경우
 

this는 전역 객체에 바인딩 

const student = {
  course: "JavaScript Deep Dive",
  getInfo() {
    const that = this;
    setTimeout(function () {
      console.log(`${that.course}를 공부중입니다`);
    }, 300);
    setTimeout(() => {
      console.log(`${that.course}를 공부중입니다`);
    }, 300);
  },
};

student.getInfo();

메서드 호출

메서드로 호출되는 경우

 

this는 메서드를 호출한 객체에 바인드

const person = {
  name: "hoon",
  getName() {
    return this.name;
  },
};

person.getName();

메서드 호출

person

<function object>

this

...

...

...

name

getName

hoon

<function>

differentPerson

name

getName

jane

<function>

const person = {
  name: "hoon",
  getName() {
    console.log(this.name);
  },
};

person.getName();

const differentPerson = {
  name: "jane",
};

differentPerson.getName = person.getName;
differentPerson.getName();

this에 바인딩 될 객체는, 메서드가 호출되는 시점에 결정된다!

생성자 함수로 호출

function Person(name) {
  console.log(this);
  this.name = name;
  console.log(this);
}

const hoon = new Person("hoon");

생성자 함수로 호출되는 경우

 

this는 생성될 인스턴스에 바인드!

Function.prototype. 메서드

/**
 * @param thisArg   - this 로 사용될 객체
 * @param argsArray - 함수에 전달할 인수 리스트
 * @returns           호출된 함수의 반환값
 */
Function.prototype.apply(thisArgs, [, argsArray])

/**
 * @param thisArg   - this 로 사용될 객체
 * @param arg1, arg2, ... - 함수에 전달할 인수 리스트
 * @returns           호출된 함수의 반환값
 */
Function.prototype.call(thisArgs, [, arg1[, arg2[, ...]]])

apply, call, bind 메서드로 호출되는 경우

 

this는 전달받은 인스턴스에 바인드

Function.prototype. 메서드

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

tester();

const person = { name: "hoon" };

tester.apply(person);
tester.call(person);

apply, call, bind 메서드로 호출되는 경우

 

this는 전달받은 인스턴스에 바인드

Function.prototype. 메서드

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

apply, call, bind 메서드로 호출되는 경우

 

this는 전달받은 인스턴스에 바인드

Function.prototype. 메서드

 class Person {
  constructor(name) {
    this.name = name;
  }

  showname() {
    console.log(this.name);
  }
}

const hoon = new Person("hoon");
hoon.showname();

const showname = hoon.showname;
showname();

apply, call, bind 메서드로 호출되는 경우

 

this는 전달받은 인스턴스에 바인드

Made with Slides.com