JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


자바스크립트 객체 생성자


예시

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

대문자로 된 생성자 함수의 이름을 지정하는 것이 좋습니다.


객체 유형(청사진)(클래스)

이전 장의 예제는 제한적입니다. 단일 개체만 생성합니다.

때때로 우리 는 동일한 "유형"의 많은 객체를 생성하기 위해 " 청사진 "이 필요합니다.

"객체 유형"을 만드는 방법은 객체 생성자 함수 를 사용하는 것 입니다.

위의 예에서 function Person()는 객체 생성자 함수입니다.

동일한 유형의 객체는 다음 new키워드로 생성자 함수를 호출하여 생성됩니다.

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");


키워드 _

JavaScript에서 호출되는 것은 this코드를 "소유하는" 객체입니다.

의 값은 this객체에서 사용될 때 객체 자체입니다.

생성자에서 함수 this에는 값이 없습니다. 새 개체를 대체합니다. 의 값은 this새 객체가 생성될 때 새 객체가 됩니다.

this변수가 아니라는 점에 유의하십시오 . 키워드입니다. 의 값은 변경할 수 없습니다 this.


객체에 속성 추가

기존 객체에 새 속성을 추가하는 것은 쉽습니다.

예시

myFather.nationality = "English";

속성이 myFather에 추가됩니다. 아니 myMother. (다른 사람에게 이의를 제기하지 않음).


객체에 메소드 추가

기존 개체에 새 메서드를 추가하는 것은 쉽습니다.

예시

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

메소드가 myFather에 추가됩니다. 아니 myMother. (다른 사람에게 이의를 제기하지 않음).


생성자에 속성 추가

기존 객체에 새 속성을 추가하는 것과 같은 방식으로 객체 생성자에 새 속성을 추가할 수 없습니다.

예시

Person.nationality = "English";

생성자에 새 속성을 추가하려면 생성자 함수에 추가해야 합니다.

예시

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

이런 식으로 객체 속성은 기본값을 가질 수 있습니다.


생성자에 메서드 추가

생성자 함수는 메서드를 정의할 수도 있습니다.

예시

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

기존 개체에 새 메서드를 추가하는 것과 같은 방식으로 개체 생성자에 새 메서드를 추가할 수 없습니다.

객체 생성자에 메소드를 추가하는 것은 생성자 함수 안에서 이루어져야 합니다:

예시

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

changeName() 함수는 이름 값을 사람의 lastName 속성에 할당합니다.

이제 다음을 시도할 수 있습니다.

myMother.changeName("Doe");

JavaScript는 이것을 myMother"대체"하여 귀하가 말하는 사람을 알고 있습니다 .


내장 JavaScript 생성자

JavaScript에는 기본 객체에 대한 기본 제공 생성자가 있습니다.

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

Math()개체가 목록에 없습니다 . Math전역 개체입니다. 키워드 는 new에서 사용할 수 없습니다 Math.


알고 계셨나요?

위에서 볼 수 있듯이 JavaScript에는 기본 데이터 유형 String, Number및 의 객체 버전이 있습니다 Boolean. 하지만 복잡한 객체를 만들 이유가 없습니다. 기본 값이 훨씬 빠릅니다.

""대신 문자열 리터럴 을 사용하십시오 new String().

50대신 숫자 리터럴 을 사용하십시오 new Number().

true / false대신 부울 리터럴 을 사용하십시오 new Boolean().

{}대신 객체 리터럴 을 사용하십시오 new Object().

[]대신 배열 리터럴 을 사용하십시오 new Array().

/()/대신 패턴 리터럴 을 사용하십시오 new RegExp().

() {}대신 함수 표현식 을 사용하십시오 new Function().

예시

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

문자열 객체

일반적으로 문자열은 기본 형식으로 생성됩니다. firstName = "John"

new그러나 다음 키워드 를 사용하여 문자열을 객체로 만들 수도 있습니다 .
firstName = new String("John")

JS Strings 장에서 문자열을 객체로 생성해서는 안 되는 이유를 알아보세요 .


숫자 개체

일반적으로 숫자는 기본 형식으로 생성됩니다. x = 30

new그러나 다음 키워드 를 사용하여 숫자를 개체로 만들 수도 있습니다 .
x = new Number(30)

JS Numbers 장에서 숫자가 객체로 생성되어서는 안 되는 이유를 알아보세요 .


부울 객체

일반적으로 부울은 기본 형식으로 생성됩니다. x = false

new그러나 부울은 키워드 를 사용하여 객체로 생성할 수도 있습니다 .
x = new Boolean(false)

JS Booleans 장에서 부울을 객체로 생성해서는 안 되는 이유를 알아보세요 .