2023.03.16 arrow function,this, 그리고 prototype

1.함수에 length를 쓸 수 있다.

length라는 메소드를 일반 함수에도 쓸 수 있었다. 사실 처음에는 이것이 가능한지 검색조차 하지 않았다. 당연히 ... 없겠지... 싶어서 없다 생각했다.
하지만 가능 했었다.

function tempFunc(a, b, c) {
  console.log(tempFunc.length);
}

함수의 length는 그 함수의 매개변수의 개수를 의미했다!

3

데이터를 전달할 때 필요한 매개변수에 따라 로직을 바꿀 수 있다!

2.this

디스는 스파르타다. 이해하는게 정말 힘들다. 그래서 스파르타다

this

1.this는 window다

그렇다. 윈도우다. 윈도우는 전역 객체라고도 한다.노드에서 글로벌 객체를 사요했던 기억이 난다. 비슷한 개념이 아닐까 싶다.

2.this는 상위 객체를 뜻합니다.

var object = {
  a: function() { console.log(this); },
};
object.a(); // object

object라는 객체의 메서드로 a가 나왔기 때문에 자신을 호출한 객체 object가 this다.

var a2 = object.a;
a2(); // window

함수를 따로 변수에 담아 실행하게 되면 다시 전역객체 window로 바뀐다.
즉, 호출하는 함수가 객체의 메서드인지 그냥 함수인지가 중요하다. a2는 object.a를 꺼내온 것이기 때문에 더 이상 obj의 메서드가 아니다!
어라? 그럼 객체 메소드 내에 있는 다른 함수b를 호출하면 b는 객체의 메서드로 나온게 아니라 this가 윈도우 인가요?

var obj = {
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    function bar() {
      console.log("bar's this: ",  this); // window
    }
    bar();
  }
};

obj.foo();

그렇습니다 ㅎㅎㅎ

arrow function 에서의 this

arrow function에서 this 는 자신의 상위 스코프의 this를 가리킨다

let obj1={
    a:function (params) {
        console.log(this)
    }
}
obj1.a();//a

이건 알겠다.
이걸 arrow function 으로 바꾸면?

let obj1 = {
  a: (params) => {
    console.log(this);
  },
};
obj1.a(); //window

자신의 상위객체, 즉 윈도우가 나오게 된다.

const btn = document.getElementByTagName('button');

btn.onclick = function(event) {
    console.log(this);  // <button>
    console.log(event.currentTarget)    // <button>
    console.log(this === event.currentTarget)   // true
}
출처:https://velog.io/@fa0o00/JS-this2-%EC%9D%BC%EB%B0%98%ED%95%A8%EC%88%98%EC%99%80-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%9D%98-this

이와 같이 일반 함수의 this는 객체인 button 태그가 나오지만.... 화살표 함수로 한다면 상위 객체 window가 나오게 된다... 조심하자!

3.prototype

Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용한다.
자바에서 봤던 this와 매우 유사한 느낌이다. 다만 차이점은 자바는 class,자바스크립트는 function을 사용했단 것이다.

function nameText(params) {
  this.name = "who?";
  this.age = 23;
}

일반함수에 this를 이용해 프로퍼티를 만들어주자.

let c = new nameText();

그리고 어디서 많이 본 듯한 객체생성법을 이용해 객체생성을 하자

(기분 탓이다)

console.log(c.age); //20

프로토타입으로 상속 받았다! (역시 상속이 안될리가 없지 ㅎㅎ)

여담으로 프로토입으로 직접 함수나 변수를 추가할 수 있다.

nameText.prototype.getAge = function (age) {
  console.log(this.age + age);
};

c.getAge(20); //43