자바(Java)의 클래스와 상속의 개념이 자바스크립트로 구현 되었을때...

자바(Java)의 클래스와 상속의 개념이 자바스크립트로 구현 되었을때

- 클래스(Class)->클로저(Closure),

- 상속(extends)->프로토타입(prototype) 으로 대응된다.

다른 사람이 만든 jQuery 자바스크립트코드에 클로저나 프로토타입이 사용되었을때, 그 의미를 파악하기 위해서, 알아둘 필요가 있다.

참고 영상: https://www.youtube.com/watch?v=L8OvfMfIWa0 을 실습해본 소스(아래)

<script>
//일반적으로 자바스크립트 함수는 변수의 생명이 함수 내부를 벗어나면 사라진다는 사실을 극복한 코딩이 클로저(Closure)방식 코딩이다.
//하나의 부모함수에 필요한 기능을 몰아서 넣을 수 있기 때문에, 프로그램을 구조화 시킬수 있다. 자바(Java)의 클래스개념과 비슷하다.
function outter(){
 var title = 'coding';
 return function(){
  alert(title);
 }
}
var inner = outter();
inner();//무명함수 ()호출 alert('coding')실행됨

//자바스크립트 클로저방식코딩으로 get, set을 구현(아래)
function get_set(title2){
 return{
  get_title:function(){
   return title2;
  },
  set_title:function(_title){
   if(typeof _title === 'string'){
    title2=_title;
   }else{
    alert('제목은 문자열 이어야 합니다');
   }
  }
 }
}
var object1 = get_set('get_coding');//자바대응해설: 퍼블릭 get_set클래스의 객체생성(객체명:object1)
var object2 = get_set('test');//자바대응해설: public get_set클래스의 객체생성(객체명:object2)
alert(object1.get_title());//자바대응해설: object1객체의 get_title매소드호출
object2.set_title(2);//자바대응해설: object2객체의 set_title매소드호출
object2.set_title('set_coding');//자바대응해설: object2객체의 set_title매소드호출
alert(object2.get_title());
//결과적으론 클로저코딩 스타일은 자바코딩 스타일과 비슷하다.
</script>
<script>
//자바의 extends 상속과 대응되는 자바스크립트는 prototype chain 객체이다. 즉, 오버라이딩이 가능하다.
function Super(){}
Super.prototype.superProp = true;
function Sub(){}
Sub.prototype = new Super(); //Sub객체의 prototype(원형) chain(상속)객체는 Super객체이다.
var o = new Sub();
alert(o.superProp);
</script>