예제가 포함된 객체 지향 JavaScript(OOJS) 튜토리얼

JavaScript의 OOPS 개념은 무엇입니까?

실제 상황을 시뮬레이션하기에는 변수나 배열만으로는 충분하지 않은 경우가 많습니다. JavaScript를 사용하면 실제 개체처럼 작동하는 개체를 만들 수 있습니다. 학생이나 집은 그 자체로 많은 독특한 특성을 지닌 물건이 될 수 있습니다. 프로그래밍을 더 쉽게 만들기 위해 개체에 대한 속성과 메서드를 만들 수 있습니다. 개체가 학생인 경우 이름, 성, ID 등과 같은 속성과 calcu와 같은 메서드가 있습니다.lateRank,changeAddress 등. 개체가 집인 경우 방 수, 페인트 색상, 위치 등과 같은 속성과 계산Area,changeOwner 등과 같은 메서드를 갖습니다.

개체를 만드는 방법

다음과 같은 객체를 생성할 수 있습니다.

var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
line of code
}

OR

var objName= {property1:value1, property2:value2, method1: function()

{ lines of code} };

개체 속성 및 메서드에 액세스

다음과 같이 객체의 속성에 액세스할 수 있습니다.

objectname.propertyname;

다음과 같이 객체의 메소드에 액세스할 수 있습니다.

objectname.methodname();

다음 예제를 직접 시도해 보세요.

<html>
<head>
	<title>Objects!!!</title>
	<script type="text/javascript">
      var student = new Object();
      student.fName = "John";
      student.lName = "Smith";
      student.id = 5;
      student.markE = 76;
      student.markM = 99;
      student.markS = 87;
      student.calculateAverage = function()
      {
      	return (student.markE + student.markM + student.markS)/3;
      };
      student.displayDetails = function()
      {
        document.write("Student Id: " + student.id + "<br />");
        document.write("Name: " + student.fName + " " + student.lName + "<br />");
        var avg = student.calculateAverage();
        document.write("Average Marks: " + avg);
      };
		student.displayDetails();
	</script>
</head>
<body>
</body>
</html>

OOPS 생성자

그러나 이런 종류의 개체를 만드는 것은 그다지 유용하지 않습니다. 왜냐하면 여기서도 학생들마다 다른 개체를 만들어야 하기 때문입니다. 여기에 객체 생성자가 그림으로 나타납니다. 개체 생성자는 개별 인스턴스의 요구 사항을 충족하기 위해 재사용할 수 있는 개체 유형을 생성하는 데 도움이 됩니다.

다음 예제를 직접 시도해 보세요.

<html>
<head>
	<script type="text/javascript">
		function Student(first, last, id, english, maths, science)
        {
          this.fName = first;
          this.lName = last;
          this.id = id;
          this.markE = english;
          this.markM = maths;
          this.markS = science;
          this.calculateAverage = function()
          {
         	 return (this.markE + this.markM + this.markS)/3;
          }
		  this.displayDetails = function()
		  {
            document.write("Student Id: " + this.id + "<br />");
            document.write("Name: " + this.fName + " " + this.lName + "<br />");
            var avg = this.calculateAverage();
            document.write("Average Marks: " + avg + "<br /><br />");
		  }
		}
        var st1 = new Student("John", "Smith", 15, 85, 79, 90);
        var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
        var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
        var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
        st1.displayDetails();
        st2.displayDetails();
        st3.displayDetails();
        st4.displayDetails();
	</script>
</head>
<body>
</body>
</html>

객체의 속성을 통해 반복

구문 :

for (variablename in objectname)

{

lines of code to be executed

}

for/in a 고리 일반적으로 객체의 속성을 반복하는 데 사용됩니다. 원하는 이름을 지정할 수 있습니다. 변수, 그러나 개체의 이름은 반복해야 하는 이미 존재하는 개체의 이름과 동일해야 합니다.

다음 예제를 직접 시도해 보세요.

<html>
<head>
	<script type="text/javascript">
		var employee={first:"John", last:"Doe", department:"Accounts"};
        var details = "";
        document.write("<b>Using for/in loops </b><br />");
        for (var x in employee)
        {
          details = x + ": " + employee[x];
          document.write(details + "<br />");
        }
	</script>
</head>
<body>
</body>
</html>