javascript 기초 1 - 함수(5)

○ 프로퍼타입 체이닝

   - 자바스크립트에서 객체는 자기 자신의 프로퍼티뿐만이 아니라, 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티 또한 마치 자신의 것처럼 접근하는 게 가능하다. 이것을 가능케 하는 게 바로 프로토타입 체이닝이다.

 

 @ 객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝

 

ex) 객체 리터럴 방식에서의 프로토타입 체이닝

var myObject = {
    name : 'foo',
    sayName : function() {
        console.log('My name is' + this.name);
    }
};

myObject.sayName(); // my name is foo
console.log(myObject.hasOwnProperty('name')); //true 
console.log(myObject.hasOwnProperty('nickname')); //false
myObject.sayNickName(); // Uncaught TypeError: Object #<Object> has no method 'sayNickName'

   - hasOwnProperty() 메서드는 이 메서드를 호출한 객체에 인자로 넘긴 문자열 이름의 프로퍼티나 메서드가 있는지 체크하는 자바스크립트 표준 API 함수다.

 

 @ 생성자 함수로 생성된 객체의 프로토타입 체이닝

function Person(name, age, hobby) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}

var foo = new Person('foo', 30, 'teenis');

console.log(foo.hasOwnProperty('name')); // true

 

○ 기본 데이터 타입 확장

    - 자바스크립트 모든 객체에서 호출 가능한 hasOwnProperty() 나 isPrototypeOf() 등과 같은 표준 메서드들은 Object.prototype에 정의되어 있다. 이와 같은 방식으로 자바스크립트의 숫자, 문자열, 배열 등에서 사용되는 표준 메서들의 경우 이들이 프로토타입인 Number.prototype, String.prototype, Array.prototype 등에 정의되어 있다. 몰론 이러한 기본 내장 프로토타입 객체 또한 Object.prototype를 자신의 프로토타입으로 가지고 있어서 프로토타입 체이닝으로 연결된다.

ex) String 기본 타입에 메서드추가

String prototype.testMethod = function(){
	console.log('This is the String.prototype.testMethod()');
};

var str = "this is test";
str.testMethod();

console.dir(String.prototype);

 

○ 프로토타입도 자바스크립트 객체다

function Person(name){
	this.name = name;
}

var goo = new Person('foo');

//foo.sayHello();

//프로토 타입 객체에 sayHello 메서드정의
Person.prototype.sayHello = function() {
	console.log('hello');
}

foo.sayHello(); // hello

○ 프로토타입 메서드와 this 바인딩

function Person(name) {
	this.name = name;
}

//getName() 프로토타입 메서드

Person.prototype.getName = function() {
	return this.name
};

console.log(foo.getName()); // 출력값 : foo

Person.prototype.name = 'person';

console.log(Person.prototype.getName()); // person

○ 디폴트 프로토타입은 다른 객체로 변경이 가능하다

function Person(name)
{
	this.name = name;
}
console.log(Person.prototype.constructor);

var foo = new Person('foo');
console.log(foo.country);

Person.prototype = {
	country: 'korea',
};
console.log(Person.prototype.constructor); // undefined

var bar = new Person('bar'); // Object()
console.log(foo.country); // undefined
console.log(bar.country); // korea
console.log(foo.constructor); //Person(name)
console.log(bar.constructor); //object()