23.04.20 자바스크립트 사용자 정의 객체 / 생성자 함수

객체란 : 프로그램에서 인식할 수 있는 모든 대상, 여러개의 데이터를 하나로 묶어놓은 대상
(=> 회원 객체 > 나이 : 23, 성별 : 여, 사는 곳 : 서울)

document. = 문서객체 모델 (DOM);
window. = 브라우저 객체 모델 (BOM);

직접 개발자가 정의할 수 있는 사용자 정의 객체를 만들기!

 

   객체명 {

   key : value, => 프로퍼티

   key : value, => 프로퍼티

   }

   let book1 = {

   title : "자바스크립트",

   pages : 648

   };

 

   //key의 value 값에 접근하는 방법 2가지

   book1.title

   '자바스크립트'

   

   book1["pages"];

   648

 

   // 새로운 값를 추가하는 방법.

   book1.author = "홍길동";

   // '홍길동'

   book1

   // {title: '자바스크립트', pages: 648, author: '홍길동'}

 

 

 

   let book2 = {}; //먼저 빈 객체만 지정한 후

   undefined

   book2.title = "파이썬"; // 값을 추가해도 됨.

   '파이썬'

   book2.pages = 500;

   500

   book2.author = "홍길동";

   '홍길동'

   book2

   {title: '파이썬', pages: 500, author: '홍길동'} //위에서 추가한 값들이 들어감.

 

 

   //변수 선언 및 할당하는 방법

   let book3 = new Object(); //내장객체 Object : 객체생성의 최상위객체

   undefined

 

   book3.title = "제이쿼리";

   '제이쿼리'

 

   book3.pages = 700;

   700

 

   book3

   {title: '제이쿼리', pages: 700}

 

   delete book3.pages; //  프로퍼티를 삭제

   true

 

   book3.pages = 1000;

   {title: '제이쿼리', pages: 1000}

 

   book3.pages = undefined;

   {title: '제이쿼리', pages: undefined} // key값은 존재하나, value값 삭제

 

 

   //객체의중첩

   let student = {

   name : "Kim",

   score : {

   history : 85,

   science : 94,

   average : function() { //키값의 매칭된 함수 = 메서드(기능)

      return (this.history + this.science) / 2

          }

       } //객체를 한번 더

   }

   콘솔창

   student.score.history;

   85

 

   student.score.average();

   89.5

 

 

   객체의 메서드를 정의하는 2가지 방법 (

   let book3 = {

   title : "python",

   pages : 360,

   buy : function() {

      console.log("이 책을 구입했습니다.");

      }

 };

   let book3 = {

   title : "python",

   pages : 360,

   buy() {

      console.log("이 책을 구입했습니다."); //위와같음

      }

   };

   콘솔창

   book3

   {title: 'python', pages: 360, buy: ƒ}

 

   book3.buy();

   이 책을 구입했습니다.

 

 

   let book4 = {

   title : "Javascript",

   pages : 500,

   author : "Kim",

   done : false,

   finish : function() {

      this.done == false ? console.log("읽는중") : console.log("완독"); //복제해서 사용할 수 있음으로 this 사용

      }

   }

 

   콘솔창

   book4.finish();

   읽는중

 

 

 

   //****** 중요 (변수와 객체의 차이점)

   let number1 = 100;

   undefined

   number1;

   100

   let number2 = number1;

   undefined

   number1;

   100

   number2;

   100

   number2 = 200;

   200

   number1;

   100

   number2;

   200

   // 원시유형 자료 복사

   //변수는 고유한 값을 유지

   let bag1 = {

   color : "blue",

   width : 30,

   height : 50

   };

   undefined

   bag1

   {color: 'blue', width: 30, height: 50}

   let bag2 = bag1;

   undefined

   bag2;

   {color: 'blue', width: 30, height: 50}

   bag2.color = "red";

   'red'

   bag2;

   {color: 'red', width: 30, height: 50}

   bag1;

   {color: 'red', width: 30, height: 50}

   // 원조값도 바뀌게됨

   // => 참조 주소 복사

   // 변수에서 값을 가져오는 것과 객체에서 값을 가져오는것은다르다

 

 

   // 동일한 키값 및 벨류 값을 가지고 있는 프로퍼티 와 메서드 객체를 만약 100개를 만들어야 한ㄷㅏ면? = 복제

   // > 생성자 함수 = 동일한 프로퍼티 및 메서드를 가지고 있는 객체를 만들때 사용할 수 있는 함수 = 붕어빵틀 ,

      붕어빵 : 인스턴스 객체 ( 복제품) : 생성자 함수를 통해서 만들어진 복제된 객체

   // 생성자 함수 정의 방법

   //함수 이름의 첫 글자는 대문자로 시작합니다.

   //반드시 'new' 연산자를 붙여 실행합니다.

 

   //1번

   function Book(매개변수1, 매개변수2, ...) {

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

   this.매개변수2 = 매개변수2;

 

   this.메서드1 : function(){...}

   this.메서드2 : function(){...}

   }

 

   //2번

   const Book(매개변수) = function() {...}

 

 

   //예제

   function Book(title, pages, done) {

   this.title = title;

   this.pages = pages;

   this.done = done;

   this.finish = function() {

      let str = "";

      this.done == false ? str = "읽는중" : str = "완독";

      return str;

      }

   }

   let book1 = new Book("파이썬", 648, false);

   let book2 = new Book("자바스크립트", 360, true);

   document.write(`${book1.title} - ${book1.pages}쪽 - ${book1.finish()} <br/>`)

   document.write(`${book2.title} - ${book2.pages}쪽 - ${book2.finish()}`)

 

 

 

   // 자바스크립트 클래스 활용한 객체 생성방법

   class 클래스명 {

   constructor() {

   프로퍼티1,

   프로퍼티2,

      } //생성자

   메서드1() {}

   메서드2() {}

   }

   class Book2 {

   constructor(title, pages, done) {

      this.title = title;

      this.pages = pages;

      this.done = done;

      }

   finish() {

      let str = "";

      this.done == false ? str = "읽는중" : str = "완독";

      return str;

      }

   }

   let book1 = new Book2("파이썬", 348, false);

   let book2 = new Book2("자바스크립트", 620, true);

   document.write(`${book1.title} - ${book1.pages}쪽 - ${book1.finish()} <br />`)

   document.write(`${book2.title} - ${book2.pages}쪽 - ${book2.finish()} <br />`)