자바스크립트 중급 (5) - setTimeout/setInterval, call, apply, bind, 상속, prototype

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다.

[자바스크립트 중급 강좌 : 140분 완성 - YouTube](https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s)

---

1. setTimeout / setInterval

setTimeout

일정 시간이 지난 후에 함수를 실행한다.

 

setInterval

일정 시간 간격으로 함수를 반복한다.

function fn(){
    console.log(3)
};
setTimeout(fn, 3000);


setTimeout(function(){console.log(3)},3000);
// 3초 뒤에 console 창에 3 띄

 

clearTimeout(함수)

예정된 setTimeout 함수를 취소한다.

 

clearInterval(함수)

interval 함수를 취소한다.

✔️ delay = 0 이어도 함수가 바로 실행되지 않고, 현재 실행 중인 스크립트가 종료된 이후에 setTimeout 함수가 실행된다. (브라우저 기본 대기 시간 : 약 4ms)

---

call, apply, bind

함수 호출 방식과 관계없이 this를 지정할 수 있다.

 

call

모든 함수에서 사용 가능하며, this를 특정값으로 지정 가능하다.

const mike = {name : "Mike"};
const tom = {name : "Tom"};

function showThisName(){
    console.log(this.name);
};

showThisName(); // window.name
showThisName.call(mike); // "Mike"
showThisName.call(tom); // "Tom"

 

apply

call과 거의 같다.

call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수와 배열로 받는다.

첫 번째 매개변수는 this로 들어갈 값이고, 두 번째 매개변수는 배열로 전달된다.

bind

함수의 this 값을 영구히 바꿀 수 있다.

---

3. 상속, prototype

obj.hasOwnProperty('propertyName')

object가 해당 key를 가지는지 확인할 수 있다.

 

obj.__proto__ = variants

variants가 해당 obj의 prototype이 된다. => 상속

상속은 계속 하위로 이어질 수 있다. => navigation chain

생성자 함수 사용 시, proto보다 prototype을 사용하면 중복코드를 줄일 수 있다.

 

instanceof

생성자 함수가 새로운 객체를 만들어낼 때, 그 객체는 생성자의 instance 라고 불려진다.

이를 편리하게 확인할 수 있는 함수로, boolean 값을 반환한다.

const car = {
    wheels : 4,
    drive(){
    console.log("drive..");
    },
};


const bmw = {
    color : 'red',
    navigation : 1,
};


const x5 = {
    color:'white',
    name : 'x5',
};


bmw.__proto__ = car;
console.log(bmw.color); // 'red'
console.log(bmw.wheels); // 4
// bmw 내에 wheels 속성이 있는지 먼저 찾고, 없으면 prototype인 car로 넘어가서 속성 가져옴.


x5.__proto__ = bmw;
console.log(x5.color); // 'white'
console.log(x5.navigation) // 1

const Bmw = function(color){
    this.color = color;
};

// Bmw.prototype = {
//    wheels : 4,
//    drive(){
//    console.log("drive..")
//    }
// };

Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function(){
    console.log("drive..");
};

const x5 = new Bmw("red");
const z4 = new Bmw("blue");


z4 instanceof Bmw; // true
z4.constructor === Bmw // true