코어자바스크립트 3장 part2 (this, call, apply)

KHW·2021년 2월 21일
0

코어자바스크립트

목록 보기
6/19

생성자 함수

공통된 성질을 지니는 객체들을 생성하는데 사용하는 함수

사용법

new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로서 동작

var Cat = function(name,age){
  this.bark = '야옹';
  this.name = name;
  this.age = age;
};

var choco = new Cat('초코', 7);
var nabi = new Cat('나비', 5);
console.log(choco,nabi);		//cat 클래스의 인스턴스 객체 출력

유사배열객체 vs 배열

구분 방법 : Array.isArray('대상')

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style>

  </style>
</head>
 

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>



</body>
<script>
var array = [1, 2, 3];
var nodes = document.querySelectorAll('div');
var els = document.body.children

console.log(Array.isArray(array))	//true
console.log(Array.isArray(nodes))	//false
console.log(Array.isArray(els))		//false
</script>

</html>

유사배열의 특징 : 배열의 메서드를 쓸 수 없다.


명시적으로 this를 바인딩하는 방법

  1. call 메소드 : 첫번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정
  2. apply 메소드 : 두번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정
    (값으로 나타난건 call이용하고 배열로 나타낸건 apply 이용해 처리)
  3. bind 메소드

어떠한 함수 뒤에 사용한다.


call/apply/bind 메소드를 사용하는 이유

  1. 유사배열객체에 대해 배열 메서드를 적용
  2. 생성자 내부에서 다른 생성자를 호출 : 반복을 줄인다.
  3. 서로다른 this 객체를 바인딩

1. 유사객체에 대해 배열 메서드를 적용

var obj = {
  0 : 'a',
  1 : 'b',
  2 : 'c',
  length : 3
};
Array.prototype.push.call(obj,'d');	
//obj.push('d');		//Uncaught TypeError: obj.push is not a function
console.log(obj);

var arr = Array.prototype.slice.call(obj);
console.log(arr);

obj라는 객체에 대해 배열의 프로토타입에 있는 push 함수를 빌려쓴다.

2. 생성자 내부에서 다른 생성자를 호출

기본코드

function Student(name,gender,school)
{
  this.name = name;
  this.gender = gender;
  this.school = school;
}
function Employee(name,gender,company)
{
  this.name = name;
  this.gender = gender;
  this.company = company;
}

var by = new Student('보영', 'female','단국대');
var jn = new Employee('재난', 'male','구골');
console.log(by)
console.log(jn)

수정코드

function Person(name,gender)
{
  this.name = name;
  this.gender = gender;
}
function Student(name,gender,school)
{
  Person.call(this,name,gender);
  this.school = school;
}
function Employee(name,gender,company)
{
  Person.apply(this,[name,gender]);
  this.company = company;
}

var by = new Student('보영', 'female','단국대');
var jn = new Employee('재난', 'male','구골');
console.log(by)
console.log(jn)

해당 중복되는 부분(this.name,this.gender)가 많을수록 더더욱 반복을 줄일 수 있다.

3. 서로다른 this 객체를 바인딩

let obj  = {
  f :function(){
    console.log(this.a);
  },
  a:10000
}

obj.f();      // 10000 obj 객체

let obj2 = {
  a : 1
}

obj.f.call(obj2)  // 1 ojb2 객체

유사객체에 대해 배열 메서드를 적용의 다른 방법 (Array.from)

Array.from : 유사배열 객체 또는 순회 가능한 모든 종류의 데이터 타입을 배열로 전환

var obj = {
  0 : 'a',
  1 : 'b',
  2 : 'c',
  length : 3
};
var arr = Array.from(obj);
console.log(arr);		//['a','b','c']

Array.prototype.push() VS Math.max()

ex)

let a = [1,2,3]
a.push(4);

let num1 = 10, num2 = 100;
console.log(Math.max(num1,num2))

기본적으로 Math 객체는 매개변수로 값을 받는다. (배열 X)

배열을 매개변수로 받으려면?

1. apply 메소드 사용

let numbers = [10,20,3,16,45];
let max = Math.max.apply(null,numbers);
console.log(max);

2. ES6 spread operator 사용

let numbers = [10,20,3,16,45];
let max = Math.max(...numbers);
console.log(max);

정리

우리는 메소드에 call/apply 메소드를 이용하여 3가지의 이점을 얻을 수 있고
이를 대신하여 ES6에서는 spread operator도 나오고 있다.

출처

코어자바스크립트
apply/call

profile
나의 하루를 가능한 기억하고 즐기고 후회하지말자

0개의 댓글