> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 객체, 함수 및 상속_javascript 팁

JavaScript 객체, 함수 및 상속_javascript 팁

WBOY
풀어 주다: 2016-05-16 18:50:28
원래의
1001명이 탐색했습니다.

1. Javascript의 객체
JavaScript는 객체 기반 프로그래밍 언어라고 할 수 있습니다. JavaScript 자체는 캡슐화만 구현하고 상속 및 다형성을 구현하지 않기 때문에 객체 기반이라고 하는 이유는 무엇입니까? . 객체를 기반으로 하기 때문에 js의 객체에 대해 이야기해보겠습니다. 어떤 사람들은 js의 모든 것이 객체라고 말하지만 완전히 정확하지는 않습니다. 오른쪽은 js에서 객체의 중요성을 강조한 것입니다. 객체 자체를 구성할 수 있는 함수를 포함하여 js의 모든 곳에 객체가 있습니다. 그러나 반면에 js에는 숫자, 문자열 및 부울 값, null 값 및 정의되지 않은 값을 포함하는 몇 가지 간단한 데이터 유형도 있으며 이는 객체가 아닙니다. 그렇다면 이러한 유형의 값은 왜 객체가 아닌가? JavaScript에는 객체에 대한 두 가지 정의가 있습니다.
(1) JavaScript의 개체는 변경 가능한 키 컬렉션입니다(이 정의는 베테랑 책의 3장에서 따옴)
(2) JavaScript의 개체는 순서가 지정되지 않음), 이러한 속성에는 간단한 데이터 유형, 개체 및 함수가 포함될 수 있습니다. ; 객체의 속성에 저장된 함수를 이 객체의 메소드라고도 합니다. (ECMA-262 4.3.3부터) (참고: 여기에 언급된 속성은 js 스크립트에서 생성 및 액세스할 수 있습니다(명시적 속성이라고 함). 단, 시스템에서 객체에 자동으로 할당한 내부 속성은 제외)
그렇다면 왜 그 단순한 데이터 유형은 객체가 아닌가요? 주로 이러한 데이터 유형의 값에 있는 메서드는 변경할 수 없지만 객체의 속성은 변경 가능해야 하기 때문입니다.
 2. 객체의 프로토타입 체인 [[proto]]
JavaScript의 각 객체가 생성되면 시스템은 해당 객체에 프로토타입 속성 [[proto]]을 자동으로 할당하여 프로토타입 객체에 연결합니다. 자바스크립트에서는 객체의 상속관계는 각 객체의 [[proto]]를 통해 구현됩니다. 그러나 객체의 [[proto]] 속성은 JavaScript에서 접근하거나 수정할 수 없습니다. 이는 내부 속성으로 존재하며 객체 생성 시 시스템에 의해 자동으로 설정됩니다.
객체의 특정 속성에 접근할 때 해당 속성이 이 객체에 없으면 [[proto]]가 가리키는 프로토타입 객체의 속성에서 검색하고, 없으면 반환합니다. [[proto]] 연결이 null이 될 때까지 [[proto]] 체인을 계속 검색합니다.
 3. 함수도 객체이다
 JavaScript에서 함수 자체는 객체이고(그래서 흔히 함수 객체라고 부른다), js에서는 가장 중요한 객체라고 할 수 있다. 이것이 가장 중요한 객체라고 불리는 이유는 한편으로는 다른 언어의 함수와 동일한 역할을 할 수 있고, 호출될 수 있고, 다른 한편으로는 매개변수로 사용될 수도 있기 때문입니다. 객체 생성자를 사용하면 new 연산자와 결합하여 객체를 만들 수 있습니다.
함수는 객체이므로 객체 생성 시 설정된 프로토타입 체인 [[proto]] 속성을 포함하여 객체의 모든 속성을 포함해야 합니다.
함수 객체와 일반 객체의 차이점을 살펴보겠습니다. 객체는 순서가 지정되지 않은 속성의 모음이라고 이전에 말했습니다. 그렇다면 함수의 속성과 일반 객체의 속성의 차이점은 무엇입니까? ECMA-262의 섹션 13.2에 따르면 함수 객체가 생성되면 시스템은 함수 객체가 일반 함수로 호출될 때 기본적으로 [[call]] 및 [[constructor]] 두 가지 속성을 생성합니다. myFunc()), "()" 연산자는 함수 객체의 [[call]] 속성이 생성자(예: new myConst())로 호출될 때 해당 [[constructor The ]] 속성이 실행되고, [[cosntructor]]의 실행 과정은 다음 절에서 소개됩니다. 또한 함수가 생성되면 시스템은 기본적으로 해당 함수에 대한 표시 속성 프로토타입을 생성하고
This.prototype = {constructor:this}
값을 할당합니다. 자세한 내용은 Lao Dao를 참조하세요. 그 책의 5장. 이 함수 객체의 프로토타입 속성은 js가 상속을 구현하기 위한 생성자로 함수를 사용할 수 있도록 준비되어 있지만 이 속성은 js 스크립트에서 액세스하고 수정할 수 있습니다. 여기서 한 가지 강조할 점은 객체의 [[proto]] 속성과 함수 객체의 프로토타입 속성을 모두가 구별해야 한다는 점입니다. 제가 처음 학습할 때는 이 두 가지를 잘 구별하지 못했기 때문입니다. 많은 우회로.
4. 객체 생성
js에서 객체를 생성하는 방법에는 두 가지가 있습니다. 하나는 리터럴을 사용하는 것입니다.
var Person = {
"first_name":'liang',
 ' last_name':'yang'
 }
 또 다른 방법은 생성자를 통해 생성하는 것입니다
 var my = new Person('liang','yang')
 사실 첫 번째 One 메서드는 생성 과정은 다음과 같이 Object 생성자를 호출하는 것과 동일합니다.
 var Person = new Object();
 Person.first_name = 'liang';
 Person.last_name = 'yang'
 따라서 js의 모든 객체 생성을 구문을 사용하여 병합할 수 있습니다. 이를 달성하려면 생성자가 객체를 생성하는 과정을 자세히 설명하겠습니다.
첫 번째 단계는 속성 없이 빈 객체를 생성하고 이 객체의 [[proto]]가 이 생성자를 가리키는 것입니다. 생성자 함수
두 번째 단계는 이 빈 객체를 생성자 함수에 이 포인터로 전달하고 실행하는 것입니다
세 번째 단계는 위 함수가 객체를 반환하면 객체를 반환하고, 그렇지 않으면 생성된 객체를 반환합니다. 첫 번째 단계
4단계, 함수를 클래스로 사용
위의 단계에서 일반적으로 함수 객체의 프로토타입은 함수 객체가 아닌 일반 객체를 가리킨다는 것을 알 수 있습니다. 이 일반 개체는 이 함수 생성자가 만든 개체에서도 액세스할 수 있습니다. 이를 통해 우리는 함수가 클래스를 나타낼 수 있다고 가정합니다. 이 생성자 함수에 의해 생성된 객체는 이 클래스의 인스턴스 객체입니다. 그런 다음 인스턴스 객체에 포함되어야 하는 속성과 메서드가 배치되어야 합니다. 이 생성자 함수에서 이 클래스의 정적 메서드는 객체의 속성으로 이 함수에 직접 배치될 수 있습니다. 생성자(constructor)'와 생성자 함수(constructor function)라는 두 단어를 구별할 필요가 있는데, 소위 생성자(constructor)는 일반적인 객체지향 언어에서 클래스의 생성자를 말하고, 생성자 함수(constructor function)는 자바스크립트에서 다음과 같이 사용되는 함수를 말한다. 생성자).
섹션 3에서 우리는 각 함수의 프로토타입 객체가 항상 우리와 연결된 함수 자체인 생성자 속성을 포함한다고 말했습니다. 또한, 이 함수에 의해 생성된 각 객체의 [[proto]] 속성은 생성자 함수의 프로토타입 객체를 가리키므로 [[proto]] 체인을 통해 생성자 함수에 의해 생성된 각 객체는 생성자 속성을 가리킨다. 이를 생성한 생성자 함수에 연결하므로 이 속성을 사용하여 이 개체를 생성한 생성자 함수를 확인할 수 있습니다.
5. 함수 상속(클래스 상속)
이제까지 자바스크립트에서 상속에 대해 논의할 차례입니다. 먼저 클래스 상속을 구현하기 위해 무엇을 해야 하는지 생각해 보겠습니다. 하위 클래스 subClass
subClass에 의해 생성된 객체가 superClass에 의해 생성된 객체의 속성에 액세스할 수 있도록 하기 위해 subClass.prototype을 superClass 생성자에 의해 생성된 객체로 만들 수 있습니다.
 subclass.prototye = new superClass();
여기서 문제가 발생합니다. 섹션 4에서 설명한 대로 new superClass()는 superClass.prototype의 모든 메소드를 복사할 뿐만 아니라 superClass( ) 이 함수는 클래스의 생성자 역할을 합니다. 초기화를 구현하려면 하위 클래스의 생성자에서 상위 클래스의 생성자를 호출해야 한다는 것을 알고 있습니다. 이를 위해 빈 생성자를 사용하지만 superClass 프로토타입과 일치하는 프로토타입을 사용하여 함수를 생성하고 subClass.prototype이 이 함수에 의해 생성된 개체를 가리키도록 만들 수 있습니다.
var F = function() {};
F.prototype = superClass.prototype;
subClass.protptype = new F()
이렇게 하면 생성자 작업을 복사합니다. 하지만 또 다른 문제가 있습니다. 즉, subClass의 프로토타입 속성을 수정하여 생성자 속성을 삭제하여 어떤 생성자 함수가 객체를 생성했는지 알 수 없다는 것입니다. 다시 할당할 수 있습니다.
 subClass.prototype.constructor = subClass
 이렇게 하면 속성 복사 문제가 쉽게 해결됩니다. 그러나 또 다른 문제가 발생하는데, subClass에서는 부모 클래스가 어떤 생성자 함수인지 알 수 없으므로 생성자에서 부모 클래스의 생성자를 호출할 수 없으므로 이를 나타내기 위해 subClass에 속성을 추가할 수 있습니다. 상위 클래스
subClass.superClass = superClass.prototype;
이러한 방식으로 하위 클래스의 생성자에서 subClass.superClass.constructor를 사용하여 상위 클래스의 생성자에 액세스할 수 있습니다. 마지막으로 위의 아이디어를 함수
myPro.extend = function (subClass, superClass) {
var F = function() {}
F.prototype = superClass.prototype; subClass .protptype = new F();
subClass.prototype.constructor = subClass;
subClass.superClass = superClass.prototype;
superClass.prototype.constructor =
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿