모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.
1.프로토 타입 기반
자바는 클래스 개념없이 프로토타입 기반 객체지향언어로 별도의 객체 생성방법이 존재한다.
//객체 리터럴
var obj1={};
obj1.age=20;
//Object() 생성자
var obj2= new Object();
obj2.age=20;
//생성자
function fun(){}
var obj3= new fun();
obj3.age=20;
2.생성자 함수, 인스턴스
생성자 함수와 new 연산자로 인스턴스를 생성할수있다.
다만 이 방법은 각 인스턴스마다 동일한 메소드가 생긴다.
//생성자
function Person(name){
//프로퍼티
this.name=name;
//메소드
this.setname=function(name){this.name=name}
}
//인스턴스생성
var human= new Person("KIM")
//메소드 호출
human.setname("PARK")
3.프로토타입 체인
생성자함수에 의해 생성되는 모든 인스턴스는 프로토타입 체인을통해 프로토 타입 객체의 메소드를 참조할수있다.
//생성자
function Person(name){this.name=name;}
//프로토타입객체에 메소드 정의
Person.prototype.setname= function(name){this.name=name}
//인스턴스생성
var human= new Person("KIM")
//메소드 호출
//human.__proto__ == Person.prototype임
human.setname("PARK")
4.상속
자바스크립트에서 프로토 타입을 통해 객체가 다른 객체로 직접 상속한다.
4-1.프로토타입 패턴 상속
Object.create 함수를 사용하여 객체에서 다른 객체로 직접 상속을 구현하는 방식
//상속
var Parent=(function(){
function Parent(name){this.name=name;}
Parent.prototype.sayname=function(){document.write(this.name);};
return Parent;
}());
var child2= Object.create(Parent.prototype)
child2.name="Kim";
document.write(child2.name+"<br>"); // Kim
child2.sayname(); // Kim
🎈참고자료
https://poiemaweb.com/js-object-oriented-programming#5-%EC%83%81%EC%86%8D-inheritance
'FrontEnd > JavaScript' 카테고리의 다른 글
[JavaScript] 빌트인 객체 (0) | 2024.06.07 |
---|---|
[JavaScript] 클로저 (0) | 2024.06.06 |
[JavaScript] this (0) | 2024.06.05 |