1. Prototype Chaining
let human = function (name) {
this.name = name;
human.prototype.sleep = function () {
console.log("zzz");
};
};
let steve = new human("steve");
------------------------------------------------------------------------
여기서 왜 toString이라는 메소드를 구현하지 않았는데도 실행되는 이유는?
answer => 모든 object 는 Object를 상속받는다!!!!!!
object가 Object의 자식객체이므로 정의하지 않아도 자식객체는 부모객체의 메소드를 사용가능!
------------------------------------------------------------------------
steve.toString(); // [object Object]
steve.__proto__ === human.prototype; //true
steve.__prooto__;
//내부에는 위에서 정의한 메소드 sleep이 있고 __proto__:Object가 있음
prototype은 function 함수가 정의되는 것과 동시에 생겨난다
prototype은 객체로 그 안의 고유의 갖고 있는 메소드들이 있다.
2. Assingnable prototype
object를 array처럼 사용하기
let myArr = function () {};
myArr.prototype = Array.prototype;
let myNewArr = new myArr();
// It works like Array
3. The way to get an Inheritance
// 상속연결법!
let Human1 = function (name) {
this.name = name;
};
Human1.prototype.sleep = function () {
console.log("zzz");
};
let Tate = new Human1("Tate");
let student = function (name) {
this.name = name;
};
---------------------------------------------------------------------------------------------
/*여기서 휴먼의 기능을 어떻게 가져올 수 있을까?
1. 인스턴스의 proto에 직접 부모노드의 프로토타입을 넣는 방법.
Scalet.__proto__ = Human.prototype (확인하는 용도로만 사용!) X
2. 자식노드의 프로토타입을 부모노드의 프로토타입에 덮어 씌우는 방법.
Student.prototype = Human.prototype (다음과 같은 방식으로 하게 되면 student의 기능상실)
3. 자식노드의 프로토타입에 부모의 프로토타입을 shallow copy하는 방법.
student.prototype = Object.create(Human.prototype);
prototype이라는 객체안에 Human.prototype를 넣는다!!!!
이렇게 하면 넣어지기는 하지만 sleep의 메소드를 사용했을 때 undefined가 나온다.
이유는 ?
정확한 상속 구현이 안되어 있기 때문이다. (자바스크립트가 oop구현을 위해 만들어지지 않았음.)
sleep 메소드 자체가 Human에서 복사 붙여넣기를 한 것 이기 때문에 아직까지
그 기능은 Human에게만 작용이 된다. (student의 메소드가 아니다.)
그래서 student.prototype.constructor = student 를 식에 넣어준다.
이렇게 되면 Human.prototype.sleep 의 Human이 student로 바뀐다.
이렇게 했을 때 문제점이 발생한다.
(this.Human1 = undefined가 된다.)
Human.call(this, name) [or Human.apply(this, arguments)] 까지 작성해줘야
student가 Human의 메소드를 상속받을 수 있다.
*추가 만약 human에서 카피한 메소드를 student 안에서 실행시켰을 때 human의 메소드와
student자체에서 커스텀한 메소드 둘 다 실행시키고 싶을 때에는 ?
student.prototype.sleep = function() {
Human1.prototype.sleep.apply(this); b. 이 부분의 sleep.apply(this)에 의해 묶이면서
console.log('자면안돼!!!') c. a안에 c 부분까지 들어가게 됨
}
-> a. 이렇게 추가하게 되면 Human1의 sleep 메소드가
Human1.prototype.sleep = function () {console.log("zzz")}; 이 부분을
*/
---------------------------------------------------------------------------------------------
// 원하는 객체의 메소드 상속받는 방식
student.prototype = Object.create(Human1.prototype);
student.prototype.constructor = student;
Human1.call(this, name);
student.prototype.sleep = function () {
Human1.prototype.sleep.apply(this);
console.log("자면안돼!!!");
};
student.prototype.learn = function () {
console.log(`${this.name} is in codeStates`);
};
let Scalet = new student("Scalet");
Scalet.learn();
Scalet.sleep();
'2020-2021 > TIL' 카테고리의 다른 글
주소공유/Object.create()/Object.assign() (0) | 2020.11.05 |
---|---|
time complexity (0) | 2020.10.28 |
Instantiation Patterns (0) | 2020.10.28 |
Obj Oriented Programming?! (0) | 2020.10.28 |
Trees (0) | 2020.10.27 |
댓글