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

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 =
}

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.