[JAVA SCRIPT] OBJECT - 객체

 

객체 : 실제 생활에 존재하는 모든 사물은 하나의 객체에 해당하며, 각 객체는 교유의 특성 값을 가지며, 고유한 행동을 함

- 속성(property) : 객체를 특정 지워주는 값

  - 객체의 속성은 마치 변수에 값을 할당하는 것과 유사

- 메서드(method) : 객체가 취하는 모든 행동(동작 또는 함수) -> 객체가 가지고 있는 동작 

  - 함수가 어떤 객체의 동작을 나타내는 함수로 정의될 떄, 그 함수를 그 객체의 메서드라고 함

     -> 상황에 따라 다르게 부를 따름임

 

 

---

 

 

사용자 정의 객체 : 사용자가 직접 객체를 정의하여 사용

1. 리터럴 객체 정의

- 기본 형식

  var 객체 이름 = {

  객체.속성 : 속성 값,

  .....    ,

  객체.메서드 = : function( ) { //함수문 }

  };

var myCar = {
  //객체의 속성
  model: "520d",
  color: "black",
  speed: 100,

  //객체의 메서드
  break: function() { this.speed -= 10; },
  accel: function() { this.speed += 10; }
};

 

2. new Object( )와 함수를 이용한 객체 정의

- 기본 형식

  var 객체  = new Object( );

  객체.속성 = 속성 값;

  ////

 객체.메서드 = function( ) { //함수문 };

//객체 변수 정의
var myCar = new Object();

//객체 속성 지정
myCar.type = 'BMW';
myCar.color = 'black';
myCar.speed = 100;

//메서드 정의
myCar.break = function() {
  this.speed -= 10;
  return this.speed;
};
myCar.accel = function() {
  this.speed += 10;
  return this.speed;
};

 

3. 생성자 함수를 이용한 객체 정의

- 같은 속성과 메서드를 가진 여려 개의 객체의 정의

- 기본 형식

  function 객체 ( 매개변수1, .....매개변수n) {

    this.속성1 = 매개변수1;

    .....

    this.속성n = 매개변수n;

    this.메서드1 = function( ) { //함수문 };

    this.메서드2 = function( ) { //함수문 };

  }

//생성자 함수
function Car(model, speed, color) {
  //객체의 속성
  this.model = model;
  this.speed = speed;
  this.color = color;

  //객체의 메서드
  this.break = function() { this.speed -= 10; };
  this.accel = function() { this.speed += 10; };
}

 

---

 

객체 맴버 접근하기

1. 기존 객체에 객체 맴버 삽입

//생성자 함수
function Car(model, speed, color) {
  //객체의 속성
  this.model = model;
  this.speed = speed;
  this.color = color;

  //객체의 메서드
  this.break = function() { this.speed -= 10; };
  this.accel = function() { this.speed += 10; };
}

//객체 생성
myCar = new Car("BMW", 100, "black");
yourCar = new Car("Benz", 150, "Grey");

//속성 추가
myCar.blackBox = true;
myCar.battery = 1200;
myCar.display = function() {
  alert.("myCar의 배터리 양 : " + this.battery);
}

myCar.display();

 

 

2. 객체의 맴버 삭제

//생성자 함수
function Car(model, speed, color) {
  //객체의 속성
  this.model = model;
  this.speed = speed;
  this.color = color;

  //객체의 메서드
  this.break = function() { this.speed -= 10; };
  this.accel = function() { this.speed += 10; };
}

//객체 생성
myCar = new Car("BMW", 100, "black");

//객체 삭제
delete myCar.color;

 

3. 객체에 적용하는 for..in 문

- 기본 형태

  for(var 변수 in 객체명) { //반복문 }

//생성자 함수
function Car(model, speed, color) {
  //객체의 속성
  this.model = model;
  this.speed = speed;
  this.color = color;

  //객체의 메서드
  this.break = function() { this.speed -= 10; };
  this.accel = function() { this.speed += 10; };
}

//객체 생성
myCar = new Car("BMW", 100, "black");

//for..in문
for(var i in myCar){
  document.write(i + " : " + myCar[i]);
}

 

---

 

프로토타입 : 생성자 함수에 메서드를 정의하지 않고, 생성자 외부에 별도의 메서드를 정의하여 사용

- 기본 형태

  객체명.prototype.메서드 = function( ) {

    //실행문

  }

function Car(m, s, c) {
  this.model = m;
  this.speed = s;
  this.color = c;
}

//객체 프로토타입
Car.prototype.speedUp = function(){
  this.speed += 10;
  return this.speed;
}

 

 

1. 프로토타입 링크

㉠ classicla 방식 : 하위 객체는 상위 객체로부터 속성이나 메서드를 참조 -> 상속 개념

- 부모 생성자와 부모 객체의 프로토타입 정의 

function Car(m) {
  this.model = m || "Benz";
}

Car.prototype.getModel = function() {
  return this.model;
}

function childCar(model) {
  this.model = model;
}

childCar.prototype = new Car();
var myCar = new childCar("BMW");
document.write(myCar.getModel());
}

 

㉡ prototypical 방식(Object 객체)

var parentCar = {
  model: "BMW",
  speed: 100,
  color: "Black",
  speedUp: function() {
    this.speed += 10;
    return this.speed;
  },
  speedDown: function() {
    this.speed -= 10;
    return this.speed;
  };

//객체 상속
  var first_childCar = Object.create(parentCar);
  first_childCar.battery = false;

  var second_childCar = Object.create(parentCar);
  second_childCar.model = "Benz";
}