{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"4264dc87-5476-5954-86dc-ff79aea66304","excerpt":"복습 this this는 어떻게 바인딩되느냐에 따라 값이 달라진다. 이 내용은 꼭 외워야 한다. 5 Patterns of Binding ‘this’ Global : window Function : window 펑션 안에서 괄호 닫고 열고로 호출해도 window 일반적인 function 호출 : 값은 window 전역을 대표하는 변수가 window Method 호출 : 부모 object Construction mode (new 연산자로 생성된 function 영역의 this…","html":"

복습 this

\n

this는 어떻게 바인딩되느냐에 따라 값이 달라진다.

\n

이 내용은 꼭 외워야 한다.

\n

5 Patterns of Binding ‘this’

\n
    \n
  1. Global : window
    2. \n
  2. Function : window
    3. \n
\n

펑션 안에서 괄호 닫고 열고로 호출해도 window

\n
1. Global Refrence\nvar name = 'global Variable';\nconsole.log (this.name); //Global Variable : window\n\n\n2. function\nfunction foo () {\n    console.log(this.name); //Global Variable : window\n}\nfoo(); -> // window!\n    괄호 열고 닫고로 실행해도 window!\n\n       function outer() {\n        function inner() {\n            console.log(this.name);\n        }\n    }\n        outer() -> 여기도 마찬가지로 window\n\n        this의 바인딩은 scope와 상관 없다
\n

일반적인 function 호출 : 값은 window

\n

전역을 대표하는 변수가 window

\n
    \n
  1. Method 호출 : 부모 object
    2. \n
\n
var counter - {\n    val: 0,\n    increment: function() {\n        this.val += 1;\n        // counter.val과 동일\n        // 부모 오브젝트를 뜻함.\n    }\n}\ncounter.increment();\nconsole.log(counter.val); // 1\ncounter['increment']();\nconsole.log(counter.val); // 2\n\n\nvar obj = {\n    fn: function(a,b) {\n        return this;\n    }\n};\nvar obj2 = {\n    method: obj.fn\n    // 레퍼런스를 카피한다고 생각하면 된다.\n    // copy by refrence\n    // 위의 내용을 그대로 가져온다고 생각.\n}\n\n// 이거 헷갈릴 수 있지만, true다!\nobj2.method() === obj2 // true\nobj.fn() === obj // true
\n
    \n
  1. \n

    Construction mode (new 연산자로 생성된 function 영역의 this)

    \n

    : 새로 생성된 객체

    \n

    -> ES6에서 클래스 개념 도입. ES5까진 없었음.

    \n

    컨스트럭션 모드가 클래스 형식.

    \n
    function Car(name, brand) {\n // 대문자로 시작하는 이유가 클래스로 시작한다는 컨벤션\n this.name = name\n this.brand = brand\n}\nvar avante = new Car('avante', 'hyundai')\n//인스턴스를 만드는 과정 avante와 car720d과 인스턴스\n//avante는 껍데기기\n\navante.brand\navante.name\n\nvar car720d = new car('720d', 'bmw')\n\nfunction Human(name) {\n this.name = name\n}\n\nfunction Human(name, age) {\n this.name = name\n this.age = age\n debugger // 실행해보기\n}\nvar hoyong = new Human('hoyong', 400)\n//new 키워드를 쓰는게 object를 바탕으로 construct 한다는 것\nhoyong.name\nhoyong.age\n\n//정의된 함수를 껍데기로 삼아서 새로운 것을 만드는 것\n\nfunction F(v) {\n this.val\n // 이 this가 무엇을 가리키냐가 중요한 개념,\n // 이때의 this는 새로 생성된 개념.\n}\n\nvar f = new F()\n//이 this는 small f\n\n//new car() -> 인스턴스를 만드는 과정
    \n
    2. \n
\n

Objected Orient Programming 객체 지향 프로그래밍 : 추상화를 시켜서

\n
    \n
  1. \n

    .call or .apply 호출 : call, apply의 첫번째 인자로 명시 된 객체

    \n
    function identify() {\n return this.name.toUpperCase()\n}\nfunction speak() {\n var greeting = \"Hello, I'm\" + identify.call(this)\n console.log(greeting)\n}\nvar me = { name: 'Kyle' }\nvar you = { name: 'Reader' }\n\n//this를 명시적으로 넘겨주기 위해\n//call\n//apply(배열)\n\nidentify.me(this)\nidentify.call(me) //KYLE\nidentify.call(you) //READER\nspeak.call(me) // Hello, I'm KYLE\nspeak.clll(you) // Hello, I'm READER\n// 이럴 경우 전역에 있는 name에 접근\n\n// 색으로 구분된 this 자료 찾아보기!!\n// 해보면서 해석해보기
    \n
    2. \n
","frontmatter":{"title":"this review - 5 Patterns of Binding this","date":"August 07, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180807 this review - 5 Patterns of Binding this/","previous":{"fields":{"slug":"/til/20180807 Complexity/"},"frontmatter":{"title":"Complexity","category":"TIL"}},"next":{"fields":{"slug":"/til/20180809 Precourse Last Week + this, call, apply bind review/"},"frontmatter":{"title":"Precourse Last Week + this, call, apply bind review","category":"TIL"}}}}