12. 객체란?

객체란 무엇인가?

1) Object 객체선언에 대하여

[1] 객체 리터럴: 간결한 표현방법

Object 객체를 생성하기 위해 객체 리터럴표현 { ............ }을 이용하는 코드이다.

 

 

 

 

 

 

 

객체 내부의 맴버{ ........ }가 ,(콤마)로 구분되어져 있고, 맴버들은 이름:초기값으로 :(콜론)구분되어져 있습니다.

 

 

 

 

 

 

객체리터럴을 이용해서 객체를 생성하는 방법이 있고, Object생성자를 이용해서 객체를 생성하는 방법이 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1 2 3 4 5 6 7 8 9

<script>     var abc = {     name: 'java',     age : 18,     plusAge : function (i) {     this.age + i;    } }; </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

위 코드는 객체 리터럴을 사용해서 객체를 생성하는 방법은 내부적으로 new Object를 수행한 후 맴버를 구성하는 방법과 동일한 과정입니다. 

 

또한, 객체 리터럴 표현에서 사용하는 this는 { }로 생성되는 객체를 가르킵니다. 그렇기때문에 this.age와 abc.age는 동일한 표현이 됩니다. 

 

만약 맴버가 없는 Object객체를 생성하고 싶다면, 아래와 같이 객체리터럴을 생성하면 됩니다. 

 

 

 

var abc = {}; 

 

 

 

이 코드는 Object생성자로 이렇게도 사용할 수 있습니다.

 

var abc = new Object();

 

 

사용자 정의의 객체를 정의하기위해서는 function을 사용해야 됩니다. 앞으로 제일 많이 쓰일 방법입니다.

이때, function은 일반함수를 생성할 때 쓰이기도 하지만, 객체를 생성할 때에도 쓰여요. 따라서, 같은 function이라도 다르게 사용되는 것을 구분하는 방법은 주변 실행 환경, 즉 연산자에 따라서 달라집니다.

 

 new 와 함께 사용되면 메모리에 인스턴스를 생성하는 역할로 사용됩니다.

 new 없이 단순히 () 연산자를 사용해 Person과 같이 호출하면 일반 함수처럼 사용됩니다.

 

그렇다면, 앞으로는 new를 구분해서 사용하면 될 것 같아요. 추가적으로 프로그래밍을 할때 일반 함수는 소문자로, 생성자는 대문자로 시작하도록 약속되어있는 것도 알아두세요.

 

 

자바스크립트에서는 객체의 멤버를 정의하는 것도 일반 객체향 언어와는 사뭇 다릅니다. 

자바스크립트에서는 멤버를 추가할 때 this 를 사용합니다. 

 

this.name=name; 이 코드는 Person 객체에 name이라는 공개 속성(public property)을 정의합니다.

만약 메서드를 정의하고자 한다면 익명 함수를 이용할 수 있습니다.

function을 이용해서 객체정의를 하고 => this를 이용해서 맴버를 정의를 하면 하나의 생성자가 정의되게 됩니다.  대표적인 예를 아래의 코드를 통해서 보여드리겠습니다.

<script>
function Person(name) { 
    this.name = name; 
    this.setNewName = function (name) { 
    this.name = name; 
    } 
}
</script>
 

 

위와 같이 만들어진 생성자를 new와 함께 사용하면 객체를 생성할 수 있습니다.

var mySon = new Person('jaehee');

 

이를 통해서 알 수 있는 것은, 자바스크립트에서의 생성자는 객체정의와 초기화를 담당합니다.

var mySon = new Person('jaehee'); 
var mySon = new Person(); // 생성자 매개변수 name은 undefined로 설정됨 
var mySon = new Person; // 생성자 매개변수 name은 undefined로 설정

이를 통해서 알 수 있는 것은, 자바스크립트에서의 생성자는 객체정의와 초기화를 담당합니다.

 

생성자를 new와 함께 사용할 때는 세번째 구문처럼 () 연산자를 생략해도 됩니다.

 

생성자를 호출할 때 new Person(), new Person 처럼 인자없이 인스턴스를 생성하면 생성자의 매개변수 name은 undefined로 설정됩니다. 

 

외부로부터 값을 전달받지 못한 함수의 매개변수는 undefined로 초기화됩니다.

이런 일반 함수의 특징은 그대로 생성자에 적용되는 것입니다. 

 

this를 통해 정의되는 멤버는 현재 생성되고 있는 객체의 공개 멤버로 정의됩니다. this로 정의된 멤버는 new로 생성되는 인스턴스별로 별도로 존재하게 됩니다.

 

그래서 이 글에서는 생성자 내부에서 this를 이용해 추가한 멤버는 "인스턴스 멤버"라고 표현하고 있습니다.

 

인스턴스 멤버는 나중에 접하게 될 프로토타입 멤버(prototype member)와 대비되는 개념입니다.

 

프로토타입 멤버는 동일한 생성자로 생성되는 모든 객체(인스턴스)가 공유할 수 있는 멤버로서 그 값이 변경되면 해당 생성자로 생성된 모든 객체 영향을 줍니다.

 

그에 반해 인스턴스 멤버의 변경은 해당 객체에만 영향을 줄 수 있습니다.

 

사실 자바스크립트는 프로토타입 멤버 중심입니다.

 

객체를 설계하거나 상속을 설계할 때 모두 프로토타입 객체를 기준으로 합니다.

 

따라서 자바스크립트는 프로토타입 기반의 객체지향 언어라고 하는 것입니다.

 

---

객체예제1

<script>
//생성자 생성
function car(model, speed, color){
    this.model=model;
    this.speed=speed;
    this.color=color;
    this.brake=function(){this.speed-=10;}
    this.excel=function(){this.speed+=10;}
    
    this.toString= function(){
        return this.model + "차종은" + 
           this.color + "색상을 가지고 "+ 
           this.speed + "속도를 낸다"+"<br>";                    
    }
}
 
//객체 생성
var car1 = new car('7301',100,'red');
document.write(car1);
    
//객체.메서드 호출
car1.excel();
car1.excel();
document.write(car1);
        
car1.brake();
car1.brake();
car1.brake();
car1.brake();
car1.brake();
car1.color="white";
document.write(car1);
</script>     

 

위와 같이 car생성자를 new를 통해 car2객체를 만들었어요. 

그리고 car1.only()=function(){ ........}를 작성해서 car1객체에만 존재하는 only라는 메서드를 생성하고, car2.company='아우디'를 통해 car2객체에만 존재하는 company맴버를 생성하였어요.

<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////            
    var car2 = new car('audi500',150,'black');
    document.write(car2);
    
    //car1에만 추가된 메소드정의
    car1.only=function(){ //car1에만 only가 있다 (car1.only는 선언과 동시에 function을 선언한다는 것을 의미한다)
        document.write(car1.model); //(car2.model)로 쓸 수 있다. (car1.only= this.only)로 쓸 수 있다.
    }//함수정의
    car1.only(); //함수호출   
    //car2.only(); //car2에는 없음 XXX
 
 
    //car2만 추가변수
    car2.company='아우디';
    document.write(car2.company);
    //document.write(car1.company); //car1에는 없음 XXX
            
/////////////////////////////////////////////////////////////////////////////////////////////////////////////            
</script>

 

이번에는 prototype(프로토타입)을 통해서 all이라는 메서드는 모든 객체에서 공통적으로 사용할 수 있도록 생성자에서 정의되엇습니다. 따라서, car1과 car2객체에서 따로 all을 정의하지 않더라도 둘 다 포함하는 메서드로써 호출가능합니다. 

==> prototype프로토타입: 자바스크립트에는 클래스타입의 개념이 없기떄문에, 프로토타입이라는 개념을 가지고, 여러 객체가 공유하는 메서드를 정의할 수 있다.

<script>
//car1, car2, Car타입 생성 모든 객체들 공통적
//모든 메소드는 메소드 정의와 호출이 있어야 실행할 수 있다.
//메소드 정의
car.prototype.all=function(){ //prototype은 메소드가 아니라 클래스car를 써줘야한다.
    document.write("all");
}
            
//메소드 호출
car1.all(); 
car2.all(); 
</script>      
 

---

 

 

 

 

 

 

 

 

 

객체예제1

아래의 코드는 typeof를 통해서 생성자함수(i)와 객체(ii)의 타입을 확인해보기로 했어요. 

ii객체는 object를 출력하고, i생성자는 this.a=100;의 함수형태를 출력하는 것을 알 수 있습니다.

<script>
var i= function(){this.a=100;}; //생성자함수
var ii= new i(); //i 생성자함수로 ==> ii객체를 생성
            
document.write("<br>"+typeof(ii)); //타입을 보여준다
document.write("<br>"+ii.constructor); //생성자함수를 보여준다
        
</script>
 

---

생성자예제1

<body>
<script>
var Employee = function(id, name, salary, dept){ 
    this.id = id; 
    this.name = name; 
    this.salary = salary; 
    this.dept = dept; 
    this.time = new Date(); 
    this.toString = function(){ 
        return this.id + ":" + this.name 
        + ":" + this.salary + ":" 
        + this.dept + ":"  
        + this.time.toLocaleString(); 
    } 
 } 
 
 //함수처럼 호출 (new없음) ==> 실행하면 return값을 받아온다 
 var emp_fnc=Employee(100,'이사원',56000,'인사부'); 
 document.write(this.id+"<br>");  //emp_fnc.id x
 
 //객체생성 (new있음) ==> new에 의해 employee를 복사해서 새롭게 메모리 하나를 만들어줘 
 var emp_obj= new Employee(200,'박사원',56000,'개발부'); 
 document.write(emp_obj.id+"<br>"); 
</script>    
</body>

 

최종적으로 기본적인 개념은 알고 가셨으면 좋겠습니다.

 

※ f2(2,5); //인수(argument): 함수 호출 전달하는 값

※ function f2(x,y){ } //매개변수(parameter): 함수 정의 전달받을 값

 

※ 함수란? 예를들면 alert prompt confirm setTimeout setInterval 등

function 함수이름 ( [매개변수] ){ 기능 구현 문장들; 출력문장들;   //return 결과; } 

==> 함수 (객체외부에 정의),(===>유명의 함수/ 함수 선언식

 

var f1 = function ( [매개변수] ){ 기능 구현 문장들;  }  ==> 메소드 (객체내부에 정의),(

===>무명의 함수 / 함수의 변수식)

 

 

※ 생성자란? 자바에서의 생성자의 형태와 같다. 제일 많이쓰이는 사용자정의 생성자에서는 this를 사용하고, 객체사용시 생성자와 new가 필요하다

 

※ 메서드란? 예를들면 document.write()

※ 객체란?  예를들면 document

※ 매개변수와 전역변수, 지역변수의 생성방법은?     

=> 매개변수는 메서드나 함수의 ( 괄호안에 )

=> 지역변수는 함수나 메서드의 { 괄호안에 }

=> 전역변수는 바깥에 선언되거나 메서드&함수안에서 var없이 선언되는 경우

 

※ 생성자 객체를 통해서 값을 바로 넣어주는 형태인 jason표현식은, java script object natation.

 (1) 제이슨표현식을 이용한 ajax, websocket: 서버-클라이언트 객체 주고받을 수 있다.

 

 (2) 지하철 노선도// 버스 정보// 주소 검색 사이트 이용의 국가 정보 공공성 제공은 

 => 공공 데이터 제공 사이트에서 오픈소스!!  다만, *.jason으로 되있기때문에 잘 알아야한다.

 

 (3) 객체안에서는 무조건 2개이상은 배열이다.