>웹 프론트엔드 >JS 튜토리얼 >JavaScript_기본지식으로 객체에 대한 심층적인 이해

JavaScript_기본지식으로 객체에 대한 심층적인 이해

WBOY
WBOY원래의
2016-05-16 15:56:471123검색

JavaScript는 객체지향 프로그래밍(OOP) 언어입니다. 프로그래밍 언어는 객체 지향이라고 할 수 있으며 개발자에게 네 가지 기본 기능을 제공합니다.

  • 캡슐화 - 데이터, 메소드, 객체 등 관련 정보를 저장합니다.
  • 집계 - 한 개체를 다른 개체 안에 저장
  • 상속 - 일부 속성과 메서드에 대해 다른 클래스(또는 클래스)에 의존하는 클래스의 능력
  • 다형성 - 다양한 방식으로 작동하는 함수 또는 메소드 작성

객체는 속성으로 구성됩니다. 속성에 함수가 포함되어 있으면 객체의 메서드로 간주되고, 그렇지 않으면 속성으로 간주됩니다.
개체 속성:

객체의 속성은 세 가지 기본 데이터 유형 중 하나일 수도 있고 다른 객체와 같은 추상 데이터 유형일 수도 있습니다. 개체 속성은 일반적으로 개체의 메서드에서 내부적으로 사용되는 변수이지만 전역적으로 사용되며 페이지 전체에서 표시되는 변수일 수도 있습니다.

속성을 추가하는 구문은 다음과 같습니다.

objectName.objectProperty = propertyValue;

예:

다음은 파일 개체의 "제목" 속성을 사용하여 문서 제목을 가져오는 방법을 보여주는 간단한 예입니다.

var str = document.title;


객체 메서드:

메서드는 객체에게 어떤 일을 하라고 지시합니다. 함수 명령문이 독립적인 단위이고 메서드가 객체에 첨부되어 이 키워드를 통해 참조할 수 있다는 점을 제외하면 함수와 메서드 사이에는 거의 차이가 없습니다.

메소드는 객체의 화면 콘텐츠 표시부터 로컬 속성 및 매개변수 집합에 대한 복잡한 수학적 연산 수행에 이르기까지 모든 작업에 유용할 수 있습니다.
예:

다음은 문서 개체의 write() 메서드를 사용하여 문서의 내용을 작성하는 방법을 보여주는 간단한 예입니다.

document.write("This is test");


사용자 정의 개체:

모든 사용자 정의 개체와 내장 개체를 개체의 자손이라고 합니다.
새 운영자:

new 연산자는 객체의 인스턴스를 만드는 데 사용됩니다. 객체를 생성하려면 new 연산자 뒤에 생성자 메서드가 옵니다.

다음 예에서는 생성자 메서드 Object(), Array() 및 Date()가 있습니다. 이러한 생성자는 내장된 JavaScript 함수입니다.

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");


객체() 생성자:

생성자는 객체를 생성하고 초기화하는 데 사용되는 함수입니다. JavaScript는 객체를 생성하기 위해 Object()라는 특수 생성자를 제공합니다. Object() 구문의 반환 값은 변수에 할당됩니다.

변수에는 새 개체에 대한 참조가 포함되어 있습니다. 이 객체에 할당된 속성은 불변이며 var 키워드를 사용하여 정의되지 않습니다.
예시 1:

이 예에서는 객체를 생성하는 방법을 보여줍니다.

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object();  // Create the object
  book.subject = "Perl"; // Assign properties to the object
  book.author = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
  document.write("Book name is : " + book.subject + "<br>");
  document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>


예시 2:

이 예제에서는 객체와 사용자 정의 함수를 생성하는 방법을 보여줍니다. 여기서 this 키워드는 함수에 전달된 개체를 참조하는 데 사용됩니다.

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
  this.title = title; 
  this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>


객체 정의 방법:

이전 예에서는 생성자가 객체를 생성하고 속성을 할당하는 방법을 보여줍니다. 그러나 객체 정의를 완료하려면 할당 방법을 사용해야 합니다.
예:

다음은 개체에 함수를 추가하는 방법을 보여주는 간단한 예입니다.

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  this.price = amount; 
}

function book(title, author){
  this.title = title; 
  this.author = author;
  this.addPrice = addPrice; // Assign that method as property.
}

</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  myBook.addPrice(100);
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
  document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>


키워드 포함:

with 키워드는 객체의 속성이나 메소드를 참조하는 약칭으로 사용됩니다.

매개변수로 지정된 개체는 다음 블록이 지속되는 동안 기본 개체가 됩니다. 개체의 속성과 메서드는 명명되지 않은 개체에서 찾을 수 있습니다.
문법

with (object){
  properties used without the object name and dot
}

예:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  with(this){
    price = amount; 
  }
}
function book(title, author){
  this.title = title; 
  this.author = author;
  this.price = 0;
  this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  myBook.addPrice(100);
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
  document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.