본문 바로가기

개발중

Keyword 'this'

'this'란 무엇인가?

Usally determined by how a function is called(what we call 'execution context')
Can be determined using four rules(global, object/implicit, explicit, new)

  • 첫번째 규칙

when 'this' is not inside of a declared object  > global object(window)

_bad example


  • 두번째규칙 Implicit rule

when 'this' is inside of a declared object > closest parent's object


  • 세번째규칙 Explicit binding                                                           

function Car(make, model, year){

this.make = make;

this.model = model;

this.year = year;

this.numWheels = 4; }


call    /    thisArg, a, b, c, d, ....../    Invoke Immediately       

function Motorcycle(make, model, year) {

Car.call(this, make, model, year)

this.numWheels = 2; }

apply    /    thisArg, [a, b, c, d, .....]/    Invoke Immediately       

function Motorcycle(make, model, year){

      Car.apply(this, [make, model, year]); 

this.numWheels = 2; }

function Motorcycle(make, model, year){

Car.apply(this, arguments);

this.numWheels = 2; }


bind    /    thisArg, a, b, c, d, ....../    Invoke Immediately  

we do not need to know all the arguments 


  • 네번째규칙 'new' keyword

- Creates an object out of thin air

- Assigns the value of 'this' to be that object

- Adds 'return this' to the end of the function

- Creates a link (which we can access as_proto_) between the object created and the prototype property of the constructor function


Prototype Chain

모든 Constructor 함수는 object라고 불리는 "prototype"이라는 특성을 가지고 있다. 

prototype object 은 constructor function을 가르키는 "constructor"라는 특성을 가지고 있다.

(The prototype object contains a property called constructor, which points back to the constructor function)

'new' keyword를 사용해서 object가 생성될 때 "_proto_"이 만들어지고, 

이 "_proto_"에 의해 object와 constructor function의  프로토타입 속성이 연결됩니다.

(Every time the new keyword is used, a link between the object created and the prototype property of the constructor is established - this link can be accessed using _proto_)


To share properties and methods for objects created by a constructor function, place them in the prototype as it is the most efficient



참고자료

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

http://insanehong.kr/post/javascript-prototype/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

ExecutionContext

(http://qwefgh90.github.io/javascript/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%A4%ED%96%89-%EB%AC%B8%EB%A7%A5/)

(https://poiemaweb.com/js-execution-context)