JavaScript 미니멀 입문 튜토리얼(2): 객체 및 함수_javascript 기술

이 기사를 읽으려면 다른 언어로 프로그래밍한 경험이 필요합니다.

JavaScript의 단순 유형은 다음과 같습니다.

1. 숫자
2. 문자열
3.부울(참 및 거짓)
4.널
5.정의되지 않음

다른 모든 유형은 객체입니다(typeof 연산자의 반환 값에 속지 마세요). 예:

1. 기능
2.배열
3. 정규식
4. 객체(객체는 당연히 객체입니다)

객체 기본

JavaScript에서 객체는 속성의 모음입니다(객체는 연관 배열입니다). 각 속성에는 다음이 포함됩니다.

1. 속성 이름은 문자열이어야 합니다.
2. 정의되지 않은 값을 제외한 모든 값이 될 수 있는 속성 값

객체 리터럴에서 객체 생성:

코드 복사 코드는 다음과 같습니다.

//객체 리터럴을 통해 빈 객체 생성 {}
var 비어있는_객체 = {};

객체의 속성 이름 및 속성 값:

코드 복사 코드는 다음과 같습니다.

var Stooge = {
// "first-name"은 속성 이름이고, "Jerome"은 속성 값입니다.
"first-name": "제롬",
// "last-name"은 속성 이름이고, "Howard"는 속성 값입니다.
"성": "하워드"
};

속성 이름이 법적 식별자인 경우 따옴표를 생략할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var 항공편 = {
항공사: "Oceanic",
번호: 815,
출발: {
IATA: "SYD",
시간: "2004-09-22 14:55",
도시: "시드니"
},
도착: {
IATA: "LAX",
시간: "2004-09-23 10:42",
도시: "로스앤젤레스"
}
};

부동산 접근의 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var 소유자 = { 이름: "Name5566" };

소유자.이름; // "이름5566"
소유자["이름"]; // "이름5566"

소유자.작업; // 정의되지 않음
owner.job = "coder"; // 또는 owner["job"] = "coder";

속성 이름이 법적 식별자가 아닌 경우 따옴표로 묶어야 합니다. 존재하지 않는 속성의 값은 정의되지 않습니다. 객체는 값이 아닌 참조로 전달됩니다.

코드 복사 코드는 다음과 같습니다.

var x = {};
var 소유자 = x;
owner.name = "Name5566";
x.이름; // x.이름 === "이름5566"

여기서 x와 소유자는 동일한 개체를 나타냅니다.

객체의 속성은 삭제 연산자를 사용하여 삭제할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

delete obj.x; // 객체 obj의 x 속성을 삭제합니다

물체의 프로토타입

각 개체는 프로토타입 개체에 연결되어 있으며 개체는 프로토타입 개체의 속성을 상속받을 수 있습니다. 객체 리터럴을 통해 객체를 생성하고 그 프로토타입 객체는 Object.prototype 객체입니다(Object.prototype 객체 자체에는 프로토타입 객체가 없습니다). 객체를 생성할 때 객체의 프로토타입 객체를 설정할 수 있습니다(구체적인 설정 방법은 나중에 논의하겠습니다). 객체의 속성을 가져오려고 할 때(수정하지 않고) 해당 속성이 객체에 없으면 JavaScript는 해당 속성이 프로토타입 객체에 없으면 객체의 프로토타입 객체에서 속성을 가져오려고 시도합니다. , 프로토타입 객체에서 프로토타입 객체가 검색되는 방식으로 Object.prototype 프로토타입 객체까지 검색됩니다. 속성을 얻는 것과 비교할 때 객체의 특정 속성을 수정하면 프로토타입 객체에 영향을 미치지 않습니다.

함수 기본

JavaScript에서 함수는 Function.prototype 프로토타입 개체에 연결된 개체이기도 합니다(Function.prototype은 Object.prototype에 연결됨). 함수에는 프로토타입이라는 속성이 있고 해당 값의 유형은 객체입니다. 이 객체에는 속성 생성자가 있으며 생성자의 값은 다음 함수입니다.

코드 복사 코드는 다음과 같습니다.

var f = 함수() {}

typeof f.prototype; // '객체'
typeof f.prototype.constructor; // '함수'

f === f.prototype.constructor; // 참

함수는 객체처럼 함수를 사용할 수 있습니다. 즉, 함수는 변수나 배열에 저장될 수 있고, 매개변수로 함수에 전달될 수 있으며, 함수는 함수 내에서 정의될 수 있습니다. 참고로 함수에는 두 가지 숨겨진 속성이 있습니다:

1. 함수 컨텍스트
2. 기능 코드

함수는 다음과 같이 생성됩니다.

코드 복사 코드는 다음과 같습니다.

var f = 함수 추가(a, b) {
b를 돌려주세요;
}

console.log(f); // 출력 [함수: add]

function 키워드 뒤의 함수 이름은 선택 사항입니다. 우리는 주로 여러 가지 목적으로 함수 이름을 공식화합니다.

1. 재귀 호출의 경우
2. 디버거, 개발 도구 등에서 기능 식별을 위해 사용됩니다

함수 이름이 필요하지 않은 경우가 많습니다. 함수 이름이 없는 함수를 익명 함수라고 합니다. 매개변수 목록은 괄호 안에 표시됩니다. JavaScript에서는 일치하는 실제 매개변수와 형식 매개변수가 필요하지 않습니다. 예:

코드 복사 코드는 다음과 같습니다.

var add = 함수(a, b) {
b를 돌려주세요;
}

add(1, 2, 3); // 실제 매개변수와 형식 매개변수가 일치하지 않습니다

실제 매개변수가 너무 많으면 추가 실제 매개변수는 무시됩니다. 실제 매개변수가 너무 적으면 할당되지 않은 형식 매개변수의 값이 정의되지 않습니다. 함수에는 반환 값이 있어야 합니다. return 문을 통해 반환 값을 지정하지 않으면 함수 반환 값이 정의되지 않습니다.

함수와 함수가 액세스하는 외부 변수는 클로저를 형성합니다. 이것이 JavaScript의 핵심적인 아름다움입니다.

함수 호출

각 함수가 호출되면 두 개의 추가 매개변수를 받게 됩니다.

1.이것
2.인수

이 값은 특정 호출 모드와 관련이 있습니다. JavaScript에는 4가지 호출 모드가 있습니다.

1. 메소드 호출 모드. 객체의 속성이 함수인 경우 이를 메소드라고 합니다. o.m(args)을 통해 메소드가 호출되면 이는 o 객체입니다(이와 o는 호출이 이루어질 때만 바인딩되는 것을 볼 수 있습니다). 예:

코드 복사 코드는 다음과 같습니다.

var obj = {
값: 0,
증분: 함수(v) {
This.value = (typeof v === 'number' ? v : 1);
}
};
obj.increment(); // this === obj

2. 함수 호출 모드. 함수가 객체의 속성이 아닌 경우 함수로 호출되며 전역 객체에 바인딩됩니다. 예:

코드 복사 코드는 다음과 같습니다.

message = 'Hello World';
var p = 함수() {
console.log(this.message);
}

p(); // 'Hello World' 출력

이 동작은 때때로 혼란스럽습니다. 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

obj = {
값: 0,
증분: 함수() {
        var helper = function() {
//전역 객체의 값에 1을 더합니다
This.value = 1;
}

                // 도우미는 함수로 호출됩니다.
​​​​ // 따라서 이것이 전역 개체입니다
        도우미();
}
};

obj.increment(); // obj.value === 0

원하는 결과는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

obj = {
값: 0,
증분: 함수() {
        var that = this;
        var helper = function() {
그.값 = 1;
}

        도우미();
}
};

obj.increment(); // obj.value === 1

3. 생성자 호출 모드. new 접두사가 붙도록 의도된 함수를 생성자라고 합니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// 테스트를 생성자라고 합니다
var 테스트 = 함수(문자열) {
This.message = 문자열;
}

var myTest = new Test("Hello World");

함수 앞에 new를 추가하면 함수를 호출할 수 있습니다(이러한 함수는 일반적으로 대문자로 시작합니다). new를 추가하면 이 함수의 프로토타입 속성에 연결된 객체가 생성되고 생성자에 this가 생성됩니다. 이 개체.

4.통화 모드를 적용합니다. 함수의 적용 메소드는 두 개의 매개변수가 있는 함수를 호출하는 데 사용됩니다. 첫 번째는 this이고 두 번째는 매개변수 배열입니다. 예:

코드 복사 코드는 다음과 같습니다.

var add = 함수(a, b) {
b를 돌려주세요;
}

var ret = add.apply(null, [3, 4]) // ret === 7

함수가 호출되면 실제 매개변수가 모두 포함된 인수(실제 JavaScript 배열이 아님)라는 클래스 배열에 액세스할 수 있으므로 가변 길이 매개변수를 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var add = function() {
var 합계 = 0;
for (var i=0; i         합계 = 인수[i];
}
합계를 반환합니다.
}

추가(1, 2, 3, 4);

예외

이제 JavaScript의 예외 처리 메커니즘에 대해 이야기해 보겠습니다. 예외를 발생시키려면 throw 문을 사용하고 예외를 포착하고 처리하려면 try-cache 문을 사용합니다.

코드 복사 코드는 다음과 같습니다.

var add = 함수 (a, b) {
If (typeof a !== '숫자' || typeof b !== '숫자') {
​​​​ // 예외 발생
던지기 {
이름: 'TypeError',
                메시지: '필요한 번호를 추가하세요'
        };
}
b를 돌려주세요;
}

//예외 포착 및 처리
시도해보세요 {
추가("일곱");
// e는 던져진 예외 객체입니다
} 잡기 (e) {
console.log(e.name ': ' e.message);
}

JavaScript 유형에 속성 추가

생성자는 JavaScript의 대부분의 유형에 존재합니다.

1. 객체의 생성자는 Object입니다
2. 배열의 생성자는 Array
입니다. 3. 함수의 생성자는 Function
4. 문자열의 생성자는 String
입니다. 5. 숫자의 생성자는 Number
6. Boolean의 생성자는 Boolean
7. 정규식의 생성자는 RegExp

생성자의 프로토타입에 속성(종종 메소드)을 추가하여 관련 변수에서 이 속성을 사용할 수 있도록 할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

Number.prototype.integer = function() {
수학 반환[this < 0 ? 'ceil' : 'floor'](this);
}

(1.1).정수() // 1

범위

JavaScript에는 범위를 구축하는 함수가 필요합니다.

코드 복사 코드는 다음과 같습니다.

함수() {
// ...
}();

여기서 익명 함수가 생성되어 실행됩니다. 범위를 통해 노출하고 싶지 않은 변수를 숨길 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var obj = function() {
//값 숨기기, 외부에서 접근 불가능
변수 값 = 0;

복귀 {
// 이 메소드만이 값을 수정할 수 있습니다
증분: 함수() {
값 = 1;
},
// 이 메소드만 값을 읽을 수 있습니다
         getValue: function() {
             반환 값;
}
};
}();

obj.increment();
obj.getValue() === 1;

상속

JavaScript에서 상속을 구현하는 방법에는 여러 가지가 있습니다.
객체를 생성할 때 객체와 연관된 프로토타입 객체를 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//프로토타입 객체가 {x:1, y:2}
인 객체 o를 생성합니다. var o = Object.create({x:1, y:2});

Object.create 메소드는 ECMAScript 5에 정의되어 있습니다. ECMAScript 3을 사용하는 경우 create 메소드를 직접 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// Object.create 메소드가 정의되지 않은 경우
if (typeof Object.create !== '함수') {
// Object.create 메소드 생성
Object.create = 함수(o) {
        var F = 함수 () {};
          F.prototype = o;
               // 새 객체를 생성합니다. 이 객체의 프로토타입 객체는 o
          새 F() 반환
};
}

Object.create 메소드를 통해 프로토타입 기반 상속을 수행합니다. 새 객체는 이전 객체의 속성을 직접 상속합니다(클래스 기반 상속에 비해 클래스가 존재할 필요가 없으며 객체는 객체를 직접 상속합니다). 예:

코드 복사 코드는 다음과 같습니다.

var myMammal = {
이름: '포유류 허브',
Get_name: 함수() {
         this.name을 반환합니다.
},
말한다: function() {
          이것을 반환합니다.'';
}
};

// myMammal 상속
var myCat = Object.create(myMammal);
myCat.name = '헨리에타';
myCat.saying = '야옹';
myCat.purr = 함수(n) {
var i, s = '';
for (i = 0; i           만약 (들) {
          s = '-';
}
        s = 'r';
}
반품하세요;
};
myCat.get_name = function() {
Return this.says() ' ' this.name ' ' this.says();
};

위 코드는 매우 간단하지만 비공개 멤버를 보호할 수는 없습니다. 모듈 패턴을 사용할 수 있습니다. 모듈 패턴에서는 함수에 의해 특정 유형의 객체가 생성되고, 함수 범위는 외부 액세스로부터 비공개 멤버를 보호하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

// 포유류 객체를 생성하는 데 사용되는 포유류 함수
var 포유류 = 기능(사양) {
// 이는 생성된 객체입니다
var = {};

// 공개 메소드 get_name은 외부에서 접근 가능합니다
That.get_name = function() {
// spec.name은 외부에서 직접 접근할 수 없습니다.
         사양명 반환;
};

// 외부에서 접근이 가능하다는 공개 메소드
That.says = function() {
// spec.saying은 외부에서 직접 접근할 수 없습니다
          사양을 반환합니다.'';
};

돌려주세요;
};

//포유류 객체 생성
var myMammal = 포유동물({이름: '허브'});

//cat 객체를 생성하는 데 사용되는 cat 함수
var cat = 함수(사양) {
spec.saying = spec.saying || '야옹';

// 고양이는 포유동물로부터 상속을 받으므로 포유동물 객체가 먼저 생성됩니다
var that = 포유류(사양);

// 공개 메소드 purr 추가
That.purr = 함수(n) {
        var i, s = '';
for (i = 0; i                  만약 (들) {
                s = '-';
            }
          s = 'r';
}
        반품;
};

// 공개 메소드 get_name 수정
That.get_name = function() {
          return that.says() ' ' spec.name
'' that.says();
         반품하세요.
};
};

//고양이 객체 생성
var myCat = cat({이름: '헨리에타'});

모듈 패턴에서는 생성자를 호출하여 상속이 이루어집니다. 또한 하위 클래스에서 상위 클래스의 메서드에 액세스할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

Object.prototype.superior = 함수(이름) {
    var that = this, method = that[이름];
    반환 함수() {
        return method.apply(that, 인수);
    };
};
 
var coolcat = 기능(사양) {
    // 获取子类의 get_name 방법
    var that = cat(spec), super_get_name = that.superior('get_name');
    that.get_name = 함수(n) {
        'like' super_get_name() ' baby'를 반환합니다.
    };
    돌려주세요;
};