JS this!!!!
js에는 this라는 키워드가 있다. this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다.
1.일반 함수 실행 방식(Regular Function Call)
-일반 함수 실행 방식으로 함수를 실행했을 때 this의 값은 Global Object를 가리킨다. 브라우저상에서는 window객체를말한다.
var name= 'juli';
function foo(){
console.log(this.name)}//juli
foo();
-전역변수로 name 변수 만들고 'juli'할당. 전역변수이기 때문에 전역 객체인 window에 속성으로 추가된다. var name='juli'라는 코드는 window객체에 name이라는 key와 juli라는 value가 추가된다.
이때 thils는 window객체를 가리키므로 console.log(this.name)은 console.log(window.name)과 같다.
-'use strict'를 사용하면 name은 error라고 나온다. strict mode에서 this는 undefined이다.
'use strict'
-strict mode에서 실행되는 모든 코드들에 좀 더 엄격한 규칙들을 적용. 비엄겸 모드에서 일어나는 다양한 실수들을 방지하여 각종 에러들을 감소시킨다.\
2. 도트 표기법(Dot Notation)
-도트 표기법이란 우리가 object를 만들과 그 object의 key와 value를 부여한 후 도트(.)로 값에 접근하는 방식을 말한다.
var age = 100;
var ken = {
age=35,
foo:function (){
cnsole.log(this.age);}} //35
ken.foo();
-ken이라는 변수에 객체를 만들었다. ken.foo();라고 객체 속성의 값에 접근하는 방식을 도트표기법이라고 말한다.
-this는 그 도트앞에 써있는 객체 자체를 가리킨다.
3.명백한 바인딩(Explicit Binding)/ call,bind,apply
this의 역할을 우리가 직접 명확하게 지정해준다는 뜻이다. functon.prototype.call,function.prototype.bind, function.prototype.aplly와 같은 메소드를 사용할 수있다.
var age = 100;
function foo(){
console.log(this.age);}
var ken = {
age:25,
log:foo:}
foo.call(ken,1,2,3) //35출력
-foo함수에 call메소드를 사용하여 실행함. 인자로 ken,1,2,3,을 주었다. 인자중 첫번째 ken이 this의 값으로 지정된다. 1,2,3은 this 의 값과 상관없이 순성대로 foo 함수가 된다.
var age = 100;
function foo() {
console.log(this.age);}
var ken = {
age: 35,
log: foo}
foo.apply(ken,[1,23,4,5]);
apply또한 같은 역할. apply는 this의 값을 지정해주는 인자 외에도 배열을 인자로 넣을 수 있는데 배열의 값이 순차적으로 foo 함수의 인자가 된다.
4.new 키워드를 사용한 함수 실행
함수를 foo() 같은 형태로 실행할 수도 있지만 , new 키워드를 사용해서 생성자 함수로 만들어 사용할 수 도 있다 .이 경우 this.는 빈 객체가된다.
function Person (){
console.log(this);}
new Person();
-Person이라는 함수를 선언하였고, new 키워드를 사용하여 Person 함수를 생성자 함수로 사용하였다. this는 빈 객체를 가리키며 위의 생성자 함수는 this라는 빈 객체를 return 한다.
function Person () {
this.name ='ken';
console.log(this);}
var ken = new Person();
console.log(ken);
일반 방식으로 실행된다면 this는 window를 가리키게 될 것이고 window 객체에 name:ken이 추가되었을 것이다. return 문이 없기 때문에 어떠한 값도 리턴 하지 않으므로 ken 이란 변수엔 어떤 것도 할당 되지 않아 console에 undefined가 될 것이다.
new Person()생성자 함수로 실행하였다. this는 빈 객체를 생성하여 name: ken값을 할당하고 , return 문이 없어도 객체가 리턴된다.