생성자 함수
공통된 성질을 지니는 객체들을 생성하는데 사용하는 함수
사용법
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를 바인딩하는 방법
- call 메소드 : 첫번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정
- apply 메소드 : 두번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정
(값으로 나타난건 call이용하고 배열로 나타낸건 apply 이용해 처리)- bind 메소드
어떠한 함수 뒤에 사용한다.
call/apply/bind 메소드를 사용하는 이유
- 유사배열객체에 대해 배열 메서드를 적용
- 생성자 내부에서 다른 생성자를 호출 : 반복을 줄인다.
- 서로다른 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
나의 하루를 가능한 기억하고 즐기고 후회하지말자