> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 프로그래밍의 객체 개념에 대한 심층 분석_기본 지식

자바스크립트 프로그래밍의 객체 개념에 대한 심층 분석_기본 지식

WBOY
풀어 주다: 2016-05-16 15:35:41
원래의
1192명이 탐색했습니다.

문자열, 숫자, 배열, 함수 등 JavaScript의 모든 것은 객체입니다.
또한 JavaScript는 사용자 정의 개체를 허용합니다.
모든 것은 객체이다
JavaScript는 문자열, 날짜, 배열 등과 같은 여러 내장 객체를 제공합니다. 객체는 속성과 메소드를 가진 특별한 데이터 유형입니다.

  • 부울 유형은 객체일 수 있습니다
  • 숫자 유형은 객체일 수 있습니다
  • 문자열도 객체가 될 수 있습니다
  • 날짜는 객체입니다
  • 수학과 정규 표현식도 객체입니다
  • 배열은 객체입니다
  • 함수도 객체가 될 수 있습니다

자바스크립트 객체

객체는 특별한 종류의 데이터일 뿐입니다. 객체에는 속성과 메서드가 있습니다.
객체 속성에 액세스
속성은 객체와 관련된 값입니다.
객체 속성에 액세스하는 구문은 다음과 같습니다.

objectName.propertyName
로그인 후 복사


이 예에서는 String 객체의 length 속성을 사용하여 문자열의 길이를 얻습니다.

var message="Hello World!";
var x=message.length;
로그인 후 복사


위 코드가 실행되면 x 값은 다음과 같습니다.

12
로그인 후 복사

객체에 액세스하는 방법
메소드는 객체에 대해 수행할 수 있는 작업입니다.
다음 구문을 사용하여 메서드를 호출할 수 있습니다.

objectName.methodName()
로그인 후 복사


이 예에서는 String 객체의 toUpperCase() 메서드를 사용하여 텍스트를 대문자로 변환합니다.

var message="Hello world!";
var x=message.toUpperCase();
로그인 후 복사


위 코드가 실행되면 x 값은 다음과 같습니다.

HELLO WORLD!
로그인 후 복사

자바스크립트 객체 생성
JavaScript를 사용하면 자신만의 개체를 정의하고 만들 수 있습니다.
새 개체를 만드는 방법에는 두 가지가 있습니다.

  1. 객체 인스턴스 정의 및 생성
  2. 함수를 사용하여 객체를 정의한 후 새 객체 인스턴스를 생성하세요

직접 인스턴스 만들기
이 예에서는 객체의 새 인스턴스를 만들고 여기에 네 가지 속성을 추가합니다.
예시

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
로그인 후 복사


대체 구문(객체 리터럴 사용):
예시

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
로그인 후 복사


객체 생성자 사용
이 예에서는 함수를 사용하여 객체를 구성합니다.
예시

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
로그인 후 복사

JavaScript에서 이는 일반적으로 실행 중인 함수 자체를 가리키거나 함수가 속한 개체(런타임)를 가리킵니다.
JavaScript 객체 인스턴스 생성
객체 생성자가 있으면 다음과 같이 새 객체 인스턴스를 생성할 수 있습니다.

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
로그인 후 복사

JavaScript 객체에 속성 추가
객체에 값을 할당하여 기존 객체에 새 속성을 추가할 수 있습니다.
personObj가 이미 존재한다고 가정하면 여기에 이름, 성, 나이, 눈색 등 새로운 속성을 추가할 수 있습니다.

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;
로그인 후 복사


위 코드가 실행되면 x 값은 다음과 같습니다.

John
로그인 후 복사

JavaScript 객체에 메소드 추가
메소드는 객체에 첨부된 함수에 지나지 않습니다.
생성자 함수 내에서 객체 메서드를 정의합니다.

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

로그인 후 복사

changeName() 함수 이름의 값은 사람의 성 속성에 할당됩니다.
이제 시도해 볼 수 있습니다.

myMother.changeName("Doe");
로그인 후 복사

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿