JS 객체지향 프로그래밍, 캡슐화 , 추상화, 상속
객체지향 프로그래밍이란 어떤 동작이나 로직보다는 객체를 중심으로 프로그래밍을 하는 일종의 새로운 패러다임이다. 객체란 우리가 모델링하고자 하는 대상과 관련된 모든 정보와 데이터,코드,동작,기능들을 담을 수 있다. 객체지향 프로그래밍이란 간단하게 우리가 어떤 프로그램을 새로 만들려고 할때 어떤 방식으로 프로그램을 구성하고 조립할 것이니지에 대한 이론적인 개념이다.
var speaker = {
volume : 0,
volumeUp: function () {
this.volume += 10; },
volumeDown: function () {
this.volume ==10;},}
seapker 객체를 만들고 volumeUP과 volmeDown함수를 만들어 볼륨을 조절하였다.
speaker.volumeUp(); speaker.volume = 10000; 볼륨이 100인데 10000이되면 오류 그래서 캡슐화를 한다.
캡슐화
var speaker = (function() {
var volume =0;
return {
volumeUp: function () {
volume += 10; },
volumeDown: function (){
volume -= 10;}}} )();
speaker.volumeUp();
speaker.volumeDown();
이렇게 외부에서 함부로 변수의 값을 마음대로 바꿀 수 없도록 내부의 정보를 외부로부터 은폐하는 것을 캡슐화 라고 한다.
추상화
사용자가 특정 버튼을 눌렀을때 일정 시간이 지나면 자동으로 볼륨이 0으로 변하는 기능을 넣고 싶을때
var speaker= ( function() {
var volume = 0;
return {
volume +=10},
volume -= 10;},
autoVolumeOff: funtion() {
setTimeout(function () {
volume = 0; }, 5000)}}})():
스피커 앱을 사용하는 사용자는 어떤 원리에 의해 자동으로 스피커의 볼륨을 0이 되는 지 알 수 없다. 객체를 만들 때에는 복잡한 원리나 구동방식을 사용자로부터 추상화 시켜주는 작업이 필요하다. 즉 사용자들이 우리가 만든 것을 쉽게 쓰도록 해주는 것.
생성자 함수
function Speaker () {
this.volume = 0;}
Speaker.prototype.volumeUp = function() {
this.volume += 10;}
Speaker.prototype.volumeDown = function() {
this.volume -= 10;}
Speaker.prototype.autoVolumeDown = function () {
var that = this;
setTimeout(function () {
that.volume = 0; },5000);}'
var speaker1= new Speaker()
var speaker2= new Speaker()
var speaker3= new Speaker()
speaker1.volumeUp();
여러 개의 스피커가 필요하고 앞으로도 계속 여러 개의 스피커를 생성하여 위에서 만든 볼륨 조절 기능을 그대로 쓰고 싶다면 우리는 이때 생성자와 프로토타입을 이용한다.
Speaker라는 이름의 생성자 함수를 만들었고, 생성자의 프로토타입에 volumeUP,autoVolumeDown과 같은 메소드를 추가했다.
speaker1,2,3와 같은 여러개의 스피커 인스터스를 만들었다.
상속
function Person (name, job) {
this.name = name;
this.job = job;
}
Person.prototype.changeJob = function (newJob) {
this.job = newJob;
}
var person1 = new Person('Julia', 'programmer');
console.log(person1);
function Daughter (name, job) {
Person.call(this, name, job);
this.age = 15;
}
Daughter.prototype = Object.create(Person.prototype);
Daughter.prototype.constructor = Daughter;
Daughter.prototype.grow = function (time) {
var her = this;
setTimeout(function () {
her.age += 1;
}, time);
}
var daughter1 = new Daughter('sally', 'student');
daughter1.changeJob('idol');
console.log(daughter1);
출처: https://im-developer.tistory.com/136?category=846746 [Code Playground]
Person이란 생성자가 있고 name,job정보를 담고있다.
프로토타입에는 changeJob라는 메소드로 job을 변경할 수 있다.
Person 하위에는 daughter이라는 자식이 존재하고 Person constructor 내에서 call()을 이용하여 Person을 호출한다. Person.prototype을 포함하는 새로운 객체를 daughter의 프로토타입에 할당함으로서
daughter의 하위 인스턴스들 역시 person의 프로토타입에 있는 메소드를 이용할 수 있다.
class Person {
constructor(name, job) {
this.name = name;
this.job = job;
}
changeJob(newJob) {
this.job = newJob;
}
}
class Daughter extends Person {
constructor(name, job) {
super(name, job);
this.age = 15;
}
grow(time) {
var her = this;
setTimeout(function () {
her.age += 1;
}, time);
}
}
class Son extends Person {
constructor(name, job) {
super(name, job);
this.feeling = 'sad';
}
beHappy() {
this.feeling = 'happy';
}
}
var daughter1 = new Daughter('sally', 'student');
daughter1.changeJob('Idol');
var son1 = new Son('Mike', null);
son1.beHappy();
console.log(daughter1, son1);
같은데 es6의 class 형식으로 작성된것
출처: https://im-developer.tistory.com/136?category=846746 [Code Playground]