[JAVASCRIPT] 함수와 프로토타입 체이닝(3)
call과 apply 메서드를 이용한 명시적인 this 바인딩
* call() 메서드는 apply() 메서드와는 기능이 같음 단지 넘겨받는 인자의 형식만 다름
* apply() 메서드도 this를 특정 객체에 바인딩할 뿐 결국 본질적인 기능은 함수호출
-> 만약 Person() 이라는 함수가 있고, Person.apply() 호출하면 기본적인 기능은 Person() 함수 호출
function.apply(thisArg, argArray)
-> 첫 번째 thisArg는 apply() 메서드를 호출한 함수 내부에서 사용한 this에 바인딩할 객체를 가리킴
-> 두 번째 argArray 인자는 함수를 호출할 때 넘길 인자들의 배열을 가리킴
** 두 번째 인자인 argArray 배열을 자신을 호출한 함수의 인자로 사용하되, 이 함수 내부에서 사용된 this는 첫 번째 인자인 thisArg 객체로 바인딩해서 함수를 호출하는 기능
ex) apply() 메서드를 이용한 명시적 this 바인딩
// 생성자 함수
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
// foo 빈 객체 생성
var foo = {};
// apply() 메서드 호출
Person.apply(foo, ['foo', 30. 'man']);
console.dir(foo);
* 결국 Person('foo', 30, 'man') 함수를 호출하며 this를 foo 객체에 명시적으로 바인딩
-> call() 메서드로 바꾸면
Person.call(foo, 'foo', 30, 'man');
유사 배열 객체에서 메서드를 사용하는 경우
- > arguments 객체는 실제 배열이 아니므로 pop(), shift() 같은 표준 배열 메서드를 사용할 수 없지만 apply() 메서드를 사용하면 가능
ex) apply() 메서드를 활용한 arguments 객체의 배열 표준 메서드 slice() 활용 코드
function myFunction() {
console.dir(arguments); // 얘 프로토타입 Object
// arguments.shift(); 에러 발생
// arguments 객체를 배열로 전환
var args = Array.prototype.slice.apply(arguments);
console.dir(args); // 얘 프로토타입 Array[0]
}
myFunction(1, 2, 3);
함수 리턴
자바스크립트 함수는 항상 리턴값을 반환
규칙 1) 일반 함수나 메서드는 리턴값을 지정하지 않을 경우, undefined 값이 리턴
ex) return 문 없는 일반 함수의 리턴값 확인
// noReturnFunc() 함수
var noReturnFunc = function() {
console.log('This function has no return statement');
};
var result = noReturnFunc();
console.log(result);
(출력)
This function has no return statement
undefined
규칙 2) 생성자 함수에서 리턴값을 지정하지 않을 경우 생성된 객체가 리턴
*생성자 함수는 리턴값을 일반적으로 지정하지 않음
ex) 생성자 함수에서 명시적으로 객체를 리턴했을 경우
// Person() 생성자 함수
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
// 명시적으로 다른 객체 변환
return {name: 'bar', age:20, gender:'woman'};
}
var foo = new Person('foo', 30, 'man');
console.dir(foo);
* return 값을 설정하면 밑에 새 객체를 만들더라도 return 값에서 명시적으로 넘긴 객체나 배열이 리턴됨
return이 없다면 foo 객체가 출력
프로토타입 체이닝
프로토타입의 두 가지 의미
* 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있음
-> 이러한 링크를 암묵적으로 프로토타입 링크 라고 부름
* prototype 프로퍼티와 객체의 숨은 프로퍼티인 [[Prototype]] 링크를 구분해야 함
-> 자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 포로토타입 객체를 자신의 부모 객체로 설정하는 [[Prototype]] 링크로 연결
ex) prototyype 프로퍼티와 [[Prototype]] 링크 구분
// Person 생성자 함수
function Person(name) {
this.name = name;
}
//foo 객체 생성
var foo = new Person('foo');
console.dir(Person);
console.dir(foo);
* Person() 생성자 함수로 생성된 foo 객체는 Person() 함수의 프로토타입 객체를 [[Prototype]] 링크로 연결. 즉 prototype 프로퍼티나 [[Prototype]] 링크는 같은 프로토타입 객체를 가리킴
프로토타입 체이닝의 종점
* Object.prototype은 프로토타입 체이닝의 종점!!
-> 모든 자바스크립트 객체는 프로토타입 체이닝으로 Object.prototype 객체가 가진 프로퍼티와 메서드에 접근하고, 서로 공유 가능
기본 데이터 타입 확장
ex) String 기본 타입에 메서드 추가
String.prototype.testMethod = function() {
console.log('This is the String.prototype.testMode()');
};
var str = "this is test";
str.testMethod();
console.dir(String.prototype);