January 2018 – 블로그 이사갔어요! https://milooy.github.io/

.note { border: 1px solid red; &:after { /* after로 반응형 정사각형 만들기 */ content: ""; display: block; padding-bottom: 100%; } .inner { /* 내부에 컨텐츠가 있을 때 추가 */ position: absolute; width: 100%; height: 100%; } }

전역에서 함수를 할당하면 window로 들어가는구나. 그래서 그 속에서 this를 찍어보면 Window객체가 나온다. new Foo()로 초기화하면 예상했던 대로 Foo { }가 나오고. 면접에서 털리고 광광 울며 정리중

js에서 모든 함수는 실행시마다 함수 내부에 this가 추가. arguments라는 유사 배열 객체와 함께 암묵적으로 전달. 그렇기 때문에 함수가 호출된 상황에 따라 그 모습을 달리 함.

this: 함수의 현재 실행 문맥. js에선 4가지의 함수 실행 타입이 있기 때문
- 1. 함수 실행: alert(‘hi’)
- 1. 메소드 실행: console.log(‘hello’)
- 1. 생성자 실행: new RegExp(”)
- 1. 간접 실행: alert.call(undefined, ‘hello’)
- 각각의 타입은 서로 다른 문맥을 가진다. 더욱이 strict mode또한 실행 문맥에 영향을 미친다.
즉시실행함수 역시 함수 실행의 종류 중 하나

var greeting = (function(name) {
    return 'Hi' + name;
})('Jay');
console.log(greeting)

함수 실행에서의 this는 전역 객체다. 전역 객체는 실행 환경에 따라 결정. 웹 브라우저에선 window가 전역 객체.

function sum(a, b) {
    console.log(this === window); //true
    this.myNum = 20; // this에 추가했고, 전역인 window에 추가됨
    return a + b;
}

function strictSum(a, b) {
    'use strict';
    console.log(this === undefined); //true
    return a + b;
}
sum(1, 2); // 3. 함수 호출 -> 여기서 this는 전역 객체
window.myNum; // 20. this에 추가했는데 윈도우에 추가됨

엄격 모드에서의 함수 실행 this
- 위의 예제에서 만약 위에 ‘use strict’;를 적어줬다면, this는 undefined가 된다.
- 엄격 모드는 현재 스코프 뿐만 아니라 내부 스코프에도 적용됨

var numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       // this는 window, 엄격 모드였으면 undefined
       console.log(this === numbers); // => false
       return this.numberA + this.numberB; // numbers에 접근 불가
     }
     return calculate();
   }
};
// 이는 객체 내에 있는 메소드를 실행하는 것. 이 실행시의 this는 window
numbers.sum(); // NaN, 엄격 모드였으면 TypeError

refer: http://webframeworks.kr/tutorials/translate/explanation-of-this-in-javascript-1/

Month: January 2018

[CSS] 반응형으로 정사각형 만들기

Refer

광광 울며 정리하는 Javascript의 this