결과적으로는 오랫동안 읽어본 결과 대략적으로 이해가 되었습니다. 자세히 살펴보니 아무것도 이해가 안되는 것 같습니다...
이 글은 에 대한 참고자료입니다. 가이드 5판>>7, 8, 9장에서도
자바스크립트의 객체지향 기술을 원서의 구조(객체/배열->함수-)에 맞춰 최선을 다해 설명하겠습니다. ->class/constructor/Prototype) 잘 모르는 부분은 참고용으로 원문의 영어 문장을 첨부하겠습니다.
설명이 없으면 모든 영어 문장(프로그램 제외) 본문) 기사에 나오는 내용은 <>에서 인용되었습니다.------------ --------- -------
객체와 배열
객체란 무엇입니까? 유닛 내부에서 객체가 형성됩니다. JavaScript에서
객체는 "키-값" 쌍의 모음입니다(객체는 명명된 값의 모음입니다. 이러한 명명된 값은 일반적으로
객체의 속성으로 참조됩니다.--섹션 3.5)
"이름"은 문자열 유형만 가능하고 다른 유형은 사용할 수 없으며 속성 유형은
모든(숫자)입니다. /string/other 객체. .) new Object()를 사용하여 빈 객체를 만들거나 간단히 "{}"를 사용하여
빈 객체를 만들 수 있습니다.
varemptyObject1 = {}; 🎜>var emptyObject2 = new Object( ); //빈 객체 생성
var person = {"name":"sdcyst",
"age":18,
"sex":"male" }; //초기 값을 포함하는 객체 생성 person
alert(person.name) //sdcyst
alert(person["age"]) //18
또한 위의 예에서 볼 수 있듯이 개체의 속성에 액세스하려면 개체 이름과 "." 뒤에 속성 이름을 사용하거나 "[]" 연산자를 사용하여 얻을 수 있습니다. 이때 [] 안의 속성 이름은 반드시 인용되어야 합니다. 이는 객체의 인덱스가 모두 문자열 형식이기 때문입니다. 객체를 생성한 후 속성의 개수를 지정할 수 있습니다.
var person = {};
person.name = "sdcyst";
person[" age"] = 18>alert(person.name "__" person.age); _person = {name:"balala","age":23}; //Object를 구성할 때 속성의 이름은 따옴표(name) 없이 표시할 수 있습니다.
//그러나 여전히 문자열 유형입니다. 액세스할 때 []
alert(_person["name"] " __" person.age); 내에 따옴표가 필요합니다.
alert(_person[name]); var person = {};
person.name = "sdcyst";
person[" age"] = 18>alert(person.name "__" person.age); >var _person = {name:"balala","age":23}; //객체 사용 시 속성 이름은 따옴표(name) 없이 표시할 수 있지만
// 여전히 문자열 유형입니다. []
alert(_person["name"] " __" person.age); //balala__23
alert(_person[name]); //정의되지 않음
"." 연산자를 통해 객체의 속성을 얻으려면 속성의 이름을 알아야 합니다. 일반적으로 객체를 얻는 데는 "[]" 연산자가 더 강력합니다.
[]에 일부 표현식을 넣어 속성 값을 가져올 수 있습니다.
예를 들어 루프 제어문에서 사용할 수 있지만 "." 연산자에는 이러한 유연성이 없습니다. .
코드 복사
코드는 다음과 같습니다.
namestring = ""의 속성 이름 for(var i =0; inamestring = name["name" (i 1)]
alert(namestring)
삭제 연산자 객체에서 속성을 삭제하고 "in" 연산자를 사용하여 속성이 존재하는지 확인할 수 있습니다.
코드 복사
코드는 다음과 같습니다.
var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"}
var namestring = " ";
for(var props in name) { //name 객체의 속성 이름을 반복합니다.
namestring = name[props];
}
alert(namestring); //NAME1NAME2NAME3NAME4
delete name.name1; //name1 속성 삭제
delete name["name3"]; //name3 속성 삭제
namestring = ""
for(var props in name); / 이름 객체의 속성 이름을 반복합니다.
namestring = name[props];
alert(namestring); //NAME2NAME4
alert("name1" in name); //false
alert("name4" in name); //true
객체의 속성이 순서가 아니라는 점에 유의해야 합니다.
객체의 속성
각 JavaScript 객체에는 생성자 속성이 있습니다. 이 속성은 객체가 초기화될 때 생성자에 해당합니다.
var date = new Date()
alert(date.constructor); >alert(date.constructor == "Date"); / /false
alert(date.constructor == Date); //true
Array
이미 언급한 바 있습니다. 객체는 순서가 지정되지 않은 데이터의 컬렉션인 반면, 배열의 데이터(요소)는 인덱스(0부터 시작)로 액세스됩니다.
배열의 데이터는 모든 데이터 유형이 될 수 있습니다. 배열 자체는 여전히 객체이지만 배열의 많은 특성으로 인해 일반적으로
이는 대부분의 JavaScript 프로그래밍에서 객체와 배열을 별도의 유형으로 처리할 수 있는
유용하고 합리적인 단순화입니다.
그러나 진실을 알아야 합니다. 배열은 추가 기능이 있는
얇은 레이어를 가진 객체일 뿐입니다. typeof 연산자를 사용하면 이를 확인할 수 있습니다.
문자열 "object"를 반환합니다. --section7.5)
"[]" 연산자를 사용하여 배열을 만들거나 Array() 생성자를 사용하여 새 배열을 만들 수 있습니다.
Js 코드
var array2 = new Array(); //빈 배열 생성
array1 = [1,"s",[3,4], {"name1" :"NAME1"}]; //
alert(array1[2][1]); //4 배열의 배열 요소에 액세스합니다.
alert(array1[3].name1) / /NAME1은 object in array
alert(array1[8]); //정의되지 않음
array2 = [,,]; //값이 없고 쉼표만 채워진 경우 해당 인덱스의 요소는 정의되지 않습니다.
alert(array2.length); //3
alert(array2[1]); //정의되지 않음
var array1 = []; //빈 배열 만들기
var array2 = new Array (); //빈 배열 만들기
array1 = [1,"s",[3,4],{"name1":"NAME1"}] //
alert(array1[2][ 1]); //4 배열의 배열 요소에 액세스
alert(array1[3].name1); //NAME1 배열의 객체에 액세스
alert(array1[8]);
array2 = [ ,,]; //숫자값은 없고 쉼표만 있는 경우 해당 인덱스의 요소는 정의되지 않습니다.
alert(array2.length) //3
alert(array2[ 1]); //정의되지 않음
new Array()를 사용하여 배열을 생성할 때 기본 크기, 현재 정의되지 않은 값을 지정할 수 있으며, 하지만, 자바스크립트의
으로 인해 배열의 길이도 임의로 변경될 수 있고, 배열의 내용도 임의로 변경될 수 있으므로 초기화된 길이는 실제로는 그렇지 않습니다. 배열의 경우 인덱스가 최대 길이를 초과하면 할당이 배열의 길이를 변경하고 할당이 없는 인덱스에 정의되지 않은 값을 할당합니다.
아래 예를 참조하세요. 🎜>
Js 코드
코드 복사
array[100] = "100번째"; 배열의 길이를 변경하고 인덱스 10-99에 해당하는 값을 정의되지 않은
alert(array .length) //101
alert(array[87]); >var array = new Array(10);
alert(array.length); //10
alert(array[4]); //정의되지 않음
array[100] = "100번째"; /이 작업은 배열의 길이를 변경하고 인덱스 10-99에 해당하는 값을 정의되지 않은
alert(array .length) //101
alert(array[87]); 정의되지 않음
삭제 연산자를 사용하여 배열 요소를 삭제할 수 있습니다. 이 삭제는 해당 위치의 배열 요소만 정의되지 않음으로 설정하고 배열 길이는 변경되지 않습니다.
이미 배열의 길이를 사용했습니다. 길이 속성은 읽기/쓰기 속성이므로
배열의 길이 속성을 변경하여 배열의 길이를 임의로 변경할 수 있습니다. 배열의 길이보다 작은 값이면 원래 배열의 길이 길이-1보다 큰 인덱스를 가진 값은 삭제됩니다. 길이
의 값이 원래 배열의 길이보다 크면 그 사이의 값은 정의되지 않음으로 설정됩니다.
Js 코드
var array = new Array("n1","n2","n3"," n4","n5") //5개 요소의 배열
var astring = "" ;
for(var i=0; i
astring = array[i]
alert(astring);
delete array[3]; //배열 요소의 값 삭제
alert(array.length "_" array[3]) //5_undefine
array.length = 3; /배열 길이 줄이기
alert(array[3]); //정의되지 않음
array.length = 8 / /배열 길이 확장
alert(array[4]); /undefine
var array = new Array("n1","n2","n3","n4","n5") / /5개 요소의 배열
var astring = ""; for(var i=0; iastring = array[i]
}
alert(astring) //n1n2n3n4n5
delete array[3]; //배열 요소의 값 삭제
alert(array.length "_" array[3]) //5_undefine
array.length = 3; 배열의
alert(array[3]); //정의되지 않음
array.length = 8; //배열의 길이 확장
alert(array[4]) //정의되지 않음 >
Join/reverse 등 다른 배열 방식에 대해서는 여기서는 하나하나 예시를 하지 않겠습니다.
위의 설명을 통해 우리는 이미 의 속성 값을 알고 있습니다. 속성명(문자열형)을 통해 객체를 얻고, 인덱스
(정수형 0~~2**32-1)을 통해 배열의 요소를 얻습니다. 이므로 객체 속성의 작업은
Js 코드
array["po"] = "props1"
alert(array.length ) ; //2
//배열의 경우 array[0]은 array["0"]과 동일한 효과를 갖습니다. (? 확실하지 않습니다. 테스트 중에는 그렇습니다.)
alert(array[0] "_ " array["1"] "_" array.po);//no1_no2_props1
함수
다들 자바스크립트 함수를 많이 작성하셨을 거라 생각해서 여기서는 간단하게 설명하겠습니다.
Create 함수를 소개하겠습니다.
var f = function(x) {......}
위 두 형식 모두 다음을 생성할 수 있습니다. f() 함수라는 이름의 파일이지만 후자의 형태는 익명 함수를 생성할 수 있습니다
함수 정의 시 매개변수를 설정할 수 있습니다. 함수에 전달되는 매개변수의 개수가 충분하지 않은 경우 가장 왼쪽부터 순서대로 해당됩니다. 나머지는 정의되지 않은 상태로 할당됩니다.
함수에 정의된 매개변수 수보다 많은 매개변수가 있는 경우 추가 매개변수는 무시됩니다.
alert(s1 "_" s2 "_" s3 );
}
myprint(); //undefine_undefine_undefed
myprint("string1","string2"); >myprint("string1","string2","string3", "string4"); //string1_string2_string3
function myprint(s1,s2,s3) {
alert(s1 "_" s2 "_" s3 );
}
myprint(); // undefine_undefine
myprint("string1","string2"); //string1_string2_undefine
myprint("string1","string2","string3", "string4"); //string1_string2_string3
따라서 정의된 함수의 경우 호출자가 모든 매개변수를 전달할 것으로 기대할 수 없습니다. 사용해야 하는 매개변수는 함수 본문에서 확인해야 합니다. 🎜> (!연산자 사용) 또는 기본값으로 설정 값은 매개변수와 함께 연산되어
Js 코드
코드 복사
코드는 다음과 같습니다.
function myprint(s1,person) {
var defaultperson = { //기본 사람 개체
"name":"name1",
"age":18,
" sex":"female"
};
if(!s1) { //s1은 비워둘 수 없습니다
alert("s1은 입력해야 합니다!");
return false;
}
person = person || defaultperson; //사람 객체 매개변수 허용
alert(s1 "_" person.name ":" person.age ":" person.sex);
myprint(); //s1을 입력해야 합니다!
myprint("s1") //s1_name1:18:female
myprint("s1",{"name":"sdcyst ", "age":23,"sex":"male"}); //s1_sdcyst:23:male
function myprint(s1,person) {
var defaultperson = { //기본 사람 개체
" name":"name1",
"age":18,
"sex":"female"
}
if(!s1) { //s1은 허용되지 않습니다. 비어 있음
Alert("s1을 입력해야 합니다!");
return false
}
person = person || defaultperson; //alert(s1 "_" person.name ":" person.sex);
myprint() //s1을 입력해야 합니다.
myprint("s1"); /s1_name1:18 :female
myprint("s1",{"name":"sdcyst","age":23,"sex":"male"}) //s1_sdcyst:23:male
함수의 인수 속성
각 함수 본문에는 Arguments 객체를 나타내는 인수 식별자가 있습니다. Arguments 객체는 Array(배열) 객체와
매우 유사합니다. 예 길이 속성은 해당 값에 액세스하려면 "[]" 연산자를 사용하여 인덱스를 사용하여 매개변수 값에 액세스합니다. 그러나 이 둘은 완전히 다릅니다.
표면적으로만 유사점만 있습니다(예: , Arguments 객체 속성의 길이를 수정해도 길이는 변경되지 않습니다.
Js 코드
alert(arguments.length) alert(arguments[0]);
}
myargs( ); //0 --- 정의되지 않음
myargs("1",[1,2]); //2 --- 1
function myargs() {
alert(arguments.length);
alert(arguments[0] );
}
myargs(); //0 --- 정의되지 않음
myargs("1",[1,2]) //2 -- - 1 Arguments 객체에는 호출 수신자 속성이 있으며, 이를 사용하여 익명 함수의 내부 재귀 호출을 구현할 수 있습니다.
코드 복사
function(x) { if (x <= 1) return 1 ;
return x *args.callee(x-1);
} (섹션 8.2)
메서드--메서드
메서드는 함수라는 것을 알고 있습니다. 모든 객체는 0개 이상의 속성을 포함하며, 속성은 어떤 유형이든 가능합니다. 물론 객체도 포함됩니다. 따라서 이 때 객체에 함수를 넣을 수 있습니다. 함수는 객체의 메소드가 됩니다. 앞으로 이 메소드를 사용하려면
Js 코드
코드 복사
코드는 다음과 같습니다.
f0(); //f0은 obj의 메서드일 뿐이며 객체를 통해서만 호출할 수 있습니다. var obj = {f0:function(){alert("f0");}}; //객체에 메서드가 포함되어 있습니다.
function f1() {alert("f1");}
obj.f1 = f1 ; //객체에 메서드 추가
obj.f0( ); //f0 f0은 obj
obj.f1()의 메서드입니다. //f1 f1은 obj
f1()의 메서드입니다. //f1 f1도 함수이며 f0(); //f0은 obj의 메소드일 뿐이며 객체를 통해서만 호출할 수 있습니다.
메소드 호출에는 객체 지원이 필요하므로 객체의 속성을 가져오는 방법은 무엇입니까? 우리는 이미 this!this 키워드에 익숙합니다. JavaScript 메소드
에서 이를 사용하여 메소드 호출자(객체)에 대한 참조를 가져오고 이를 통해 메소드 호출자
의 다양한 속성을 얻을 수 있습니다.
Js 코드
코드 복사
코드는 다음과 같습니다
var obj = {"name":"NAME","sex":"female"};
obj.print = function() { //객체에 메서드 추가
alert (this .name "_" this["sex"]);
obj.print(); //NAME_female
obj.sex = "남성"; ); //NAME_male
var obj = {"name":"NAME","sex":"female"}
obj.print = function() { //객체에 메서드 추가
alert (this .name "_" this["sex"]);
obj.print(); //NAME_female
obj.sex = "남성"; ); //NAME_male
객체 지향적인 예를 들어보겠습니다.
Js 코드
코드 복사 코드는 다음과 같습니다. var person = {name:"defaultname", setName:function(s){
this.name = s ; },
"printName":function(){
alert(this.name)
}}
person.printName() //defaultname
person.setName ("newName" );
person.printName(); //newName
var person = {name:"defaultname",
setName:function(s){
this.name = s;
} ,
"printName":function(){
alert(this.name);
}}
person.printName() //기본 이름
person.setName( "newName") ;
person.printName(); //newName
위의 예에서는 person.name=..을 사용하여 여기서 person의 이름 속성을 직접 변경할 수 있습니다.
person 속성을 변경하는 또 다른 방법은 두 개의 매개변수(하나는 person이고 다른 하나는 name 값)를 받는 함수를 정의하는 것입니다.
changeName(person, "newName"). 어떤 방법이 더 낫나요? 확실히 예제의 방법이 더 생생하고 직관적이며
객체에 좀 더 중점을 두는 것 같습니다. 다시 잠시 말씀드리지만, 메소드 자체는 함수이지만 메소드의 사용이 더 제한됩니다. 다음 페이지에서 함수가 언급되면
에 언급된 내용도 메소드에 적용되지만 그 반대는 아닙니다.
함수의 프로토타입 속성
각 함수에는 객체지향 자바스크립트의 핵심 기반이 되는 프로토타입(프로토타입) 속성이 포함되어 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
