찰떡개발자 코딩

1). prototype.메소드

• __proto__ : 자신을 만들어낸 객체의 원형과 연결된 속성.
• constructor : 생성자로써, 자신을 만들어낸 객체와 연결된 속성.
• prototype : 자신을 원형으로 만들어진 새로운 객체들과 연결된 속성.

bab의 Prototype은 bab의 생성 당시 정보를 가진 새로운 객체를 복제하여 만들어진다.

prototype 프로퍼티와 연결된 Prototype Object 는 bab 함수를 통해 생성되는 객체들의 원형이 되는 것이다.

bab.hello는 bab의 원형에 접근하지 않았기 때문에 bab의 hello는 변경되지않은 상태의 원형으로 b1= new bab()에서 복사를 하게 된다.

그래서 => b1.hello(); 는 hello가 나오게 되지만 bab.hello(); 는 hello proto!! 이라는 원하는 값을 받을 수있는 것이다.

당연하지만 정리할라고 보니까 괜히 복잡하네

var bab = function(){
	this.hello = function(){
    	console.log("hello");
    }
}

bab.hello = function(){
	console.log("hello proto!!");
}

b1 = new bab();

1). 첫번째 호출
b1.hello();
==> hello

2). 두번째 호출
b1.__proto__.hello();
==> [Error] Uncauht TypeError : b1.__proto_.hello is not a function

3). 세번째 호출
bab.hello();
==> hello proto!!

그럼 hello proto를 prototype을 통해 만드는 방법을 알아보자.

bab.prototype.hello를 통해 bab의 prototype에 연결 속성을 만들어주었다.

따라 b1.__proto__.hello()를 통해 bab의 prototype에 접근하여 hello? proto를 출력할수있어졌다.

var bab = function(){
    this.hello = function(){
        console.log("hello");
    }
}


bab.prototype.hello = function(){
    console.log("hello? proto");
}
//객체 생성
b1 = new bab();

1). 첫번째 호출
b1.hello();
==> hello

2). 두번째 호출
b1.__proto__.hello();
==> hello? proto

3). 세번째 호출
bab.hello();
==> Uncaught TypeError : bab.hello is not a function

뭔가 이상하다. -> b1.hello();를 통해 hello proto!!를 출력하고 싶었는데 안됀다.

bab.prototype.hello를 통해 prototype에 접근해서 원형을 바꿔준것 같은데?

다음 코드로 확인해보자

var bab = function() {}

bab.hello = function() {

	console.log("hello");

}

bab.prototype.hello = function() {

	console.log("hello proto!!");

}

var b1 = new bab();

1). 첫번째 호출
b1.hello();
==> hello proto!!

2). 두번째 호출
b1.__proto__.hello();
==> hello proto!!

위 코드로 b1.hello()메소드를 통해 hello proto!!를 출력할 수 있게되었다....