[권장] 자바스크립트 객체지향 기술 기본 tutorial_js 객체지향

결과적으로는 오랫동안 읽어본 결과 대략적으로 이해가 되었습니다. 자세히 살펴보니 아무것도 이해가 안되는 것 같습니다...
이 글은 에 대한 참고자료입니다. 가이드 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]); //정의되지 않음


"." 연산자를 통해 객체의 속성을 얻으려면 속성의 이름을 알아야 합니다. 일반적으로 객체를 얻는 데는 "[]" 연산자가 더 강력합니다.

[]에 일부 표현식을 넣어 속성 값을 가져올 수 있습니다.
예를 들어 루프 제어문에서 사용할 수 있지만 "." 연산자에는 이러한 유연성이 없습니다. .

코드 복사


코드는 다음과 같습니다.

var name = {"name1":" NAME1", "name2":"NAME2","name3":"NAME3","name4":"NAME4"}; var namestring = ""; for(var props in name) { // 루프 이름 객체 namestring = name[props]; alert(namestring)

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 array1 = []; //빈 배열 생성

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 코드




코드 복사

코드는 다음과 같습니다. var 배열 = new Array(10); alert(array.length); //10 alert(array[4]); //정의되지 않음

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; iastring = 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 코드

코드 복사 코드는 다음과 같습니다. 다음과 같습니다: var array = new Array("no1","no2")

array["po"] = "props1"

alert(array.length ) ; //2
//배열의 경우 array[0]은 array["0"]과 동일한 효과를 갖습니다. (? 확실하지 않습니다. 테스트 중에는 그렇습니다.)
alert(array[0] "_ " array["1"] "_" array.po);//no1_no2_props1



함수

다들 자바스크립트 함수를 많이 작성하셨을 거라 생각해서 여기서는 간단하게 설명하겠습니다.
Create 함수를 소개하겠습니다.

코드 복사 코드는 다음과 같습니다. function f( x) {.....}

var f = function(x) {......}

위 두 형식 모두 다음을 생성할 수 있습니다. f() 함수라는 이름의 파일이지만 후자의 형태는 익명 함수를 생성할 수 있습니다
함수 정의 시 매개변수를 설정할 수 있습니다. 함수에 전달되는 매개변수의 개수가 충분하지 않은 경우 가장 왼쪽부터 순서대로 해당됩니다. 나머지는 정의되지 않은 상태로 할당됩니다.

함수에 정의된 매개변수 수보다 많은 매개변수가 있는 경우 추가 매개변수는 무시됩니다.

코드 복사 코드는 다음과 같습니다. function myprint(s1,s2,s3) {

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 코드

코드 복사 코드는 다음과 같습니다. function myargs() {

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) 1을 반환합니다. return x *args.callee(x -1) } (섹션 8.2)

function(x) {

if (x <= 1) return 1 ;
return x *args.callee(x-1);
} (섹션 8.2)


메서드--메서드
메서드는 함수라는 것을 알고 있습니다. 모든 객체는 0개 이상의 속성을 포함하며, 속성은 어떤 유형이든 가능합니다. 물론 객체도 포함됩니다. 따라서 이 때 객체에 함수를 넣을 수 있습니다. 함수는 객체의 메소드가 됩니다. 앞으로 이 메소드를 사용하려면

Js 코드

코드 복사


코드는 다음과 같습니다.

var obj = {f0:function(){alert("f0") ;}}; //객체에 메서드가 포함되어 있습니다. function f1() {alert("f1" );} obj.f1 = f1; //객체에 메서드 추가 obj.f0(); //f0 f0은 objobj.f1()의 메서드입니다. //f1 f1은 objf1()의 메서드입니다. //f1 f1도 함수입니다. 직접 호출 가능

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"). 어떤 방법이 더 낫나요? 확실히 예제의 방법이 더 생생하고 직관적이며

객체에 좀 더 중점을 두는 것 같습니다. 다시 잠시 말씀드리지만, 메소드 자체는 함수이지만 메소드의 사용이 더 제한됩니다. 다음 페이지에서 함수가 언급되면
에 언급된 내용도 메소드에 적용되지만 그 반대는 아닙니다.

함수의 프로토타입 속성
각 함수에는 객체지향 자바스크립트의 핵심 기반이 되는 프로토타입(프로토타입) 속성이 포함되어 있습니다.