- this는 함수 내에서 함수를 호출한다.
- 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다.
1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 'hello world';
function foo () {
console.log(this.name); // this는 객체이다.
}
var obj = {
'a': 'obj',
'b': foo
};
foo(); // 'hello world'
obj.foo(); // 'obj'
객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다.
1
foo(); === window.foo();
window.log() (this는 window를 가리킨다.) obj.logName() (this는 obj를 가리킨다.)
모든 객체는 전역 객체의 프로퍼티다.
example
1
2
3
4
5
6
7
8
9
10
11
var a = 'Hello?';
function foo () {
console.log('world');
}
console.log(a); // 'Hello?'
console.log(window.a) // 'Hello?'
foo(); // 'world'
window.foo(); // 'world'
a와 window.a는 같고,foo();와 window.foo();는 같다. 모든 전역변수와 함수는 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다.
1
2
3
4
5
6
7
8
9
10
var obj = {
'foo': function () {
console.log('Hello?');
}
}
obj.foo(); // 'Hello?'
window.o.foo(); //'Hello?'
console.log(obj.foo === window.obj.foo); // true
자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티이다.
1
2
3
4
5
6
7
8
9
10
11
12
var a = '외부';
function foo () {
var a = '내부';
bar();
}
function bar () {
console.log(this.a);
}
foo(); // '외부'
bar();는 window.bar() 같기 때문에 this는 전역객체 window.a를 가리킨다.
use strict 모드
오류를 보안해주기위해 엄격한 코드실행을 해주는 환경 엄격모드를 전체 스크립트에 적용하기 위해, 정확한 구문 “use strict”;(또는 ‘use strict’;) 을 다른 구문 작성 전에 삽입한다.
example
1
2
3
4
5
6
7
8
9
'use strict';
var a = 'hello';
function foo () {
console.log(this.a); // 'this' === undefined
}
foo();
‘use strict’ 모드가 적용 되면 'this' === undefined 로 설정된다.
window를 가리키고 싶다면 ?
1
2
3
4
5
6
7
8
9
'use strict';
var a = 'hello';
function foo () {
console.log(window.a);
}
foo();
Method 호출: 부모 object
객체의 소속인 메소드의 this는 그 객체를 가리킨다
example
1
2
3
4
5
6
7
8
9
10
var a = 'hello';
var obj = {
a: 'world',
foo: function foo () {
console.log(this.a);
}
}
obj.foo(); // 'world'
window.foo()
- ‘this’는 ‘window’를 가리킨다
obj.foo()
- ‘this’는 ‘hello’를 가리킨다
example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function foo () {
console.log(this.a);
}
var a = 'hello';
var obj1 = {
a: 'world',
foo: foo
};
var obj2 = {
a: 'javascript',
foo: foo
};
obj1.foo(); // 'world'
obj2.foo(); // 'javascript'
obj1.foo();
- this는 ‘world’를 가리킨다.
obj2.foo();
- this는 ‘javascript’를 가리킨다.
example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var a = 'hello';
var obj1 = {
a: 'world',
foo: function bar () {
console.log(this.a);
}
};
var obj2 = {
age: 'javascript',
foo: obj1.foo
};
var foo = obj1.foo;
obj1.foo(); // 'world'
obj2.foo(); // 'javascript'
foo(); // 'hello'
hello.foo(); this는 hello이 된다.
apple.foo(); this는 apple이 된다.
foo(); this는 window가 된다.
call, apply, bind 호출
- this를 명시적으로 넘겨줄 때 사용한다.
- call ,apply 를 호출하면 this는 괄호 안에 있는 것을 가리킨다.
- 괄호 안에 undefined,null 넣으면 this는 window를 가리킨다.
call, apply
example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var a = 'hello';
function foo () {
console.log(this.a);
}
var obj1 = {
a: 'world',
};
var obj2 = {
a: 'javascript'
};
foo(); // 'hello'
foo.call(obj1); // 'world'
foo.apply(obj2); // 'javascript'
call or apply을 호출했을 때 this를 명시적으로 넘겨준다. call , apply 의 괄호 첫번째 인자에는 this를 넣어준다.
foo.call(obj1); ‘this’는 ‘obj1’을 가리킨다.
foo.apply(obj2); ‘this’는 ‘obj2’을 가리킨다.
apply 는 인자를 배열로 넘겨주고, call은 인자를 쉼표로 넘겨준다.
example) call
1
2
3
4
5
6
7
8
9
10
11
12
var str = 'hello';
function foo (a, b, c, d, e) {
console.log(this.str);
console.log(arguments);
}
var obj = {
str: 'world'
};
foo.call(obj, 1, 2, 3, 4, 5);
- 인자의 수가 정해져 있지 않다.
- 쉼표로 인자를 받는다.
example) apply
1
2
3
4
5
6
7
8
9
10
11
12
var str = 'hello';
function foo (a, b, c, d, e) {
console.log(this.str);
console.log(arguments);
}
var obj = {
str: 'world'
};
foo.apply(obj, [1, 2, 3, 4, 5]);
- 인자를 2개만 받는다.
- 첫번째는 this값을 넣어주고, 두번째는 인자는 배열로 들어간다.
bind
this값을 설정을 해놓은 함수를 실행하지 않고 함수 자체를 반환해 준다.
example) bind
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var str = 'hello';
function foo (a, b, c, d, e) {
console.log(this.str);
console.log(arguments);
}
var obj = {
str: 'world'
};
var bar = foo.bind(obj, 1, 2, 3, 4, 5);
bar(); // world
// 1, 2, 3, 4, 5
foo라는 함수인에 this 값을 obj로 설정해놓은 함수를 var bar라는 변수에 담았다. bar() 실행하면 world를 콘솔에 찍고 arguments ‘1, 2, 3, 4, 5’ 유사배열을 콘솔에 찍는다.
생성자와 new
생성자함수, new키워드, this
- 생성자(constructor)는 객체를 만드는 역할을 하는 함수(class)이다.
- 생성자함수는 첫글자를 대문자로 표기한다.
- 함수 앞에 new를 붙이면 리턴 값은 객체(instance)가 된다.
- 생성자 함수이름 첫글자를 대문자로 표기해 준다.
example
1
2
3
4
5
function Foo () {
console.log(this); // {}
} // 생성자 함수 class
new foo(); // 객체 instance
new 키워드를 사용하여 함수를 호출하면 함수안의 this의 값은 빈 객체가 할당되어서 함수가 실행된다.
example
1
2
3
4
5
function Foo () {
this.a = 'hello world';
}
var c = new Foo();
아래와 같이 this를 return 해주는것과 같다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Foo () {
// this = {};
this.a = 'hello world';
/*
{
a: 'hello world';
}
return this;
*/
}
var c = new Foo();
EX5 or EX6
EX5
1
2
3
function Car(brand, name, color) {
// 생략
}
EX6
1
2
3
4
class Car {
constructor(brand, name, color) {
// 생략
}