방장 공부하자 (WEB, JAVASCRIPT 4)

• 출처 : TCP스쿨

객체

객체의 예

• 객체
  • 고양이
• 프로퍼티
  • cat.name = "나비"
  • cat.family = "코리안 숏 헤어"
  • cat.age = 0.1
  • cat.weight = 300
• 메소드
  • cat.mew()
  • cat.eat()
  • cat.sleep()
  • cat.play()
• 고양이 객체는 위와같은 프로퍼티를 가지고는 있지만, 인스턴스(생성된 고양이의 종류)마다 다를 것이다.

자바스크립트 객체

• 자바스크립트의 기본 타입은 객체이다.
• 객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.
• 프로퍼티의 값으로 함수가 올 수 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.

var cat = "나비"; // 일반적인 변수의 선언
// 객체도 많은 값을 가지는 변수의 하나임.
var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };
console.log(cat)          // 나비
console.log(kitty.name)   // 나비

• 자바스크립트에서는 숫자 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체이다.
• 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 된다.

객체의 프로퍼티 참조

• 자바스크립트에서 객체의 프로퍼티를 참조하는 방법은 다음과 같다

객체이름.프로퍼티 이름

객체이름["프로퍼티 이름"] // 이 방법은 잘 안쓰입니다.

var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };
console.log(kitty.name)   // 나비
console.log(kitty["name"])   // 나비

객체의 메소드(함수) 참조

• 자바스크립트에서 객체의 메소드를 참조하는 방법은 다음과 같다.

객체이름.메소드이름()


var cat = {
  attack : function(){
    return console.log("냥냥펀치!");
  }
}

cat.attack(); //냥냥펀치!

객체의 생성

• 자바스크립트에서 객체를 생성하는 법은 다음과 같다.
  1. 리터럴 표기(literal notation)를 이용한방법
  2. 생성자함수(constructor function)를 이용한 방법
  3. Object.create() 메소드를 이용한 방법(설명 생략)
• 위와 같은 방법으로 생성되어 메모리에 대입딘 객체를 인스턴스(instance)라고 한다.
  • 본 정리본은 리터럴 표기를 이용한 방법과 생성자 함수를 이용한 방법만 설명합니다.

리터럴 표기를 이용한 객체의 생성

• 자바스크립트에서 객체를 생성하는 가장 쉬운 방법은 리터럴 표기(literal notation)를 이용하는 방법이다.

var 객체이름 = {
  프로퍼티1 : 프로퍼티1값
  프로퍼티2 : 프로퍼티2값
  프로퍼티3 : 프로퍼티3값
  ...
}

var navi = {
  name : 나비;
  family : 페르시안;
  age : 1,
  weight: 0.1
};

console.log("우리 집 새끼 고양이의 이름은 " + kitty.name + "이고, 종은 " + kitty.family + "입니다.");

생성자를 이용한 객체의 생성

• new 연산자를 사용하여 객체를 생성하고 초기화 할 수 있다.
• 이떄 사용되는 메소드를 생성자(constructor)라고 하며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 한다.
• 자바스크립트는 원시 타입을 위한 생성자를 미리 정의하여 제공한다.

var day = new Date();//new 연산자를 사용하여 Date타입의 객체를 생성
console.log("올해는 " + day.getFullYear() + "년입니다.");

프로토 타입

상속

• 상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미
• 상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있다.
• 또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있다.
• 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 된다.
• 자바스크립트는 프로토타입 기반 객체지향 언어이며 상속의 개념이 클래스 기반의 객체지향과 다르다.
• 자바스크립트에서 존재하는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 한다.

프로토 타입

• 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다.
• 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.
• 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 한다.

프로토타입 체인

• 자바스크립트에서는 객체 이니셜라이저를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입을 가진다.
• 또한, new 연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 상속받는다.

프로토타입의 생성

• 프로토타입을 생성하는 가장 기본적인 방법은 객체 생성자 함수(Object constructor function)을 사용하는 것이다.
• 생성자 함수를 작성하고 new 연산자를 사용해 객체를 생성하면, 같은 프로토 타입을 가지는 객체들을 생성할 수 있다.
• 예제

function champ(line, name, attackmethod){
  this.line = line;
  this.name = name;
  this.attackmethod = attackmethod;
}
var myChamp = new champ("원딜", "카이사", "ad");
console.log("내 라인 " + myChamp.line + "갈거고  " + myChamp.name + " 선픽했다. 템트리는" + myChamp.attackmethod + "템트리로 감.");

객체에 프로퍼티 및 메소드 추가

• 이미 생성된 객체에 새로운 프로퍼티나 메소드를 추가하는 방법은 다음과 같다.

function champ(line, name, attackmethod){
  this.line = line;
  this.name = name;
  this.attackmethod = attackmethod;
}
var myChamp = new champ("원딜", "카이사", "ad");
myChamp.family = "공허";
myChamp.tmi = function(){ //해당 챔프의 포지션과 이름을 리턴하는 메소드
  return  this.name + "이며 " + this.line;// this는 다음 키워드에 나옵니다.
}
console.log("내가 고른 챔프는" + myChamp.tmi() + "이다.");
console.log("내 라인 " + myChamp.line + "갈거고  " + myChamp.name + " 선픽했다. 템트리는" + myChamp.attackmethod + "템트리로 감.");

객체 다루기

this

• 자바스크립트에서 this키워드는 해당 키워드가 사용된 자바스크립트 코드 영역을 포함하고 있는 객체를 가리킨다.
• 예를 들어, 메소드 내부에서 사용된 this 키워드는 해당 메소드를 포함하고 있는 객체를 가리킨다.
• 객체 내부에서 사용된 this키워드는 객체 그 자신을 가리킨다.
• 이러한 this는 변수가 아닌 키워드이므로, 사용자가 임의로 가리키는 값을 바꿀 수 없다.

객체 프로퍼티의 삭제

• 자바스크립트에서 delete 키워드를 이용하여 객체의 프로퍼티를 삭제할 수 있다.

구문
delete 객체이름.프로퍼티이름;

예제

function champ(line, name, attackmethod){
  this.line = line;
  this.name = name;
  this.attackmethod = attackmethod;
}
var myChamp = new champ("원딜", "카이사", "ad");
delete myChamp.line; //line 프로퍼티를 삭제함

객체 프로퍼티와 메소드

객체 프로퍼티(property)

• 모든 자바스크립트 객체는 Object객체와 Object.prototype 객체의 모든 프로퍼티를 상속받는다(위임을 받아 상위 객체의 메소드(함수)를 사용할 수 있다.)
• prototype 프로퍼티를 이용하면 현재 존재하는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있다.

객체 메소드(method)

• 모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티와 메소드를 상속받는다
• 자주 사용되는 대표적인 객체 메소드는 다음과 같다.
  1. hasOwnProperty()
  2. propertyIsEnumerable()
  3. isPrototypeOf()
  4. isExtensible()
  5. toString()
  6. valueOf()

hasOwnProperty()

• 특정 프로퍼티가 해당 객체에 존재하는지를 검사.
• 해당 객체에서 직접 선언한 프로퍼티만을 검사, 같은 이름의 프로퍼티라도 상속받은 프로퍼티는 false 반환
• 예제

function champ(line, name, attackmethod){
  this.line = line;
  this.name = name;
  this.attackmethod = attackmethod;
}
var myChamp = new champ("원딜", "카이사", "ad");
myChamp.hasOwnProperty("line"); /true
myChamp.hasOwnProperty("name"); //true
myChamp.hasOwnProperty("class"); //상속받은 프로퍼티이므로 false

propertyIsEnumerable()

• 특정 프로퍼티가 해당 객체에 존재하고, 열거할 수 있는 프로퍼티인지를 검사.
• 예제 생략(자주 사용하지 않습니다.)

isPrototypeOf()

• 특정 객체의 프로토타입 체인에 현재 객체가 존재하는지를 검사한다.
• 예제 생략

isExtensible()

• 객체에 새로운 프로퍼티를 추가할 수 있는지 여부를 반환합니다.
• preventExtensions() 라는 메소드를 사용하여 해당 객체에 새로운 프로퍼티를 사용할 수 없도록 할 수 있다.
• 예제(자주 사용하진 않지만)

var day = new Date(); // Date 객체를 생성함.
// 객체 day에 새로운 프로퍼티를 추가할 수 있는지 검사함.
console.log(Object.isExtensible(day)); // true

// 해당 객체에 새로운 프로퍼티를 추가할 수 없도록 설정함.
var myDay = Object.preventExtensions(day);
console.log(Object.isExtensible(day));     // false

toString()

• 이 메소드를 호출한 객체의 값을 문자열로 반환한다.

var arr = [10, "문자열", true]; // 배열
var bool = false;               // 불리언
function func() { return 0; }   // 함수
arr.toString();  // 10,문자열,true
bool.toString(); // false
func.toString(); // 함수의 소스 코드가 전부 문자열로 반환됨.

valueOf()

• 특정 객체의 원시 타입(primitive type)으로 값을 반환한다.
• 자바스크립트에서는 원시타입의 값이 기대되는 곳에 객체가 사용되면, 내부적으로 이 메소드를 호출하여 처리한다.

function func(n) {
    this.number = n;
}

myFunc = new func(4);
console.log(myFunc + 5); // 1번째 : [object Object]5

func.prototype.valueOf = function() { // valueOf() 메소드를 정의함.
    return this.number;
}

console.log(myFunc + 5); // 2번째 : 9

전역객체와 래퍼객체

전역객체

• 전역 객체란 자바스크립트에 미리 정의된 객체로 전역 프로퍼티나 전역 함수를 담는 공간의 역할을 한다.
• 전역 객체 그 자체는 전역 범위(global scope)에서 this 연산자를 통해 접근할 수 있다.
• 자바스크립트에서 모든 객체는 전역 객체의 프로퍼티가 된다.
• 웹 브라우저가 새로운 페이지를 로드(load)하면, 자바스크립트는 새로운 전역 개체를 만들고 해당 프로퍼티들을 초기화한다.
• 래퍼객체들

var str = "문자열";           // 문자열 리터럴 생성
var strObj = new String(str); // 문자열 객체 생성
str.length;                   // 리터럴 값은 내부적으로 래퍼 객체를 생성한 후에 length 프로퍼티를 참조함.
str == strObj;                // 동등 연산자는 리터럴 값과 해당 래퍼 객체를 동일하게 봄.
str === strObj;               // 일치 연산자는 리터럴 값과 해당 래퍼 객체를 구별함.
typeof str;                   // string 타입
typeof strObj;                // object 타입

표준객체

• 자바스크립트에서 표준 객체(standard object)는 다른 객체의 기초가 되는 핵심적인 객체이다.
• 자주 사용되는 대표적인 자바스크립트 표준 객체는 다음과 같다.
  1. Number 객체
  2. Math 객체
  3. Date 객체
  4. String 객체
  5. Array 객체