본문 바로가기

프론트엔드 공부/javscript

객체선언,객체생성자함수

    //객체 선언하기1

    {
      document.write("*** 35. 객체선언(생성자함수-key값x)***<br>");
      const ob1 = new Object();
      ob1[0] = 100;
      ob1[1] = 200;
      ob1[2] = "javascript";
      document.write(ob1[0], "<br>");
      document.write(ob1[1], "<br>");
      document.write(ob1[2], "<br><br>");
    }

    //객체 선언하기2 (key, value)
    {
      document.write("*** 36. 객체선언(생성자함수-key&value)***<br>");
      const ob2 = new Object();
      ob2.a = 100;
      ob2.b = 200;
      ob2.c = "javascript";
      document.write(ob2.a, "<br>");
      document.write(ob2.b, "<br>");
      document.write(ob2.c, "<br><br>");
    }
    
    //객체 선언하기3 (key, value)
    // {
    //   document.write("*** 37. 객체선언***<br>");

    //   const ob3 = new Object();
    //   ob3.a = 100;
    //   ob3.b = 200;
    //   ob3.c = "javascript";
    //   document.write(ob3.a, "<br>");
    //   document.write(ob3.b, "<br>");
    //   document.write(ob3.c, "<br><br>");
    // }
    
    //객체 선언하기4 (key, value) //이게 파생되서 jsx ajax 나오고함
    {
      document.write("*** 38. 객체선언(변수에 key,value할당)***<br>");
      const ob4 = {
        a: 100,
        b: 200,
        c: 300
      }
      document.write(ob4.a, "<br>");
      document.write(ob4.b, "<br>");
      document.write(ob4.c, "<br><br>");
    }
    
    //객체 선언하기5 (key, value) //이방법도 많이씀 
    {
      document.write("*** 39. 객체선언(배열내 객체)***<br>");
      const ob5 = [{
        a: 100,
        b: 200
      }, {
        c: "javascript"
      }];
      document.write(ob5[0].a, "<br>");
      document.write(ob5[0].b, "<br>");
      document.write(ob5[1].c, "<br><br>");
    }
    //객체 선언하기6 (key, value)
    {
      document.write("*** 40. 객체선언(객체내 배열)***<br>");
      const ob6 = {
        a: 100,
        b: [200, 300],
        c: "javascript"
      };
      document.write(ob6.a, "<br>");
      document.write(ob6.b[0], "<br><br>");
    }
    //객체(객체 속에 변수)
    {
      document.write("*** 41. 객체(객체내 변수-객체분해할당)***<br>");
      const a = 100;
      const b = 200;
      const c = "javascript";
      const ob7 = {
        a,
        b,
        c
      }; //const ob7 ={a,b,c} //객체분해할당
      document.write(ob7.a, "<br>");
      document.write(ob7.b, "<br>");
      document.write(ob7.c, "<br><br>");
    }
    //객체(객체 속에 함수) - 변수쓰니까 편해서 만들어짐 => 객체생성자함수를 만들자까지가게됨
    {
      document.write("*** 42. 객체(객체내 함수)***<br>");
      const ob8 = {
        a: 100,
        b: [200, 300],
        c: "javascript",
        d: function () {
          document.write("자바스크립트 실행<br>")
        },
        e: function () {
          document.write(this.c + "가 실행 되었습니다~<br>")
        }
      }
      document.write(ob8.a, "<br>");
      document.write(ob8.b, "<br>");
      document.write(ob8.c, "<br>");
      ob8.d();
      ob8.e();
      document.write("<br>");
    }
    //객체생성자함수 (객체 안에 함수가 길어지면 복잡하니 객체생성자함수만들자~)
    //객체를 함수를 만들어서 실행시켜주자
    {
      function ob9(elem) {
        document.write(`ob9 의 매개변수 ${elem}실행되었습니다`)
      }
      document.write("*** 43. 객체생성자함수***<br>");
      // ob9(); //원래 우리가 아는함수
      //const result1 = new ob9() ; //<<인스턴스 생성해서 변수안에 넣어줌 
      //객체생성자 개념을 그대로도입const result1 = new Object() ;
      new ob9('aaa');
      document.write("<br><br>")
    }
    //객체 생성자 함수(매개변수):재활용하기 위해 매개변수 사용하기시작  //객체생성자에서는 보통 인자라고 부름
    {
      function ob10(str) {
        document.write(str);
      }
      document.write("*** 44. 객체생성자함수***<br>");
      const result1 = new ob10("ob10이 실행되었습니다<br><br>");
      // new ob10("ob10이 실행되었습니다<br><br>");
    }

'프론트엔드 공부 > javscript' 카테고리의 다른 글

객체불러오기(변수,forin,map)  (0) 2021.05.06
객체구조분해할당  (0) 2021.05.06
배열메서드 find(), filter() 차이  (0) 2021.05.06
array.every(function);array.some(function);  (0) 2021.04.29
array.includes  (0) 2021.04.29