JavaScript/this 키워드 검색 결과

해당 글 11건

call/apply & this 값 설정

call() 또는 apply()를 사용한 this 값 설정하기 this의 값은 함수가 호출된 컨텍스트에 따라 보통 달라집니다.(new 키워드를 사용한 경우는 예외) 하지만 apply()나 call()을 사용해 함수를 호출할 때 this가 참조할 객체를 정해주는 방식으로 this의 값을 조작(제어)할 수 있습니다. 말하자면, 이 방식은 자바스크립트에게 "JS야~ X함수를 호출해. 하지만 X함수에는 this 값으로 Z객체를 사용하라고 일러줘~!!!"라고 말하는 셈과 같습니다. 이 방식을 사용하면 바로 자바스크립트에서 설정한 this의 값을 재정의 할 수 있습니다. call() & this 값 설정 다음의 코드는 하나의 객체와 하나의 함수를 정의한 후 call()을 사용해 함수를 호출하며, 함수 내부의 thi..
JavaScript/this 키워드 2016. 10. 4. 08:57

call/apply 가 생성자에서 사용될 경우

call/apply 와 생성자 call / apply 가 생성자에 사용되면 다른 생성자에 정의된 인스턴스 멤버를 가져와서 정의할 수 있습니다. 다음과 같은 Person, Korean 생성자가 있다고 가정합니다. JavaScript function Person(name) { this.name = name; } function Korean(city) { this.city = city; } Korean 에서 Person 에 정의되어 있는 인스턴스 멤버를 가져오고 싶은 경우에 call/apply 를 사용할 수 있다는 것입니다. JavaScript function Korean(city) { // 생성자 Person 에 대해 call/apply 를 호출한다. Person.call(this, name) // Pers..
JavaScript/this 키워드 2016. 10. 4. 08:56

this 총정리

this 란? this 는 일반적으로 메서드가 호출한 객체의 속성(프로퍼티)입니다. this 는 객체를 생성하는 동시에 자동 생성됩니다. JavaScript function MyClass(){ this.property1 = "value1"; } MyClass.prototype.method1 = function(){ console.log(this.property1); } var my1 = new MyClass(); my1.method1(); this 가 만들어지는 경우는 일반적으로 다음과 같습니다.1) 일반 함수에서의 this 2) 중첩 함수에서의 this 3) 이벤트에서의 this 4) 메서드에서의 this 5) 메서드 내부의 중첩함수에서의 this 일반 함수에서 this 일반 함수에서서의 this 는 ..
JavaScript/this 키워드 2016. 10. 4. 08:56

bind()와 this

bind 메소드 함수를 호출하면 바로 실행되지만 bind 메소드는 Function 객체를 생성하여 반환한다. bind 메소드는 새로운 Function 객체를 생성하는 단계와 생성한 Function 객체를 함수로 호출하는 단계로 나뉘어진다. 그리고 ES5에서 지원한다. 첫번째 파라미터에 bind 메소드로 생성한 Function 객체를 함수로 호출할 때 this로 참조할 오브젝트를 지정한다. 만약 지정하지 않는다면 글로벌 객체로 간주한다. 두번째 파라미터에 bind 메소드로 생성한 Function 객체를 함수로 호출할 때 사용할 파라미터를 지정한다. 생성한 Function 객체를 함수로 호출할 때도 파라미터를 지정할 수가 있다. bind 메소드에 지정한 파라미터와 생성한 Function 객체를 함수로 호출할..
JavaScript/this 키워드 2016. 10. 4. 08:56

apply()와 this

apply 메소드 apply 메소드는 call 메소드와 같이 함수를 호출하며 기능도 같다. 한 가지 다른점이 두번째 파라미터를 배열로 작성하는 것이 다른 점이다. 일반적으로 call 메소드는 파라미터의 수가 변하지 않을 때 사용하며 apply 메소드는 파라미터가 유동적일 때 사용한다. 두 번째 파라미터 값이 null 또는 undefined 이면 빈 배열로 간주한다. 두 번째 파라미터 값의 데이터 타입이 객체가 아니라면 에러가 발생한다. 123과 같이 숫자 타입을 지정할 수 없는 것이다. {one: 10} 형태로 지정하면 에러가 발생하지는 않지만 arguments 객체에 값이 설정되지 않는다. 파라미터에 함수를 지정하면 먼저 함수를 실행하고 실행한 함수에서 반환한 결과를 파라미터 값으로 사용한다. 호출받는..
JavaScript/this 키워드 2016. 10. 4. 08:52

call()과 this

call 메소드 call 메소드의 첫 번째 파라미터에는 작성(넘겨준)한 객체를 this가 참조하게 된다. 따라서 this.propertyName 형태로 접근하여 값을 구할 수 있다. 이 점이 call 메소드의 목적이고 특징이다. 구 분 타 입 데이터(값) object Function 호출할 함수 파라미터 Object 첫번째 파라미터 : this 로 참조하게 될 객체 두번째 파라미터 : 호출된 함수에 넘줄 파라미터(옵션값) 반환 호출된 함수에서 반환한 값 첫 번째 파라미터에 this로 참조할 오브젝트를 작성한다. ES3에서 첫 번째 파라미터를 작성하지 않거나 null을 작성하면 글로벌 객체(브라우저기준으로 window)를 사용한다. 반명 ES5는 파라미터 값을 그대로 사용한다. 그런데 ES5 에서도 에러가..
JavaScript/this 키워드 2016. 10. 4. 08:51

this 키워드의 주된 목적(인스턴스 설정)

this 주요 목적new 연산자와 생성자 함수로 인스턴스를 만드는 목적 중에서 가장 주된 목적은 생성된 인스턴스마다 다른 값을 설정,유지하기 위해서이다. this 키워드를 사용해서 인스턴스마다 값을 설정하고 유지하는 예제 코드 JavaScript var title = function(opt) { this.opt = opt; }; title.prototype = { getValue: function() { return this.opt; } } // 인스턴스 생성 var one = new title(100); var two = new title([200,300]); one.opt = 77; console.log(one.getValue()); // 77 console.log(two.getValue()); //..
JavaScript/this 키워드 2016. 10. 4. 08:51

this와 호출 오브젝트

this 와 Object 객체가 구조적(계층적)으로 연결된 형태에서 함수를 호출했을 때 this가 참조하는 객체를 좀 더 구체적으로 살펴보도록 하자. 다음의 코드를 살펴보자. JavaScript var cody = { foo: 123, bar: { foo: 456, func: function() { console.log(this === cody.bar) // true console.log(this.foo) // 456 } } }; cody.bar.func(); 계층적인 객체에서 func를 호출하면 cody.bar.func()를 호출한다. 여기서 cody는 네임스페이스 역할을 하며 func앞에 작성한 bar객체를 this가 참조하게 된다. 즉, 함수를 호출할 때는 함수 바로 앞에 작성한 객체를 this가 ..
JavaScript/this 키워드 2016. 10. 4. 08:50

사용자 정의 생성자 함수 내에서 this 키워드

생성자 함수와 this new 키워드를 사용해 함수를 실행할 때 생성자 함수 내에 코딩된 this의 값은 생성자의 인스턴스를 가리킨다. 다시 말해, 생성자 함수 내에서 우리는 실제로 객체가 만들어지기 전에도 this를 통해 인스턴스를 참조할 수 있다는 것이다.이때 this의 기본값이 변경되는 방식은 call(),apply()를 사용한 것과 크게 다르지 않다. 다음 코드에서 Person이라는 사용자 정의 생성자 함수를 만들고, 생성자 내에서 this를 사용하여 만들어질 객체를 참조하게 한다. Person의 인스턴스가 만들어질 때 this.name은 새로 생성되는 객체 및 이 객체의 name이라는 속성을 참조한다.결과적으로 생성자 함수에 전달된 매개변수(name)의 값을 새로 생성되는 객체의 name 속성에..
JavaScript/this 키워드 2016. 10. 4. 08:50

중첩된 함수의 this는 글로벌 객체(브라우저에서는 window)를 참조한다

중첩 함수의 this this 키워드에 대한 기본적인 사용법에 대해서 앞서 알아보았습니다. 그렇다면 함수 내에 있는 함수에서는 this값이 어떻게 참조될까? 다음 코드에서 func2과 func3의 this는 obj객체가 아닌 글로벌 객체를 참조한다. 아래 코드를 살펴보도록 하자. JavaScript var obj = { func1 : function(){ console.log(this); // obj가 기록된다 // 중첩된 내부 함수정의 var func2 = function() { console.log(this); // window 가 기록되며, 여기서부터는 this의 값이 계속 window이다. // 중첩된 함수를 또 정의 var func3 = function() { console.log(this); ..
JavaScript/this 키워드 2016. 10. 4. 08:49

this 키워드

this 알아보기 함수를 만들 때는 함수를 실행하는 객체와 연결되는 this라는 키워드도 같이 자동으로 만들어진다. 즉, 함수를 호출할 때 자바스크립트가 자동으로 만들어 삽입하는 객체인 것입니다. this라는 키워드는 함수의 스코프 안에서 사용할 수 있으며 함수를 속성 또는 메소드로 포함하고 있는 객체를 참조합니다. 다음의 코드를 살펴보자. JavaScript var cody = { living : true, age : 30, gender: 'male', getGender : function() { return this.gender; } }; // 객체내의 메소드를 호출 console.log(cody.getGender()); // male이 기록된다. 위 코드에서 this.gender의 this는 현재 ..
JavaScript/this 키워드 2016. 10. 4. 08:49