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는 전달받은 인스턴스에 바인드
13. this
By hoonnotes
13. this
- 62
