English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
대상 부분
Object 타입
Object는 비정렬 집합으로, 어떤 타입의 대상도 저장할 수 있으며, 모든 다른 대상은 이 대상을 상속합니다.
Object 타입을 생성하는 방법은 두 가지가 있습니다. 하나는 new 연산자를 사용하고, 다른 하나는 레이터언 표기법입니다.
1. new 연산자를 사용하여 Object를 생성:
var obj = new Object();//대문자를 주의하세요, Object()를 직접적으로 쓸 수도 있습니다.
주의하세요, new Object() 문법을 통해 새 대상을 생성하는 것과 obj = {} 문법은 동일합니다.
2. 직접적인 문법으로 생성:
var obj = {
name : 'trigkit4',
age : 21
};//분号을 추가하는 것이 좋습니다.
Object 대상을 레이터언 언어로 선언할 때, Object() 생성자 함수를 호출하지 않습니다(FF 제외).
Object.prototype 대상
모든 생성자 함수는 prototype 속성을 가지고 있으며, 원형 대상을 가리킵니다.
Object.prototype.print = function(){ console.log(this);};
var obj = new Object();
obj.print(); // Object
인스턴스 obj는 직접 Object.prototype의 속성과 메서드를 상속합니다
1.대상은 특별한 데이터입니다. 대상은 속성과 메서드를 가지고 있습니다. JavaScript는 객체 지향 언어입니다만, JavaScript는 클래스를 사용하지 않습니다. JavaScript는 [prototype][1], 대신 클래스에 기반한 것입니다.
2.속성: 특정 대상에 속한 변수입니다. 메서드: 특정 대상만이 호출할 수 있는 함수입니다.
3.js 대상은 속성과 메서드의 집합입니다. 메서드는 대상의 구성원인 함수입니다. 속성은 값이나 값을 포함하는 집합(배열이나 대상의 형태)으로, 대상의 구성원입니다.
4.js 대상은 구조자 함수에 기반한 것으로, 구조자 함수를 사용하여 새 대상을 생성할 때, 새 대상을 인스턴스화한 것이라고 할 수 있습니다. 속성은 구조자 함수 내의 변수입니다.
구조자 함수를 통해 인스턴스화된 대상:
cat = new Animal();
Javascript는 대상(object)에 기반한 언어입니다.-기반의 언어이며, 만나는 모든 것이 대상으로 대체됩니다. 그러나, 그것은 진정한 객체 지향 프로그래밍(OOP) 언어가 아니기 때문에, 그 문법에는 class(클래스)가 없습니다.
<script type="text/javascript">
//객체는 이름/값 쌍의 집합
var browser = { //객체는 괄호로 둘러싸여 있습니다
name:"Firefox",
kernel:"Gecko"
};
</script>
//점호(.), 또는 '[]'를 사용하여 객체의 속성에 접근할 수 있습니다
browser.name //"Firefox"
browser["kernel"] //"Gecko"
객체는 속성의 집합으로, 각 속성은 '이름'/값 쌍으로 구성된 JS는 특별한 객체인 배열을 정의했습니다. 이는 번호가 있는 값의 정렬된 집합입니다.
JS는 특별한 객체인 함수를 정의했습니다. 함수는 관련된 실행 가능한 코드를 가진 객체이며, 함수를 호출하여 코드를 실행하고 계산 결과를 반환합니다.
JS에는 클래스가 없지만, 새로운 이름으로 '프로토타입 객체'를 가지고 있습니다. 따라서 '클래스 == 프로토타입 객체'입니다. 자세한 내용은: JavaScript 클래스의 작성법(1)
2. 클래스(프로토타입 객체)와 객체(인스턴스)의 차이와 관계
1.클래스(프로토타입 객체)는 추상적이고 개념적이며, 한 분류를 대표합니다.
2.객체는 구체적이고 실제적이며, 특정한 물체를 대표합니다.
3.클래스(프로토타입 객체)는 객체 인스턴스의 템플릿이며, 객체 인스턴스는 클래스의 하나입니다.
일반적인 오해는 숫자의 레터럴 값이 객체가 아니라는 것입니다. 이는 JavaScript 파서의 오류 때문입니다. 그것은 점 연산자를 부호 점 레터럴 값의 일부로 해석하려고 시도합니다.
숫자의 레터럴 값이 객체처럼 보이게 만들 수 있는 많은 변환 방법이 있습니다.
2..toString(); // 두 번째 점호는 정상적으로 해석됩니다
2 .toString(); // 점號 앞의 공백을 주의하세요
(2).toString(); // 2먼저 계산됩니다
속성 제거
속성을 제거하는 유일한 방법은 delete 연산자를 사용하는 것입니다; 속성을 undefined 또는 null로 설정하면 속성을 정말로 제거하지 않고, 단지 속성과 값의 연결을 제거합니다.
JavaScript의 세 가지 주요面向对象 특징
封装: 내부 구현을 고려하지 않고, 기능 사용만 고려합니다.
thừa kế: 기존 객체에서 새로운 객체를 상속받습니다.
다형성: 다형성이란, 하나의 참조가 다른 상황에서 여러 가지 상태를 가리키는 것입니다.
1.封装
똑같은 분류의 공통적인 특성(속성과 행동 포함)을 하나의 클래스에 모아서 사용하기 쉽게 합니다. 예를 들어, 인간이라는 것은 다음과 같은 방식으로封装할 수 있습니다:
인간{
연령(속성 하나)
키(속성 두 번째)
성별(속성 세 번째)
일을하기(행동의 하나)
걸어다니기(행동의 두 번째)
말하기(행동의 세 번째)
}
封装의 장점:
내부 데이터의 통합성을 보호합니다;
객체의 재구성을 더 쉽게 만들어 줍니다;
모듈 간의 결합을 약화하여 객체의 재사용성을 높입니다;
이름 공간 충돌을 피하는 데 도움이 됩니다;
아래의 예제를 보세요:
<script type="text/javascript">
var boy = {}; //빈 객체를 생성합니다
boy.name = "미소";//프로토타입 객체의 속성에 따라 할당
boy.age = 12;
빈 객체를 생성합니다
girl.name = "홍길동";
girl.age = 10;
</script>
이것은 가장 간단한 포장입니다. 두 개의 속성을 하나의 객체에 포장합니다. 하지만, 이렇게 작성된 코드는 두 가지 단점이 있습니다. 하나는 여러 인스턴스를 생성할 때 코드가 매우 복잡해지는 것과, 인스턴스와 프로토타입 간의 연결을 알 수 없는 것입니다.
생성자 함수 모드
프로토타입 객체에서 인스턴스를 생성하는 문제를 해결하기 위해 Javascript는 생성자 함수(Constructor) 모드를 제공합니다.
"생성자 함수"는 일반 함수이지만, 내부에서 this 변수를 사용합니다. 생성자 함수에 new 연산자를 사용하면 인스턴스를 생성할 수 있으며, this 변수는 인스턴스 객체에 바인딩됩니다.
예를 들어, boy와 girl의 프로토타입 객체는 다음과 같이 작성될 수 있습니다:
<script type="text/javascript">
function Person(name,age){
this.name = name;
this.age = age;
}
</script>
이제 인스턴스 객체를 생성할 수 있습니다.
<script type="text/javascript">
var boy = new Person("미소",12);
var girl = new Person("홍길동",10);
alert(boy.name); //미소
alert(boy.age); //12
</script>
이 때 boy와 girl은 자동으로 constructor 속성을 가지게 되며, 이 속성은 그들의 생성자 함수를 가리킵니다.
alert(boy.constructor == Person); //true
alert(girl.constructor); //전체 생성자 함수 코드를 출력해보세요
Prototype 모드는 Javascript에서, 각 생성자 함수가 prototype 속성을 가지며, 이 속성은 다른 객체를 가리킵니다. 이 객체의 모든 속성과 메서드는 생성자 함수의 인스턴스가 상속받습니다.
이렇게 되면, 불변하는 속성과 메서드를 prototype 객체에 직접 정의할 수 있습니다.
<script type="text/javascript">
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.type = "인간";
Person.prototype.eat = function(){
alert("밥을 먹다");
}
</script>
그런 다음, 인스턴스를 생성합니다:
<script type="text/javascript">
var boy = new Person("미소","12");
var girl = new Person("홍길동","10");
alert(boy.type);//인간
boy.eat();//식사
</script>
이 때 모든 인스턴스의 type 속성과 eat() 메서드는 실제로는 동일한 메모리 주소를 가리키며, prototype 객체를 향합니다. 따라서 실행 효율성을 높입니다.
alert(boy.eat == girl.eat); //true
프로토타입 속성은 내장 속성으로, 객체가 확장하는 생성자 함수를 지정합니다.
다음 코드는 Animal 생성자 함수에 새로운 속성 size를 추가하며, 이 새로운 속성은 cat 객체의 프로토타입 속성입니다. 프로토타입 속성을 사용하여 Animal 생성자 함수를 확장한 모든 객체가 size 속성에 접근할 수 있습니다.
cat = new Animal("feline","meow", "walk/run");
cat.prototype.size = "fat";
이 경우, 모든 Animal 객체의 size 속성은 "fat"입니다. 프로토타입은 Object의 새로운 인스턴스로, 여전히 객체이므로 이 객체에 새로운 속성을 추가할 수 있습니다. style이 자바스크립트의 객체와 마찬가지로, style에 새로운 속성을 추가할 수도 있습니다.
<script type="text/javascript">
/*Person 클래스를 정의합니다*/
function Person(_name,_age,_salary){
//Person 클래스의 공개 속성, 클래스의 공개 속성 정의 방식은: "this.속성명"
this.Name=_name;
//Person 클래스의 비공개 속성, 클래스의 비공개 속성 정의 방식은: "var 속성명"
var Age=_age;
var Salary=_salary;
//Person 클래스의 공개 메서드(특권 메서드)를 정의하는 방법, 클래스의 공개 메서드 정의 방식
은: "this.functionName=function(){.....}"
this.Show=function(){
alert("Age="+Age+"\t"+"Salary="+Salary);//공개 메서드에서 클래스의 비공개 속성에 접근은 허용됩니다.
}
</script>
객체가 특정 속성을 찾을 때, 먼저 자신의 속성을 순회 검색하며, 없다면 [[Prototype]] 참조 객체를 계속 검색합니다. 그리고 그것도 없다면 [[Prototype]].[[Prototype]] 참조 객체를 계속 검색합니다. 이렇게 계속해서 [[Prototype]].….[[Prototype]]가 undefined가 되면(오브젝트의 [[Prototype]]는 undefined입니다)까지 검색합니다.
간단히 말해, [[Prototype]]을 통해 다른 객체에 대한 참조를 저장하고, 이 참조를 통해 상위 객체의 속성을 탐색하는 것이며, 이것이 원형 체인입니다.
null 객체
js에서 변수에 null 값을 할당하는 이유는 다음과 같습니다:
빈 포인터를 할당하여 이 변수가 객체를 저장할 예정인 것을 이해하기 쉽게 하고, 디버깅을 쉽게 합니다.
전역 window 객체
JavaScript의 어떤 전역 함수나 변수도 window의 속성입니다.
self 객체는 window 객체와 완전히 동일하며, self는 일반적으로 현재 창에서 확인하는 데 사용됩니다.
window의 주요 객체는 다음과 같습니다:
JavaScript document 객체
JavaScript frames 객체
JavaScript history 객체
JavaScript location 객체
JavaScript navigator 객체
JavaScript screen 객체
几家常用方法
valueof() 메서드는 지정된 객체의 원시 값을 반환합니다.
split() 메서드는 문자열을 문자열 배열로 분할하고 이 배열을 반환합니다.
indexOf() 메서드는 문자열에서 지정된 문자열 값이 처음으로 등장하는 위치를 반환합니다.
substring() 메서드는 문자열의 두 지정된 인덱스 사이의 문자를 추출합니다.
substr() 메서드는 문자열에서 startPos 위치에서 시작하는 지정된 길이의 문자열을 추출합니다.
join() 메서드는 배열의 모든 요소를 하나의 문자열로 합칩니다.
arrayObject.join(분隔자)
reverse() 메서드는 배열의 요소 순서를 역정렬합니다.
slice() 메서드는 기존 배열에서 선택된 요소를 반환합니다.
대량의 속성을 포함하는 프로세스를 정의하는 데 사용되는 객체 문법은 다음과 같습니다:
대량의 속성을 포함하는 프로세스를 정의하는 데 사용되는 객체 문법은 다음과 같습니다:
<script type="text/javascript">
var company = {
name : "Microsoft",
ages : 39,
employees : 99000,
CEO : "Nadella"
};
</script>
여기서 주의해야 할 것은 속성과 속성 값이冒号(:)로 구분되며, 여러 속성은 콤마(,)로 구분되어야 합니다. 객체 문법은 이 객체의 속성에 function을 작성하여 메서드를 정의할 수 있으며, 이는 익명 함수입니다. 이를 호출하려면 그 메서드 이름()만 작성하면 됩니다.
<script type="text/javascript">
var dog = {
name:"husky",
age:2,
run:function(){
return "123";
}
}
alert(dog.run());//입력이 dog.run이면, 그 뒤의 function 부분의 코드가弹出됩니다
</script>
기본 값 타입 패킹
js는 다섯 가지 기본 값 타입: number, string, Boolean, null, undefined가 있습니다. null과 undefined를 제외한 나머지 세 가지는 기본 패킹 객체라는 것을 가지고 있습니다. Number(), String(), Boolean() 내장 생성자를 사용하여 패킹 객체를 생성할 수 있습니다.
var num = new Number(10);
console.log(typeof num);//object
Object() 메서드
Object() // 공백 객체 반환
Object(undefined) // 공백 객체 반환
Object(null) // 공백 객체 반환
Object(1) // new Number(1)
Object('foo') // new String('foo')와 동일
Object(true) // new Boolean(true)와 동일
Object([]) // 원 배열 반환
Object({}) // 원 객체 반환
Object(function(){}) // 원 함수 반환
배열 부분
1.Array 객체
Array 객체: 어떤 데이터 타입의 배열을 생성할 수 있는 지원을 제공합니다.
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
정의: var arr = [2,3,45,6]; var arr = new Array(2,4,5,7)
두 가지는 정의에 어떤 차이도 없습니다. [],의 성능이 높은 것은 코드가 짧기 때문입니다.
배열과 객체 리터럴을 사용하다: var aTest = []; 배열을 정의할 때, 배열 리터럴을 사용하는 것이 좋은 선택입니다; 유사하게, 객체 리터럴도 공간을 절약할 수 있습니다. 다음 두 줄은 같지만, 객체 리터럴을 사용하는 것이 더 간결합니다:
var oTest = new Object; //사용을 피하는 것이 좋습니다
var oTest = { }; //최고의 선택, 또는 var 0Test = [ ];
배열을 순회하기 위해 최적의 성능을 달성하기 위해 전통적인 for 루프를 사용하는 것이 좋습니다.
var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
console.log(list[i]);
}
위의 코드에서는 l = list.length를 통해 배열의 길이를 캐싱하는 처리가 있습니다.
Array 생성자
Array의 생성자는 매개변수를 처리하는 방식이 약간 모호하기 때문에, 항상 배열의 레이터널 문법을 사용하는 것이 좋습니다. - [] - 를 사용하여 배열을 생성합니다.
따라서 아래의 코드는 매우 혼란스럽게 보일 것입니다:
new Array(3, 4, 5); // 결과: [3, 4, 5]
new Array(3) // 결과: [], 이 배열의 길이는 3
신규 배열을 생성하는 데 배열 생성자를 사용하는 것을 피하는 것이 좋습니다. 대신 배열의 레이터널 문법을 사용하는 것이 좋습니다. 이는 더 짧고 간결하며 코드의 가독성을 높입니다.
Array 배열의 속성
Array 배열의3개의 속성: length 속성, prototype 속성, constructor 속성
1.length 속성
Length 속성은 배열의 길이를 나타내며, 배열의 요소 개수를 의미합니다. 배열의 인덱스는 항상 0부터 시작하기 때문에, 배열의 상한과 하한은 0과 length입니다.-1다른 많은 언어와 달리, JavaScript 배열의 length 속성은 변경 가능하며 이 점을 특별히 주의해야 합니다.
2.prototype 속성
객체 타입 원형의 참조를 반환합니다. prototype 속성은 object가 공통적으로 가지고 있습니다.
Array 배열 객체에 대해 prototype 속성의 사용을 설명하기 위해 다음 예제를 들어보겠습니다.
배열 객체에 배열 내 최대 요소 값을 반환하는 메서드를 추가합니다. 이를 위해 함수를 선언하고 Array.prototype에 추가하여 사용합니다.
function array_max()
{
var i,max=this[0];
for(i=1;i<this.length;i++)
{
if(max<this[i])
max=this[i];
}
return max;
}
Array.prototype.max=array_max;
var x=new Array(1,2,3,4,5,6);
var y=x.max();
이 코드가 실행되면, y가 배열 x의 최대 값을 저장하거나 다른 말로6。
3.constructor 속성
객체를 생성하는 함수. 설명: constructor 속성은 모든 prototype를 가진 객체의 구성원입니다. 이는 Global과 Math 객체를 제외한 모든 JScript 내장 객체를 포함합니다. constructor 속성은 특정 객체 인스턴스를 생성하는 함수에 대한 참조를 저장합니다.
예를 들어:
x = new String("Hi");
if(x.constructor==String) //조건이 참이면 처리합니다.
//또는
function MyFunc{
//함수체.
}
y=new MyFunc;
if(y.constructor==MyFunc)//조건이 참이면 처리합니다.
배열에 대해:
y = new Array();
Array 객체 메서드
sort() 메서드
문법
arrayObject.sort(sortby)
sortby 선택 사항. 정렬 순서를 정의합니다. 함수여야 합니다.
var arr = [11,2,28,4,5,1});
console.log(arr.sort());//return [1, 11, 2, 28, 4, 5]
이곳의11、28정렬되지 않았다면? 이는 매개변수 없는 sort가 문자 코드의 순서에 따라 정렬된다는 것입니다.
그렇다면, 배열 요소를 작은 숫자부터 큰 숫자로 정렬하려면 어떻게 해야 합니까? 아래 코드를 보세요:
var arr = [11,2,28,4,5,1});
console.log(arr.sort(function(a,b){
return a-b;//return [1, 2, 4, 5, 11, 28]
});
다른 기준에 따라 정렬하려면, 비교 함수를 제공해야 합니다. 이 함수는 두 값을 비교하고, 이 두 값을 상대적인 순서를 설명하는 숫자를 반환해야 합니다. 비교 함수는 두 개의 매개변수 a와 b를 가지고 있어야 하며, 반환 값은 다음과 같습니다:
a가 b보다 작으면, 정렬된 배열에서 a가 b보다 앞에 있어야 하며, 0보다 작은 값을 반환합니다.
a가 b와 같으면, 0을 반환합니다.
a가 b보다 크면, 0보다 큰 값을 반환합니다.
이것이 본 문서의 모든 내용입니다. 여러분의 학습에 도움이 되길 바랍니다. 또한, 나대호 튜토리얼에 많은 지원을 부탁드립니다.