[JAVASCRIPT]함수와 프로토타입 체이닝(2)
함수 호출과 this
arguments 객체
자바스크립트는 함수를 호출할 때 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 나지 않음
ex) 함수 형식에 맞춰 인자를 넘기지 않더라도 함수 호출 가능 코드
function func(arg1, arg2) {
console.log(arg1, arg2);
}
func(); // (출력) undefined undefined
func(1); // (출력) 1 undefined
func(1, 2); // (출력) 1 2
func(1, 2, 3); // (출력) 1 2
* 만약 C를 이런 방식으로 코딩하면 바로 에러를 내며 프로그램 종료
* 이러한 자바스크립트의 특성 때문에 함수 코드 작성시, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따른 동작을 다르게 해줘야 하는 경우가 존재
-> 이를 가능하게 해주는 것이 arguments 객체
자바스크립트에서 함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수 내부로 전달 (유사 배열 객체)
ex) arguments 객체 예제 코드
// add() 함수
function add(a, b) {
// arguments 객체 출력
console.dir(arguments);
return a + b;
}
console.log(add(1)); // (출력) NaN
console.log(add(1, 2)); // (출력) 3
console.log(add(1, 2, 3)); // (출력) 3
* console.dir(arguments)를 실행시 length: 로 인자의 갯수 같이 넘어감
* arguments 객체는 매개변수 개수가 정확하게 정해지지 않은 함수를 구현하거나, 전달된 인자의 개수에 따라 서로 다른 처리를 해줘야 하는 함수를 개발하는 데 유용하게 사용할 수 있음
ex) 이런식으로 접근 가능
function sum() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return ;
}
console.log(sum(1, 2, 3)); // (출력) 6
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // (출력) 45
호출 패턴과 this 바인딩
* 자바스크립트에서 함수 호출할 때, 기존 매개변수로 전달되는 인자값에 더해, arguments 객체 및 this 인자가 함수 내부로 암묵적으로 전달
객체의 메서드 호출할 때 this 바인딩
* 메서드를 호출할 때, 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩
ex) 메서드 호출 사용 시 this 바인딩
// myObject 객체 생성
var myObject = {
name: 'baek',
sayName: function() {
console.log(this.name);
}
};
//otherObject 객체 생성
var otherObject = {
name: 'bar'
};
// otherObject.sayName() 메서드
otherObject.sayName = myObject.sayName;
// sayName() 메서드 호출
myObject.sayName();
otherObject.sayName();
(출력)
baek
bar
함수를 호출할 때 this 바인딩
* 자바스크립트에서는 함수를 호출하면 , 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩'
ex) 전역 객체와 전역 변수의 관계를 보여주는 예제
var baek = "I'm baek"; // 전역 변수 선언
console.log(baek); // (출력) I'm baek
console.log(window.baek); // (출력) I'm baek
* 전역 변수는 전역 객체(window)의 프로퍼티로도 접근할 수 있음
ex) 함수를 호출할 때 this 바인딩을 보여주는 예제
var test = 'This is test';
console.log(window.test);
//sayHan() 함수
var sayHan = function() {
console.log(this.test); // sayHan() 함수 호출시 this는 전역 객체에 바인딩
};
sayHan();
(출력)
This is test
This is test
* 내부함수를 호출했을 경우에도 그대로 적용되므로, 내부 함수에서 this 이용시 주의!
ex) 내부 함수의 this 바인딩 동작을 보여주는 예제
// 전역 변수 value 정의
var value = 100;
// myObject 객체 생성
var myObject = {
value: 1,
func1: function() {
this.value += 1;
console.log('func1() called. this. value : ' + this.value);
func2 = function() {
that.value += 1;
console.log('fun2() called, this.value: ' + this.value);
// func3() 내부 함수
func3 = function() {
that.value += 1;
console.log('func3() called. this.value : ' + this.value);
}
func3(); // func3() 내부 함수 호출
}
func2() 내부 함수 호출
}
};
myObject.func1(); // func1() 메서드 호출
(출력)
func1() called - this.value : 2
func2() called - this.value : 101
func3() called - this.value : 102
* 예상과 다른 이유는 내부 함수 호출 패턴을 정의해 놓지 않기 때문
* 내부 함수도 결국 함수라 이를 호출시 함수 호출 패턴 규칙에 따라 내부 함수의 this는 전역 객체(window)에 바인딩
// 내부 함수가 this를 참조하는 자바스크립트의 한계를 극복하기위해 부모 함수(위에 경우 func1() 메서드)의 this를 내부 함수가 접근 가능한 다른 변수에 저장하는 방법 사용
* 관례상 this 값을 저장하는 변수의 이름 that 이라 칭함
ex) 내부 함수의 this 바인딩 문제를 해결한 예제
// 내부 함수 this 바인딩
var value = 100;
// myObject 객체 생성
var myObject = {
value: 1,
func1: function() {
var that = this;
this.value += 1;
console.log('func1() called. this. value : ' + this.value);
// func2() 내부 함수
func2 = function() {
that.value += 1;
console.log('fun2() called, this.value: ' + that.value);
// func3() 내부 함수
func3 = function() {
that.value += 1;
console.log('func3() called. this.value : ' + that.value);
}
func3(); // func3() 내부 함수 호출
}
func2() 내부 함수 호출
}
};
myObject.func1(); // func1() 메서드 호출
* func1() 에서 this를 that이라는 변수에 저장하고, 이후 내부 변수에서는 that으로 부모 함수의 this가 가리키는 객체에 접근
생성자 함수를 호출할 때 this 바인딩
* 여러가지 다른 인자를 넘김으로써 같은 형태의 서로 다른 객체를 생성할 수 있음
ex) 생성자 함수
function Person(name, age, gender, position) {
this.name = name;
this.age = age;
this.gender = gender;
}
// Person 생성자 함수를 이용해 bar 객체, baz 객체 생성
var bar = new Person('bar', 33, 'woman');
console.dir(bar);
var baz = new Person('baz', 25, 'woman');
console.dir(baz);
* 객체 리터럴 방식과 생성자 함수 방식의 차이는 프로토타입 객체(__proto__ 프로퍼티)에 있음
* 객체 리터럴 방식 프로토타입 객체 : Object.prototype
* 생성자 함수 방식 프로토타입 객체 : 생성자 함수 자체가 프로토 타입 객체가 됨
-> 예제에서는 Person.prototype