# this

evelo

this는 객체를 가르키는 키워드입니다. 호출한 객체가 없을 경우 this는 window객체이며 대부분의 경우 this의 값은 함수를 호출하는 방법에 의해 결정됩니다. 돔요소에서 this는 어떤것이 될까요? button을 클릭하면 dom요소 그자체가 this로 출력되는걸 볼수 있습니다. 다음과 같이 bind 키워드를 사용해서 this의 객체를 고정 시킬수도있습니다. bind 메서드는 단 한번만 가능합니다. 즉 한번 bind메서드를 사용해서 this를 고정시키면 해당 this에 bind메서드를 또 사용해서 변경할수없습니다 버튼에서도 역시 this를 bind키워드를 활용해서 고정 시킬수 있습니다. this를 불러오는 함수 앞에 아무것도 없다면 window가 호출되는 경우입니다. 여기서는 2개의 콘솔이 찍히는데 1개는 bookInfo, NODE가 찍히며 deptFu

wn8624

this란 무엇이며 왜 쓰는가? this를 왜 쓰는지에 대해서 이해하기 위해서는 먼저 객체에 대해서 다시 한번 생각해 보아야 한다. 객체란 상태를 나타내는 "프로퍼티"와 동작을 나타내는 "메서드"를 하나의 논리적인 단위로 묶는 자료구조이다. 동작을 나타내는 메서드는 자신의 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 하는데 이 때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 비유하면 this는 메서드가 프로퍼티에 접근할 수 있도록 도와주는 기사님과 같은 존재이다. ![](https://velog.v

0miiii

this는 왜 존재할까요? 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드로 구성되어 있습니다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야합니다. 이 때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 합니다. 또한 생성자 함수는 인스턴스를 생성합니다. 그 인스턴스는 자신의 프로퍼티를 참조하고 변경할 수 있어야 합니다. 그러므로 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this가 가리키는 객체는 함수를 호출하는 방법에 따라 동적으로 결정되며, 이것을 this 바인딩이라고 합니다. 함수를 호출하는 방법은 다음과 같습니다. 일반 함수 호출 메서드 호출 생성자 함수 호출 Function.prototype.apply/call/bind 메서드에 의한 간접 호출 1. 일반 함수

ony_

1. Function.prototype.call() > func.call(thisArg[, arg1[, arg2[, ...]]]) thisArg: func 호출에 제공되는 this가 될 값 arg1, arg2, ...: func이 호출되어야 하는 파라미터 첫번째 인자만 있는 경우 첫번째 인자로 들어간 duck을 this로 인식하기 때문에 duck의 age인 6을 콘솔에 찍는다. 2번째 인자가 있는 경우 2,3번째 인자로 들어간 'boo'와 'bee'를 파라미터인 duck1, duck2으로 인식하기 때문에 'boo와 bee는 6살 오리입니다.'을 콘솔에 찍는다. 2. Function.prototype.apply() > fun.apply(thisArg, [argsArray]) thisArg: func 호출에 제공되는 this가 될 값 argsArray: func이 호출되어야 하는 인수를 지정하는 **유사 배열

qmflf556

서론 클래스형 컴포넌트에서 이벤트를 어떻게 다루는지에 대한 수업을 받았다. 그중에서도 이번 포스트에서는 새로 알게된 사항에 대해 정리하고자 한다. Event Handling 기본 DOM 요소에만 이벤트 설정 React 에서의는 자체적으로 만든 컴포넌트가 아닌 기본 DOM 요소에만 이벤트를 설정할 수 있다. 그저 `` 라고만 하면 MyButton 에 onClick 을 통해 클릭 이벤트를 설정하는 것이 아닌 onClick 이라는 이름의 props 를 전달하게 된다. 그래서 자체적으로 만든 컴포넌트에 이벤트를 설정하려면 이벤트를 props 로 전달하고 그 컴포넌트 내부에서 기본 DOM 요소에 전달해야 한다. 클래스 컴포넌트에서 this binding, 화살표 함수 사용 클래스 컴포넌트의 state 는 반드시 객체여야 한다. 이때 state 를 변경하기 위해서 setState 를 사용해야 한다. state

do_dam

Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우, 이를 구분하기 위해서 사용된다. 하지만 자바스크립트의 경우 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수 호출 방식과 this 바인딩 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. > 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(Lexical Scope)는 함수를 선언할 때 결정된다. 1. 일반 함수 실행 방식 (Regular Function Call) 일반 함수 실행

zzazza

C언어 : 절차지향 현실세계를 컴퓨터에 그대로 구현하고자 하여 만든 것이 객체지향이다. C++, Java, Python : 객체지향 ※ chap4 객체지향 기초 객체: object 필요 정보: 무게, 길이, 속도,... 필요 x 정보: 색상(뭣이 중한디..) 필요 기능: 폭발 필요 값을 뽑아내는 것: 객체 모델링 무게 100kg, 길이 2m ... : 변수 폭발 펑 기능 ... : 메서드 객체는 변수(필드, 상태)와 메서드(동작)를 포함한다. 객체 = class class가 가진 변수 = 멤버변수(필드) class가 가진 메서드 = 멤버메서드(함수) ex) 전구 상태 = 필드

hafnium1923

this this 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미 하지만 Js에서 this는 어디서든 사용할 수있음 함수와 객체의 구분이 느슨한 JS에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능 3-1 상황에 따라 달라지는 this this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정 this는 함수를 호출할 때 결정된다 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라짐 3-1-1 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킴(개념상 전역 컨텍스트를 생성하는 주체가 전역객체임) 전역 객체는 js 런타임 환경에 따라 다른 이름과 정보를 가지고 있음 브라우저에서 window, Node.js에서 global 전역 공간에서만 발생하는 특이한 성질 전역변수를 선언하면 JS엔진은 전역객체의 프로퍼티

cindycho0423

Arrow Function 기존의 함수 선언 방식을 보다 간결하게 만들어 주는 문법이다. Arrow Function은 이름이 없는 익명 함수이기 때문에 일반적으로 어떤 이름을 가진 변수에 할당하거나 혹은 다른 함수의 아규먼트를 선언할 때 주로 활용됩니다. 이 함수를 Arrow Function으로 바꾸어보면 Arrow Function은 기존의 function 키워드를 사용하던 방식을 좀 더 간결하게 표현하고자 등장했기 때문에 상황에 따라서는 이것보다 훨씬 더 짧게 표현될 수 있다. getTwice 함수를 이렇게 줄일 수도 있다. *함수표현식 *함수 선언 *ArrowFunction 그러나 모든 함수들을 Arrow Function으로 표현할 수는 없고 특정한 상황에서 좀 더 간결하게 표현한 규칙들이 있다. 파라미터가 하나인 Arrow Function은 파라미터를 감싸는 소괄호 부분을 생략할 수 있다. 그런데 만약 파라미터가 두 개 이상 있거나 없을 경우에

yeol10

this 키워드 객체는 상태state를 나타내는 프로퍼티와 동작behavior을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적 자료구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 예제: getDiameter 메서드 내에서 메서드 자신이 속한 객체를 가리키는 식별자 circle을 참조하고 있다. 이 참조 표현식이 평가되는 시점은 getDiameter 메서드가 호출되어 함수 몸체가 실행되는 시점이다. 위 예제의 객체 리터럴은 circle 변수에 할당되기 직전에 평가된다. 따라서 getDiamete

jojo_

💡 Java this 키워드 ✔️ this 키워드의 개념 this는 객체 자신을 가르키는 레퍼런스 변수로, 자신의 객체에 접근할 때 사용됩니다. ✔️ this 키워드의 역할 자기 자신의 메모리를 가르킵니다. 생성자에서 다른 생성자를 호출할 경우 사용합니다. 인스턴스 자신의 주소를 반환할 때 사용합니다. * 1-1. 자기 자신의 메모리를 가르킵니다.* * 이때, this 키워드를 사용하지 않으면 매개변수 이름과 대입하는 이름이 똑같기 때문에 구분할 수 없어서 에러가 발생합니다.* * 2-1. 생성자에서 다른 생성자를 호출할 경우 사용합니다.* **<span styl

taehyung

읽기전 This 바인딩의 경우 여러가지 함수의 종류를 알아야하니 아래 내용을 보고 함수의 형태를 보시면 됩니다 > > > > This 바인딩은 언제 누가 하는 것일까요? bind ( 묶다 ) 라는 의미를 가지고있는데요, 해석해보면 '이것' '묶다' 입니다.. 이상하네요 ㅎ.. 자바스크립트에서의 This 는 어떠한 객체를 지칭하는 용도로 사용되는데요. 보통 객체지향 언어에서 클래스로 만들어낸 인스턴스 객체에서 객체 자신을 지칭하기위해 사용하는걸로 알고있습니다. 그렇다면 디스바인딩은 언제 누가 하는 것일까요? 호출된 함수의 실행컨텍스트가 생성될 때 렉시컬환경에 Thisbinding 이라는 녀석이 해줍니다. 함수를 호출하는 방식에따라 This가 지칭하는객체는 달라집니다.( 동적바인딩 ) 그래서 This에 작동매커니즘에대해 잘 알지못하면 안쓰느니만 못한결과를 낳을 수 있는데요.. ㅠㅠ 앞으로 알아보도록 하겠습니다. 호출하는 방식의 종류 전역공간 호출

wn8624

this의 정의 자바스크립트에서 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스(클래스가 만든 객체)를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스(객체)의 프로퍼티나 메서드를 참조할 수 있다. 대부분의 경우(예외가 존재) this의 값은 함수를 호출하는 방법에 의해 결정된다. 👉 위에 설명은 너무 어렵다. 쉽게 말하자면 this = 호출한 놈이다. 👉 호출한 놈이 없을 경우 this는 전역 객체를 가리킨다.(브라우저 환경에서는 window 객체, node 환경에서는 global) 👉 this를 명시적으로 bind해줄 경우(apply, call, bind 호출) this는 해당 함수로 바인드 된다

heezin

this는 자신을 호출한 객체, 자신이 생성할 객체 이 두 경우 객체를 가리키는 자기 참조변수. this 는 함수가 만들어질 때가 아닌 '실행'될 때 그 값이 결정된다. 상황별로 호출 방법이 다양하다. this 함수 호출 방법 1. 일반적인 함수 호출: 일반적인 함수 호출에서 this는 전역 객체인 window(node는 global)를 가리킨다. 전역공간에 선언하는 함수는 전역공간을 가리킨다. 메서드호출이 아닌 a()함수를 직접 호출하여 함수의 컨텍스트가 어디 속하는지 알 수 없기 때문에 undefined를 출력한다. 2. 메서드 호출 : 메서드로 호출한 경우 this는 멤버접근연산자 앞의 객체를 가리킨다. 메서드를 어떻게 호출했냐에 따라 this바인딩이 달라진다. 3. 생성자 함수 호출: 생성자 함수 내에서 this는 새로 생성되는 인스턴스 객체를 가리킨다. 생성자 함수를

shinhw371

궁금했던 내용 예전에 명시적 바인딩에 대해 공부하면서 bind에 대해 알게되었는데 제법 신기한 활용법도 있어서 따로 정리해보고 싶었다. 또 call, apply는 ES6의 spread 연산자 이후에도 계속 쓰이는지 궁금했다. call, apply 이전 포스팅에서 살펴봤던 것처럼 자바스크립트의 this는 함수가 실행되는 시점에 호출의 주체에 따라 달라진다. 이 때 function 프로토타입의 메서드인 call과 apply 는 th

isabel_noh

💡 객체지향언어에서의 this? 일반적으로 객체 지향 언어에서의 this는 함수가 속해있는 객체의 자기자신을 가리킴 하지만 Javascript에서의 this는 다름 !! Javascript에서의 this > 💡 Object를 참조하는 keyword Javascript의 함수 → 일급 객체 함수를 … 변수나 데이터에 할당할 수 있음 다른 함수의 인자로 사용할 수 있음 다른 함수의 반환값, return 값으로 사용될 수 있음 → 이렇게 다양한 환경에서 함수가 호출될 수 있기 때문에, this의 의미도 함수가 호출되는 상황(함수가 호출되는 방식)에 따라 가리키는 객체가 달라짐 Javascript 실행과정 자바스크립트 엔진 실행 실행 가능한 코드 분석 전역 코드, 함수 코드, eval 코드, 블록문 실행 컨텍스트 생성 변수 환경, 렉시컬 환경, this this

kirnjiyun

객체 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 object 배열도 객체임 배열에는 index와 element가 있다. 접근하는 방법 1.product['제품명'] 2.product.제품명 속성과 메소드 배열 내부에 있는 값은 요소 객체 내부에 있는 값은 속성 객체의 속성 중 함수 자료형인 속성을 메소드라고 한다. 속성과 메소드 구분하기 pet은 name,eat속성을 가지고 있는데 eat 속성은 입력값을 받아서 무언가 한 다음 결과를 도출해내는 함수 자료형이다. eat()메소드 method 내부에서 this 키워드 사용하기 자기 자신이 가진 속성이라는 것을 표시할 때 this 키워드를 사용한다. 동적으로 객체 속성 추가/제거 객체를 처음 생성한 후 속성을 추가하거나 제거하는 것을 의미한다. 동적으로 객체 속성 추가 객체를 생성하고 속성을 지정하고 값을 입력한다. 동적으로 객체 속성 제거 delete 객체.속성

kurong

👑 constructor constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻합니다. ✨ 이벤트 리스너 이벤트 리스너 함수 안에서 this를 출력하면, 과 동일하다. : 지금 이벤트 동작하는 곳! 🌝 case 1. 이벤트리스너 안에서 콜백함수를 쓴다면 this는? 콜백함수란 -> 함수 안에 들어가는 함수 여기서 this는 window객체입니다. 저렇게 쌩으로 있는 콜백함수는 그냥 일반함수랑 똑같기 때문에 window가 출력됩니다. 🌚 case 2. 오브젝트 내에서 콜백함수를 쓴다면 this는? >1번 - 오브젝트 내 함수메소드에서 this를 쓰면 그 함수를 가지고 있는 오브젝트를 뜻하기 때문에 >2번 - forEach() 안에 있는 함수에 this가 들어있죠? 근데 이 함수는 그냥 일반 함수일 뿐입니다. 그래서 이것도 입니다. t

kurong

💟 this 를 하면, 가 콘솔창에 나타납니다. this 키워드는 window 객체를 포함해서, 사용하는 환경에 따라 또 다른 뜻(?)을 가지게 됩니다. 🐬 window 그냥 쓰거나 일반 함수에서 쓰면 window 객체 기본 함수 수납공간이라고 생각하면 됩니다 🐊 object 오브젝트 내 함수에서 this를 쓰면 그 함수를 가지고 있는 오브젝트를 뜻한다 중첩된 오브젝트 예시 코드를 알아보자 만약 메소드가 화살표 함수라면🍜 this는 상위요소인 window를 뜻합니다. 함수밖에 있던거 그대로 씀. 💙 정리 사실 위에서 배운 두가지 유형은 사실 똑같은 얘기에요. 즉, window는 global object ;

youas0214

this 꼭 써야하나? 그렇다! 왜 써야하는지 알아보자