객체

#객체

1. 객체 생성 첫번째 방법

var 객체명={속성:값 , 속성:값, ....};

2. 두번째 방법( 생성자함수를 이용하는 방법 )

            일반객체선언과 다르게 여러개의 객체를 찍어낼 수 있는 함수( 함수명 첫글자는 대문자로)

function 함수명(){

    this.속성=값;

}

var 객체명 = new 함수명();

# 배열과 객체 접근법

배열은 요소에 접근할때 인덱스를 사용하고

객체는 요소에 접근할때 키를 사용한다.

배열 : 배열명[인덱스]

객체 : 1.  객체명.키

       2.  객체명["키"]   or  객체명['키']

[ex]

window.onload = function() {

    // 배열

    var arr = [11,22,33];

    alert(arr[0]);

    // 객체 생성 첫번째 방법

    var 객체1 = {color:"red", speed:"100"};

    alert(객체1["a1"]);    // [ ]안에서만 " " 

    alert(객체1.a1);        

    // 객체 생성 두번째방법( 함수를 객체화 )

    var jj = new a();

    alert(jj["a1"]);

    alert(jj.a1)

}

// 객체생성 두번째방법

function a() {

    this.a1 = "111";

    this.a2 = "222";

}

[ex]

//Car는 객체( 객체생성첫번째방법 )

var Car = { 

    color: "red",

    speed: 100,

    speedUp: function(a) {     //자료형이 function

        return this.speed + a; //speed가 Car의 멤버변수이기때문에 this를붙혀야함!

    }

};

document.writeln(Car["color"]);

document.writeln(Car.color);

document.writeln(Car.speedUp(5));        // function명에 바로 매개변수를 전달

document.writeln(typeof Car.speedUp);     //자료형이 function

document.writeln(typeof Car);             //Car의자료형은 객체이기때문에 object

#메서드

객체 속성으로 저장되는 함수(function) 을 말함!!!

=> 그러니깐 아래와같이 person이라는객체속의 eat function을 메소드라 부름

var person = {

    name: "홍길동",

    eat: function() {

        return "밥을먹는다";

    }

}

document.write(person.name);

document.write(person.eat());   //밥을먹는다     

                                //잘보시오 eat뒤에 ()붙었음!! 차이알아둘것!

document.write(person.eat);     //function(){ return "밥을먹는다"; }

document.write(person['eat']);  //function(){ return "밥을먹는다"; }

사실 이는 자바스크립트에서 직접 제공하는 메서드도 있다.

// 문자열.trim()    : 앞뒤공백제거

alert( " abc ".trim() );    // abc 

alert( " abc ".trim );      // function(){  [native code]  }    

두번째는 메서드의 () 를 안붙혔더니 그 메서드의 정의 function이 출력된다.

이는 위 person의 메서드랑 동일한 방법으로 정의 되었기때문이다.

eat와 trim은 속성(property)이라 부르고 

()를붙힌 위 person의 eat()와 trim()은 둘다 메서드라 부른다!!

속성

    person.eat

    "abc".trim

메서드

    person.eat()

    "abc".trim()

# 자바스크립트 내장 메서드 

concat, filter, forEach, getDate, indexOf, join, lastIndexOf, map, pop, push, reduce, replace, splice, split,

substr, substring, toArray, toJSON, toLowerCase, toString, trim , valueOf 등등 더많음...

https://msdn.microsoft.com/ko-kr/library/c6hac83s(v=vs.94).aspx

#객체관련키워드 in, with

'속성' in 객체       : 해당키가 객체안에있는지를 확인할때 사용       //꼭 ' ' 생략안됨!! (true or false)

with(객체){  }    : 객체의 속성을 사용할때 ' 객체. ' 을 생략할수있다.        생략한건{  } 안에서써먹을수있음!

[ex] '속성' in 객체

var a={

          aa:100,

          bb:"erer",

          cc:function(){

               return "jjj";

         }

};

document.write( 'aa' in a );    // true

[ex] with(객체){      }

var a={ aa:1, bb:2};

with(a){

    document.write( aa );    // 1

}

with( document ){

    write(a.aa);    // 1

}

# 객체의 속성(키) 추가와 제거

1. 키 추가방법!(남이만든 객체의 키를 추가)

        객체명.새로운키 = "aa";

var a = {};    // 껍데기

a.aa = "aa";

2. 키 제거방법!(남이만든 객체의 키를 제거)

delete(a.aa);

# prototype

함수안에 메서드나 변수를 생성할때 함수객체를 생성하여 그안에 등록한다.

하지만 이렇게 하면 함수객체생성시에 그 함수안에 기존에 있던 메서드나 변수또한 다시 생성된다.

이를 보완하기 위해 나온것이 prototype임

즉, 함수안에 멤버변수나 메서드를 메모리상 효율적으로 등록하는방법!!

객체명.prototype.속성명 = "123";            // 객체명이지 객체값이 아님! ( Date, Car )

객체명.prototype.속성명 = function(){  }

function Car() {

    var a = 10;

    this.b = 20;

}

Car.prototype.c = function() {

    return 123;

}

var aa = new Car();

document.writeln(aa.a);    // undefined    ( 외부에서 var속성에는 접근불가!! 내부용임)

document.writeln(aa.b);    // 20

document.writeln(aa.c);    // function(){ return 123; }    ()를안붙혔으므로...

document.writeln(aa.c());  // 123

이와같이 객체생성안하고 멤버변수나 메서드를 등록 가능하다!!!( 메모리적 효율 )

그리고 내장 함수인 Date등도 내가 임의로 속성 추가 가능하다!!