차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:js_object_constructors [2021/05/03 12:12]
emblim98
+++ wiki:javascript:javascript_note:js_object_constructors [2023/01/13 18:44] (현재)
@@ 줄 79: / 줄 79: @@
 ====Example====
 <code javascript>
+// Constructor function for Person objects
+function Person(first, last, age, eye) {
+  this.firstName = first;
+  this.lastName = last;
+  this.age = age;
+  this.eyeColor = eye;
+}
+// Create 2 Person objects
+let myFather = new Person("John", "Doe", 50, "blue");
+let myMother = new Person("Sally", "Rally", 48, "green");
+// Add nationality to first object
+myFather.nationality = "English";
+// Display nationality
+document.getElementById("demo").innerHTML =
+  "My father is " + myFather.nationality;   // My father is English
 </code>
 \\
@@ 줄 90: / 줄 107: @@
 ====Example====
 <code javascript>
+// Constructor function for Person Objects
+function Person(first, last, age, eye) {
+  this.firstName = first;
+  this.lastName = last;
+  this.age = age;
+  this.eyeColor = eye;
+}
+// Create 2 Person objects
+let myFather = new Person("John", "Doe", 50, "blue");
+let myMother = new Person("Sally", "Field", 48, "green");
+// Add a name method to first object
+myFather.name = function () {
+  return this.firstName + " " + this.lastName;
+};
+// Display full Name
+document.getElementById("demo").innerHTML =
+  "My father is " + myFather.name();    // My father is John Doe
 </code>
 \\
@@ 줄 99: / 줄 135: @@
 ====Example====
 <code javascript>
+// Constructor function for Person objects
+function Person(first, last, age, eye) {
+  this.firstName = first;
+  this.lastName = last;
+  this.age = age;
+  this.eyeColor = eye;
+}
+// You can NOT add a new property to a constructor function
+Person.nationality = "English";
+// Create 2 Person objects
+let myFather = new Person("John", "Doe", 50, "blue");
+let myMother = new Person("Sally", "Rally", 48, "green");
+// Display nationality
+document.getElementById("demo").innerHTML =
+  "The nationality of my Father is " + myFather.nationality;
+    // The nationality of my Father is undefined
 </code>
 \\
@@ 줄 105: / 줄 159: @@
 \\
 ====Example====
-<code javasscript>
+<code javascript>
+// Constructor function for Person objects
+function Person(first, last, age, eye) {
+  this.firstName = first;
+  this.lastName = last;
+  this.age = age;
+  this.eyeColor = eye;
+  this.nationality = "English";
+}
+// Create 2 Person objects
+let myFather = new Person("John", "Doe", 50, "blue");
+let myMother = new Person("Sally", "Rally", 48, "green");
+// Display nationality
+document.getElementById("demo").innerHTML =
+  "My father is " + myFather.nationality + ". My mother is " + myMother.nationality;
+   // My father is English. My mother is English
 </code>
 \\
@@ 줄 116: / 줄 186: @@
 ====Example====
 <code javascript>
+// Constructor function for Person Objects
+function Person(first, last, age, eye) {
+  this.firstName = first;
+  this.lastName = last;
+  this.age = age;
+  this.eyeColor = eye;
+  this.name = function () {
+    return this.firstName + " " + this.lastName
+  };
+};
+// Create a Person object
+let myFather = new Person("John", "Doe", 50, "blue");
+// Display full name
+document.getElementById("demo").innerHTML =
+"My father is " + myFather.name();  // My father is John Doe
 </code>
 \\
@@ 줄 125: / 줄 211: @@
 ====Example====
 <code javascript>
+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;
+  };
+}
 </code>
 \\
@@ 줄 132: / 줄 226: @@
 ====Now You Can Try:====
 <code javascript>
+// Constructor function for Person objects
+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;
+  };
+}
+// Create a Person object
+let myMother = new Person("Sally", "Rally", 48, "green");
+// Change last name
+myMother.changeName("Doe");
+// Display last name
+document.getElementById("demo").innerHTML =
+"My mother's last name is " + myMother.lastName;  // My mother's last name is Doe
 </code>
 \\
@@ 줄 144: / 줄 257: @@
 ====Example====
 <code javascript>
+let x1 = new Object();    // A new Object object
+let x2 = new String();    // A new String object
+let x3 = new Number();    // A new Number object
+let x4 = new Boolean();   // A new Boolean object
+let x5 = new Array();     // A new Array object
+let x6 = new RegExp();    // A new RegExp object
+let x7 = new Function();  // A new Function object
+let x8 = new Date();      // A new Date object
+// Display the type of all objects
+document.getElementById("demo").innerHTML =
+  "x1: " + typeof x1 + "<br>" +  // x1: object
+  "x2: " + typeof x2 + "<br>" +  // x2: object
+  "x3: " + typeof x3 + "<br>" +  // x3: object
+  "x4: " + typeof x4 + "<br>" +  // x4: object
+  "x5: " + typeof x5 + "<br>" +  // x5: object
+  "x6: " + typeof x6 + "<br>" +  // x6: object
+  "x7: " + typeof x7 + "<br>" +  // x7: function
+  "x8: " + typeof x8 + "<br>";   // x8: object
 </code>
 \\
+''Math()'' 오브젝트는 목록에 없습니다. ''Math()''은 전역 개체입니다. ''new'' 키워드는 ''Math''에서 사용할 수 없습니다.\\
 =====Did You Know?=====
 위에서 볼 수 있듯이, %%JavaScript%%에는 원시 데이터 타입(primitive data types)인\\
-''String'', ''Number'' 및 ''Boolean''의 객체 버전이 있습니다.\\
+''String'', ''Number'' 및 ''Boolean''의 오브젝트 버전이 있습니다.\\
 그러나 복잡한 오브젝트를 만들 이유가 없습니다. 원시 값(primitive values)이 훨씬 빠릅니다.\\
 \\
@@ 줄 172: / 줄 307: @@
 ====Example====
 <code javascript>
+let x1 = {};      // object
+let x2 = "";      // string
+let x3 = 0;       // number;
+let x4 = false;   // boolean
+let x5 = [];      // object (not array)
+let x6 = /()/;    // object
+let x7 = function () { };    // function
+// Display the type of all
+document.getElementById("demo").innerHTML =
+  "x1: " + typeof x1 + "<br>" +   // x1:object
+  "x2: " + typeof x2 + "<br>" +   // x2:string
+  "x3: " + typeof x3 + "<br>" +   // x3:number
+  "x4: " + typeof x4 + "<br>" +   // x4:boolean
+  "x5: " + typeof x5 + "<br>" +   // x5:object
+  "x6: " + typeof x6 + "<br>" +   // x6:object
+  "x7: " + typeof x7 + "<br>";    // x7: function
 </code>
+\\
+=====String Objects=====
+일반적으로 문자열은 기본 형식(''%%var firstName = "John"%%'')으로 생성됩니다. \\
+\\
+그러나 ''new'' 키워드(''%%var firstName = new String ( "John")%%''를 사용하여 문자열을 오브젝트로 만들 수도 있습니다. \\
+\\
+[[https://www.w3schools.com/js/js_strings.asp|JS Strings]] 챕터에서 문자열이 오브젝트로 생성되지 않아야 하는 이유를 학습하세요.\\
+=====Number Objects=====
+일반적으로 숫자는 기본 형식(''var x = 123'')으로 생성됩니다.\\
+\\
+그러나 ''new'' 키워드(%%var x = new Number (123)%%)를 사용하여 숫자를 오브젝트로 만들 수도 있습니다. \\
+\\
+[[https://www.w3schools.com/js/js_numbers.asp|JS Numbers]] 장에서 숫자가 오브젝트로 생성되지 않아야 하는 이유를 알아보십시오.\\
+=====Boolean Objects=====
+일반적으로 불리언은 기본 형식(var x = false)으로 생성됩니다\\
+\\
+그러나 불리언은 ''new'' 키워드(var x = new Boolean (false))를 사용하여 객체로 만들 수도 있습니다.\\
+\\
+[[https://www.w3schools.com/js/js_object_constructors.asp|JS Booleans]] 챕터에서,\\
+불리언이 오브젝트로 생성되지 않아야 하는 이유를 학습합니다.\\

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구