JS(javascript) 객체 생성 관련

java의 lamda처럼 javascript에 function의 개념을 잘 잡아야 합니다.

일반적으로 onclick=goPage('main')으로 호출하서 사용하는 개념보다 더 엄청난 역활을 합니다.

function goPage(type){
	location.href="http://~~"
}

 

ES6부터는 class가 생겼고, java처럼 개념이 1:1로 매핑하려고 하는 부분이 있지만,

실제적으로는 기존의 prototype, function개념을 보기 편하게 mapping만 해놓은것이라고 보면된다.

 

■ JS 중요한 개념

1. function은 class로 생각하세요
2. function이 생성자의 인자값으로 사용이 가능합니다.

 

■ JS 소개

(하단 예제는 " 헤드 퍼스트 자바스크립트 프로그래밍 Head First JavaScript Programming" 을 참조해서 정리한 내용이 포함되어 있습니다.)

 

☞ 객체 리터럴 : 구조체처럼 필요한 값을 담아서 편하게 사용한다. 

     VO객체처럼 taxi.type 이렇게 호출해서 사용할수도 있고, 값을 넣을수도 있다.

     여기서 함수가 정의될수 있어서 동적인 행위도 정의할수 있다.

var taxi = {
   type : "벤츠",
   used : False,
   driving : function() { console.log("ECO드라이빙" }
}

 

 

☞ 객체 생성 후, 배열로 구성하기

var c1 = new Car("현대");
var c2 = new Car("현대");
var c3 = new Car("현대");

# 이렇게 객체를 각각 생성하고, 다시 배열에 담을수 있음
# 이런 패턴을 사용할지는 모르지만, 참고용
var c_data = [c1, c2, c3];

 

 

☞ 객체 생성과 인자값으로 객체 리터럴 사용하기

 var fruit = new Food("과일", "100", "2", "현대백화점", "무료배송", "포인트", "유료회원", "A");
 
 # 이런식으로 인자값이 많은경우에 해당 인자값을 객체리터럴로 구성해서 처리하면 가독성 및 관리가 편함
 var foodParams = {
   a : "과일",
   b : 100,
   .....
   .....
 }
 
 # 이런식으로 구성 가능함
 var fruit = new Food(foodParams);

 

 

☞ 객체 변수 삭제 하는 방법과, 고유한 속성을 만들수 있는 방법

여기서 객체를 생성하고 변수 및 함수를 추가해서 생성하였다.

이런 방법도 있고, 다른 방법은 2가지가 더 있다.

여기서 1), 2), 코드샘플 (new로 객체 생성후 선언) 하는 경우가 있는데 값의 호출은 역순으로 호출된다. (혹시 틀리면 알려주세요)

1), 2)번의 경우 어디서든 new로 객체 생성후에 호출해서 사용하면 되는데, 3번의 경우는 개별적으로 동작되는 것이다.

다른곳에서 new를 하여도 사용할 수 없는 것이 차이점이다.

 

1) 함수 생성자 부분에서 설정하는 방법

function Dog(){

   this.age = "100",

   this.speech = function (){ // 로직수행}

}

 

2) prototype을 통해서 설정하는 방법

Dog.prototype.age = "100"

Dog.prototype.speech = function() { // 로직수행}

var animal = new Dog("멍멍");

# 보통은 이렇게 저는 사용을 잘 안해봤는데, 휘발성으로 로직을 구현할때는 메모리 양도 줄이고 괜찮아 보입니다.
animal.age = "100";
animal.speech = function(){ // 로직 수행 }

# 객체에 변수를 삭제하는 방법이다.
delete animal.weight;

 

 

☞ 메소드 중복 문제

    이렇게 class의 역활을 하는 function안에서 함수를 여러개 만들어 놓는 경우 메모리를 더욱더 많이 사용합니다.

    new Obj를 통해서 객체를 생성하였을 경우, 해당 메소드등도 모두 적제된다.

    실제 모든 메소드를 다 사용하지 않는 경우, 이렇게 구성하는것이 불필요 하다.

    // 가능하면 매번 사용되지 않는 메소드는 prototype을 이용해서 메소드를 구성하고 필요할때마다 호출해서 사용하면 더 효율적이다.

    ex : Obj.prototype.fun = function() { // 로직}

function Obj = {
   this.name = "길동이",
   this.age = "100",
   this.fun = function() { // }
   this.fun2 = function() { // }
   this.fun3 = function() { // }
   this.fun4 = function() { // }
   this.fun5 = function() { // }
   this.fun6 = function() { // }
}

 

 

☞ prototype에 상속받는 객체로 구성하기

   Dog() // 최상위 객체

   ShowDog // 하위 객체

   HouseDog // 하위 객체

   이렇게 구성되어 있을때, 

function Dog()
{
	this.name = "강아지",
    this.age = "100"
}

function ShowDog()
{
	this.name = "멋진강아지",
    this.age = "200",
    this.weight = "100"
}

// 상속처리 구성
ShowDog.prototype = new Dog();

// 이 코드가 없어도 동작은 하지만, 이렇게 설정해주는게 좋은 습관
ShowDog.prototype.constructor = ShowDog;


// 추가 정리
// 생성자 변수에 동일값이 있어서 코드 중복방지
// call, apply등이 있다.

// Dog와 ShowDog에 중복되는 부분이 있어서 아래와 같이 처리가 가능하다
// 인가값 부분은 참고용입니다.
function ShowDog(a, b)
{
	Dog.call(this, a, b)
	this.weight = "100"
}