[추천]자 바스 크 립 트 대상 기술 기초 강좌
15130 단어 자바 script대상 을 향 하 다기초 과정
var emptyObject1 = {}; //
var emptyObject2 = new Object(); //
var person = {"name":"sdcyst",
"age":18,
"sex":"male"}; // person
alert(person.name); //sdcyst
alert(person["age"]); //18
위의 예 에서 도 볼 수 있 습 니 다.한 대상 에 접근 하 는 속성 은 대상 이름 으로 간단하게'.'를 추가 한 후에 속성 을 추가 할 수 있 습 니 다."[]"연산 자 를 사용 해서 도 얻 을 수 있 습 니 다.이때[]에 있 는 속성 이름 에 따 옴 표를 붙 여야 합 니 다.이것 은 대상 의 색인 이 모두 문자열 형식 이기 때 문 입 니 다.javasript 대상 의 속성 개 수 는 가 변 적 입 니 다.대상 을 만 든 후에 언제든지 속성 을 부여 할 수 있 습 니 다.
var person = {};
person.name = "sdcyst";
person["age"] = 18;
alert(person.name + "__" + person.age); //sdcyst__18
var _person = {name:"balala","age":23}; // , (name),
// . []
alert(_person["name"] + "__" + person.age); //balala__23
alert(_person[name]); //undefinied
var person = {};
person.name = "sdcyst";
person["age"] = 18;
alert(person.name + "__" + person.age); //sdcyst__18
var _person = {name:"balala","age":23}; // , (name),
// . []
alert(_person["name"] + "__" + person.age); //balala__23
alert(_person[name]); //undefinied
"."연산 자 를 통 해 대상 의 속성 을 얻 을 수 있 습 니 다.속성의 이름 을 알 아야 합 니 다.일반적으로"[]"연산 자 는 대상 속성 을 가 져 오 는 기능 이 더 강 합 니 다.[]에 표현 식 을 넣 어 속성의 값 을 가 져 올 수 있 습 니 다.예 를 들 어 순환 제어 문 에 사용 할 수 있 고"."연산 자 는 이러한 유연성 이 없습니다.
var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) { // name
namestring += name[props];
}
alert(namestring); //NAME1NAME2NAME3NAME4
namestring = "";
for(var i=0; i<4; i++) {
namestring += name["name"+(i+1)];
}
alert(namestring); //NAME1NAME2NAME3NAME4
delete 연산 자 는 대상 의 특정한 속성 을 삭제 하고 특정한 속성 이 존재 하 는 지 판단 하여"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) { // name
namestring += name[props];
}
alert(namestring); //NAME2NAME4
alert("name1" in name); //false
alert("name4" in name); //true
주의 가 필요 합 니 다.대상 의 속성 은 순서 가 없습니다.대상 의 constructor 속성 은 각각 javascript 대상 에 하나의 constructor 속성 이 있 습 니 다.이 속성 은 대상 이 초기 화 될 때의 구조 함수(함수 도 대상)에 대응 합 니 다.
var date = new Date();
alert(date.constructor); //Date
alert(date.constructor == "Date"); //false
alert(date.constructor == Date); //true
배열 은 우리 가 이미 언급 한 바 와 같이 대상 은 무질서 한 데이터 의 집합 이 고 배열 은 질서 있 는 데이터 의 집합 입 니 다.배열 의 데이터(요소)는 색인(0 부터)을 통 해 접근 할 수 있 습 니 다.배열 의 데 이 터 는 모든 데이터 형식 일 수 있 습 니 다.배열 자 체 는 여전히 대상 이지 만 배열 의 많은 특성 으로 인해 배열 과 대상 을 구별 하여 각각 취급 합 니 다(Throughout this book, objects and arrays are often treated as distinct datatypes. This is a useful and reasonable simplification; you can treat objects and arrays as separate types for most of your JavaScript programming.To fully understand the behavior of objects and arrays, however, you have to know the truth: an array is nothing more than an object with a thin layer of extra functionality. You can see this with the typeof operator: applied to an array value,it returns the string"object".--section 7.5).배열 을 만 들 때"[]"연산 자 를 사용 하거나 Array()구조 함수 로 new 를 만 들 수 있 습 니 다.Js 코드
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]); //undefined
array2 = [,,]; // , undefined
alert(array2.length); //3
alert(array2[1]); //undefined
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]); //undefined
array2 = [,,]; // , undefined
alert(array2.length); //3
alert(array2[1]); //undefined
는 new Array()로 배열 을 만 들 때 기본 크기 를 지정 할 수 있 습 니 다.그 값 은 undefined 이 고 나중에 값 을 부여 할 수 있 습 니 다.그러나 자바 script 의 배열 길 이 는 임의로 바 꿀 수 있 기 때문에...또한 배열 의 내용 도 임의로 바 꿀 수 있 기 때문에 이 초기 화 된 길 이 는 실제 배열 에 아무런 구속력 이 없습니다.한 배열 에 대해 서 는 최대 길 이 를 초과 한 색인 할당 값 을 바 꾸 면 배열 의 길 이 를 바 꾸 고 할당 되 지 않 은 색인 에 undefined 를 부여 합 니 다.아래 의 예 를 보 세 요.Js 코드
var array = new Array(10);
alert(array.length); //10
alert(array[4]); //undefined
array[100] = "100th"; // , 10-99 undefined
alert(array.length); //101
alert(array[87]); //undefined
var array = new Array(10);
alert(array.length); //10
alert(array[4]); //undefined
array[100] = "100th"; // , 10-99 undefined
alert(array.length); //101
alert(array[87]); //undefined
는 delete 연산 자 를 사용 하여 배열 의 요 소 를 삭제 할 수 있 습 니 다.이 삭 제 는 배열 이 이 위치 에 있 는 요 소 를 undefined 로 설정 하 는 것 일 뿐 배열 의 길 이 는 변 하지 않 았 습 니 다.우 리 는 배열 의 length 속성 을 사 용 했 습 니 다.length 속성 은 읽 거나 쓸 수 있 는 속성 입 니 다.즉,우 리 는 배열 의 length 속성 을 바 꾸 어 배열 의 길 이 를 임의로 바 꿀 수 있 습 니 다.length 를 배열 의 길이 보다 작은 값 으로 설정 하면 원래 배열 의 색인 이 length-1 보다 큰 값 은 모두 삭 제 됩 니 다.length 의 값 이 원본 배열 의 길이 보다 크 면,이들 사이 의 값 은 undefined.Js 코드
var array = new Array("n1","n2","n3","n4","n5"); //
var astring = "";
for(var i=0; i<array.length; i++) { //
astring += array[i];
}
alert(astring); //n1n2n3n4n5
delete array[3]; //
alert(array.length + "_" + array[3]) //5_undefined
array.length = 3; //
alert(array[3]); //undefined
array.length = 8; //
alert(array[4]); //undefined
var array = new Array("n1","n2","n3","n4","n5"); //
var astring = "";
for(var i=0; i<array.length; i++) { //
astring += array[i];
}
alert(astring); //n1n2n3n4n5
delete array[3]; //
alert(array.length + "_" + array[3]) //5_undefined
array.length = 3; //
alert(array[3]); //undefined
array.length = 8; //
alert(array[4]); //undefined
로 설정 되 어 있 습 니 다.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
함수 자바 script 함 수 는 모두 가 많이 썼 을 것 이 라 고 믿 습 니 다.그래서 저 희 는 간단하게 소개 하 겠 습 니 다.생 성 함수:
function f(x) {........}
var f = function(x) {......}
위의 두 가지 형식 은 모두 f()라 는 함 수 를 만 들 수 있 습 니 다.나중에 한 가지 형식 으로 익명 함수 정 의 를 만 들 수 있 을 때 파 라 메 터 를 설정 할 수 있 습 니 다.함수 에 전 달 된 매개 변수 개수 가 부족 하면 맨 왼쪽 부터 순서대로 대응 하고 나머지 는 undefined 로 값 을 부여 할 수 있 습 니 다.함수 에 전 달 된 매개 변수 가 함수 정의 매개 변수의 개수 보다 많 으 면 더 많은 매개 변 수 는 무 시 됩 니 다.Js 코드
function myprint(s1,s2,s3) {
alert(s1+"_"+s2+"_"+s3);
}
myprint(); //undefined_undefined_undefined
myprint("string1","string2"); //string1_string2_undefined
myprint("string1","string2","string3","string4"); //string1_string2_string3
function myprint(s1,s2,s3) {
alert(s1+"_"+s2+"_"+s3);
}
myprint(); //undefined_undefined_undefined
myprint("string1","string2"); //string1_string2_undefined
myprint("string1","string2","string3","string4"); //string1_string2_string3
따라서 정 의 된 함수 에 대해 서 는 호출 자가 모든 매개 변 수 를 모두 전달 하 기 를 기대 할 수 없습니다.필요 한 매개 변 수 는 함수 에서 검 측 해 야 합 니 다(사용!연산 자),또는 기본 값 을 설정 한 다음 에 같은 매개 변수 로 진행 하거나(||)작업 을 해서 인 자 를 얻 습 니 다.Js 코드
function myprint(s1,person) {
var defaultperson = { // person
"name":"name1",
"age":18,
"sex":"female"
};
if(!s1) { //s1
alert("s1 must be input!");
return false;
}
person = person || defaultperson; // person
alert(s1+"_"+person.name+":"+person.age+":"+person.sex);
};
myprint(); //s1 must be input!
myprint("s1"); //s1_name1:18:female
myprint("s1",{"name":"sdcyst","age":23,"sex":"male"}); //s1_sdcyst:23:male
function myprint(s1,person) {
var defaultperson = { // person
"name":"name1",
"age":18,
"sex":"female"
};
if(!s1) { //s1
alert("s1 must be input!");
return false;
}
person = person || defaultperson; // person
alert(s1+"_"+person.name+":"+person.age+":"+person.sex);
};
myprint(); //s1 must be input!
myprint("s1"); //s1_name1:18:female
myprint("s1",{"name":"sdcyst","age":23,"sex":"male"}); //s1_sdcyst:23:male
함수 의 arguments 속성 은 모든 함수 체 내부 에 arguments 식별 자가 있 습 니 다.이 식별 자 는 arguments 대상 을 대표 합 니 다.arguments 대상 은 Array(배열)대상 과 매우 유사 합 니 다.예 를 들 어 length 속성 이 있 습 니 다.그 값 에 접근 하려 면"[]"연산 자 를 사용 하여 색인 을 이용 하여 매개 변수 값 에 접근 합 니 다.그러나 두 가 지 는 완전히 다른 것 입 니 다.단지 표면적 으로 공통점 이 있 을 뿐 입 니 다.(예 를 들 어 Arguments 대상 의 length 속성 을 수정 하 는 것 은 그 길 이 를 바 꾸 지 않 습 니 다).Js 코드
function myargs() {
alert(arguments.length);
alert(arguments[0]);
}
myargs(); //0 --- undefined
myargs("1",[1,2]); //2 --- 1
function myargs() {
alert(arguments.length);
alert(arguments[0]);
}
myargs(); //0 --- undefined
myargs("1",[1,2]); //2 --- 1 Arguments callee , Arguments . .
Js 코드
function(x) {
if (x <= 1) return 1;
return x * arguments.callee(x-1);
} (section8.2)
function(x) {
if (x <= 1) return 1;
return x * arguments.callee(x-1);
} (section8.2)
Method-방법 은 함수 입 니 다.우 리 는 모든 대상 이 0 개 이상 의 속성 을 포함 하고 있다 는 것 을 알 고 있 습 니 다.속성 은 임의의 유형 일 수 있 습 니 다.물론 대상 도 포함 되 어 있 습 니 다.함수 자체 가 하나의 대상 이기 때문에 우 리 는 하나의 함 수 를 하나의 대상 에 넣 을 수 있 습 니 다.이때 이 함 수 는 대상 의 한 방법 이 되 었 습 니 다.이후 에 이 방법 을 사용 하려 면 이미지 이름 에 대한'.'조작 자 를 이용 하여 이 루어 질 수 있 습 니 다.Js 코드
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 ,
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 키 워드 는 이미 잘 알 고 있 습 니 다.자바 script 의 방법 에서 우 리 는 this 로 방법 호출 자(대상)에 대한 인용 을 얻어 방법 호출 자의 각종 속성 을 얻 을 수 있 습 니 다.Js 코드
var obj = {"name":"NAME","sex":"female"};
obj.print = function() { //
alert(this.name + "_" + this["sex"]);
};
obj.print(); //NAME_female
obj.sex = "male";
obj.print(); //NAME_male
var obj = {"name":"NAME","sex":"female"};
obj.print = function() { //
alert(this.name + "_" + this["sex"]);
};
obj.print(); //NAME_female
obj.sex = "male";
obj.print(); //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(); //defaultname
person.setName("newName");
person.printName(); //newName
는 위의 예 에서person.name=.......................................................................................분명 한 것 은 예 에서 의 방법 이 더욱 형상 적 이 고 직관 적 이 며 마치 대상 을 대상 으로 하 는 그림자 가 있 는 것 같다.다시 한 번 강조 하지만 방법(Method)자체 가 함수(function)일 뿐 방법의 사용 이 더욱 제한 을 받는다.뒤의 지면 에서 함수 가 언급 되면 언급 한 내용 은 방법 에 도 적용 된다.반대로 다 그렇지 는 않 습 니 다.함수 의 prototype 속성 은 모든 함수 에 하나의 prototype(원형)속성 을 포함 하고 있 습 니 다.이 속성 은 자바 script 이 대상 을 대상 으로 하 는 핵심 기 초 를 구성 합 니 다.나중에 자세히 토론 하 겠 습 니 다.이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.