1. name property of function
function a () { }
console.log(a.name)
const b = function () { }
console.log(b.name)
익명함수로 name을 할당하면 변수명이 원래는 안들어갔고, 브라우저 편의상 변수명을 할당했었는데
이젠 규칙으로 변수명을 할당하게 됨!
const c = function cc () { }
console.log(c.name)
그럼 기명함수 표현식의 name은?
기명된 그 이름이 들어간다 (c가 아닌 cc)
const d = () => {}
console.log(d.name)
그럼 arrow function은?
익명함수와 동일하게 name property에 해당 변수의 이름이 들어간다
const e = {
om1: function () {},
om2 () {},
om3: () => {}
}
console.log(e.om1.name, e.om2.name, e.om3.name)
// om1, om2, om3
class F {
static method1 () {}
method2 () {}
}
function G () { } // 생성자 함수로 사용
G.method1 = function () {}
G.prototype.method2 = function () {}
}
const f = new F()
console.log(F.method1.name, f.method2.name)
const g = new G()
console.log(G.method1.name, g.method2.name)
함수 G는 생성자 함수이지만,
생성자 함수는 원래 함수.
함수는 원래 1급 객체.
객체는 property를 할당할 수 있다.
=> 객체 자체한테 method1이라는 property를 할당한 것.
이것을 가지고 name을 출력하라고 한 것.
(이해못함)
const f = function (a,b) {return a + b;}
// 해당 함수를 new function으로 바꾸려면
const g = new Function('a,b','return a + b')
g(1,2) // 3
f(1,2) // 3
new Function으로 만드는 애는 익명함수를 만든다.
단, 다른 익명함수들과는 달리 해당 변수의 이름을 넣는게 아니라,
new Function
으로 만든 인스턴스
를 g에다 할당하는 방식이기 때문에
그때에 익명함수인 것을 표시하기 위해서 name에 annoymous
가 들어간다
function a () { }
const b = function () { }
a.call({ }) // undefined
a.apply({ }) // undefined
const b = a.bind({a: 1})
console.log(h.name)
call / apply
this 및 인자들을 넘김과 동시에 바로 실행하는 것.
a.call({ })
this를 {}로 해서 a를 호출하라는 뜻
apply와 마찬가지로 this를 첫번째 인자로 받음
bind
내가 넘기고 싶은 인자를 바탕으로 새로운 함수
를 만든다.
bind를 붙이면 바로 실행하지않고, 그 결과를 해당 변수에 담아라
가 됨.
그래서 b를 실행하면, b의 this는 {a: 1}이 됨.
bind를 사용했을 경우에 name은 앞에 ‘bound’가 붙어서 들어감.
2. new.target
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target
function Person (name) {
if (this instanceof Person) {
this.name = name
} else {
throw new Error('new 연산자를 사용하세요.')
}
}
var p1 = new Person('재남')
console.log(p1)
var p2 = Person('성훈')
console.log(p2)
var p3 = Person.call({}, '곰')
console.log(p3)
var p4 = Person.call(p1, '곰')
console.log(p4)
function Person (name) {
console.dir(new.target)
if (new.target !== undefined) {
this.name = name
} else {
throw new Error('new 연산자를 사용하세요.')
}
}
const p1 = new Person('재남')
console.log(p1)
const p2 = Person('성훈')
console.log(p2)
const p3 = Person.call({}, '곰')
console.log(p3)
const p4 = Person.call(p1, '곰')
console.log(p4)
function Person (name) {
const af = n => {
this.name = n
console.log(new.target)
}
af(name)
}
const p1 = new Person('재남')
const p2 = Person('성훈')
function Person (name) {
this.name = name
}
function Android (name) {
Person.call(this, name)
}
const p1 = new Android('재남봇')
function Person (name) {
console.log(new.target)
if (new.target === Person) {
this.name = name
} else {
throw new Error('Person 생성자함수를 new로 호출해야 해요!')
}
}
function Android (name) {
Person.call(this, name)
}
const p2 = new Android('재남봇')
3. 블록 스코프 내부에서 함수 선언 / 호이스팅
if (true) {
a()
function a () { console.log(true) }
}
a()
a()
if (true) {
a()
function a () { console.log(true) }
}
if (true) {
a()
function a () { console.log(true) }
if (true) {
a()
function a () { console.log(false) }
}
}
a()
'use strict'
if (true) {
a()
function a () { console.log(true) }
if (true) {
a()
function a () { console.log(false) }
}
}
a()
'use strict'
if (true) {
function a () { console.log(true) }
a()
}
a()