[추천] 자 바스 크 립 트 대상 기술 기초 강좌

16031 단어
결 과 는 요, 한참 을 보고 대충 알 게 되 었 습 니 다. 곰 곰 이 생각해 보 니 아무것도 모 르 는 것 같 습 니 다............................................................여러분 이 참고 하 시기 바 랍 니 다. 만약 설명 을 하지 않 는 다 면, 글 에 나타 난 모든 영문 문장 (프로그램 체 제외) 은 모두 < > 에서 인용 한 것 입 니 다."이름 - 속성" 의 조합 을 하나의 단원 에 넣 으 면 하나의 대상 이 됩 니 다. 우 리 는 자 바스 크 립 트 의 대상 이 바로 "키 - 값" 의 집합 (An object is a collection of named values. These named values are usually refered to as properties of the object. -- Section 3.5) 이 라 고 이해 할 수 있 습 니 다. "이름" 은 string 형식 일 뿐 다른 유형 이 아 닙 니 다.속성의 유형 은 임의의 (숫자 / 문자열 / 다른 대상..) 입 니 다. new Object () 로 빈 대상 을 만 들 수도 있 고, 간단하게 "{}" 로 빈 대상 을 만 들 수도 있 습 니 다. 이 두 가지 역할 은 같 습 니 다.
 
  
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 부터) 을 통 해 접근 합 니 다.
배열 의 데 이 터 는 모든 데이터 형식 일 수 있 습 니 다. 배열 자 체 는 여전히 대상 이지 만 배열 의 많은 특성 으로 인해 일반적으로 배열 과 대상 을 구별 합 니 다.
따로따로 취급 하기 (이 책 을 통 해 개체 와 배열 은 종종 뚜렷 한 데이터 형식 으로 처 리 됩 니 다.
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". --section7.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 입 니 다. 나중에 값 을 부여 할 수 있 습 니 다. 단,
javascript 의 배열 길 이 는 임의로 바 꿀 수 있 으 며, 배열 의 내용 도 임의로 바 꿀 수 있 기 때문에 이 초기 화 된 길 이 는 실제 적 으로
배열 에 대해 서 는 아무런 구속력 이 없습니다. 한 배열 에 대해 서 는 최대 길이 의 색인 할당 을 초과 하면 배열 의 길 이 를 바 꾸 고 할당 되 지 않 습 니 다.
다음 예 를 보십시오.
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 - 1 의 값 은 모두 삭 제 됩 니 다. length
원본 배열 의 길이 보다 큰 값 은 undefined 로 설정 합 니 다.
JS 코드
 
  
var array = new Array("n1","n2","n3","n4","n5"); //
var astring = "";
for(var i=0; iastring += 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; iastring += 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

함수.
javascript 함 수 는 모두 가 많이 썼 다 고 믿 기 때문에 우 리 는 간단하게 소개 할 뿐이다.
생 성 함수:
 
  
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)

방법
방법 은 바로 함수 입 니 다. 우 리 는 모든 대상 이 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 =.. 으로 person 의 name 속성 을 직접 바 꿀 수 있 습 니 다. 여기 서 우 리 는 방금 언급 한 내용 을 보 여주 기 위해 서 입 니 다.
또 다른 person 속성 을 바 꾸 는 방법 은 하나의 function 를 정의 하고 두 개의 인 자 를 받 는 것 입 니 다. 하 나 는 person 이 고 하 나 는 name 의 값 입 니 다. 이렇게 보 입 니 다.
changeName (person, "newName"). 어떤 방법 이 좋 을까요?분명히 예 중의 방법 은 더욱 형상 적 이 고 직관 적 이 며 약간의 지향 이 있 는 것 같다
대상 의 그림자.
다시 한 번 말씀 드 리 지만 방법 (Method) 자체 가 함수 (function) 입 니 다. 방법의 사용 이 더 제한 되 어 있 을 뿐 입 니 다. 뒤의 지면 에서 함수 가 언급 되면...
언급 한 내용 도 방법 에 똑 같이 적용 되 고, 그렇지 않 으 면 다 그렇지 는 않다.
함수 의 prototype 속성
모든 함수 에는 prototype (원형) 속성 이 포함 되 어 있 습 니 다. 이 속성 은 자바 script 이 대상 을 대상 으로 하 는 핵심 기 초 를 구성 합 니 다. 나중에 자세히 토론 하 겠 습 니 다.

좋은 웹페이지 즐겨찾기