찾다
웹 프론트엔드JS 튜토리얼나를 따라와서 javascript_javascript 스킬의 기본 유형과 참조 유형을 배워보세요.

1. 기본 유형과 참조 유형

5가지 기본 데이터 유형이 있습니다: 정의되지 않음, 부울, 숫자, 문자열, null

typeof null; //"object"
typeof undefined; //"undefined"
typeof 1; //"number"
typeof false //"boolean"
typeof "1" //"string"

(혼란스럽게도 null 유형을 유형화하면 "객체"가 반환되는 반면 ECMAScript 표준에서는 이를 고유한 유형으로 설명합니다.)

기본 유형 값의 작업을 용이하게 하기 위해 ECMAScript는 Boolean, Number 및 String이라는 세 가지 특수 참조 유형도 제공합니다. 표준 라이브러리는 Boolean 값, 숫자 및 문자열을 객체로 캡슐화하는 생성자를 제공합니다. 이러한 유형은 다른 참조 유형과 유사하며 해당 기본 래퍼 유형에 해당하는 특수 동작을 갖습니다. 실제로 기본 유형 값을 읽을 때마다 해당 기본 래퍼 유형의 개체가 백그라운드에서 생성되어 데이터를 조작하기 위한 일부 메서드를 호출할 수 있습니다.

var s1 = "some text";
var s2 = s1.substring(2);
var s3 = new String("some text");

그러나 원래 문자열과 달리 String 객체는 실제 객체입니다.

typeof s1; //"string"
typeof s3; //"object"

이 예의 변수 s1에는 기본 유형 값인 문자열이 포함되어 있습니다. 다음 줄에서는 s1의 substring() 메서드를 호출하고 반환된 결과를 s2에 저장합니다. 우리는 기본 유형 값이 객체가 아니라는 것을 알고 있으므로 논리적으로 메소드가 없어야 합니다(그러나 메소드는 있습니다). 실제로 이러한 직관적인 작업을 달성하기 위해 일련의 프로세스가 백그라운드에서 자동으로 완료되었습니다. 코드의 두 번째 줄이 s1에 액세스하면 액세스 프로세스가 읽기 모드에 있습니다. 즉, 이 문자열의 값을 메모리에서 읽습니다. 읽기 모드에서 문자열에 접근하면 백그라운드에서 다음 처리가 자동으로 완료됩니다.

(1) String 유형의 인스턴스를 생성합니다.

(2) 인스턴스에서 지정된 메서드를 호출합니다.

(3) 이 인스턴스를 삭제합니다.

은 다음 코드를 사용하여 표현할 수 있습니다.

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

이 처리를 마치면 기본 문자열 값이 객체와 동일해집니다. 또한 위의 세 단계는 Boolean 및 Number 유형에 해당하는 Boolean 및 숫자 값에도 적용됩니다.

2. 수명주기

참조 유형과 기본 포장 유형의 주요 차이점은 개체의 수명 주기입니다. new 연산자를 사용하여 생성된 참조 유형의 인스턴스는 실행 흐름이 현재 범위를 벗어날 때까지 메모리에 남아 있습니다. 자동으로 생성된 기본 패키징 유형 객체는 이 코드 라인의 실행 기간 동안(순간적으로)만 존재하며 즉시 소멸됩니다. 이는 런타임에 속성에 속성과 메서드를 추가할 수 없음을 의미합니다.

var s1 = "some text";
s1.color = "red";
alert(s1.color); //undefined

물론 Boolean, Number, String을 명시적으로 호출하여 기본 패키징 유형의 객체를 생성할 수 있지만 이는 권장되지 않습니다. 기본 래퍼 유형의 인스턴스에서 typeof를 호출하면 "객체"가 반환되고 기본 래퍼 유형의 모든 객체는 부울 값 true로 변환됩니다. .

var obj = new Object("some text");
alert(obj instanceof String) //true

기본 패키징 유형의 생성자를 호출하기 위해 new를 사용하는 것은 동일한 이름의 변환 함수를 직접 호출하는 것과 다르다는 점에 주목할 가치가 있습니다.

var value = "25";
var number = Number(value);//转型函数
alert(typeof number) //number

var obj = new Number(var); //构造函数
alert(typeof obj) //object

3. 기본 유형 특성

1. 기본 유형의 값은 변경할 수 없습니다.

어떠한 메소드도 문자열과 같은 기본 유형의 값을 변경할 수 없습니다.

var name = 'jozo';
name.toUpperCase(); // 输出 'JOZO'
console.log(name); // 输出 'jozo'

원래 이름은 변경되지 않았지만 toUpperCase() 메서드를 호출하면 새 문자열이 반환되는 것을 확인할 수 있습니다.
살펴보겠습니다:

var person = 'jozo';
person.age = 22;
person.method = function(){//...};

console.log(person.age); // undefined
console.log(person.method); // undefined

위 코드에서 볼 수 있듯이 기본 유형에는 속성과 메서드를 추가할 수 없습니다.

2. 기본 비교 유형은 값 비교입니다.

값이 동일한 경우에만 동일합니다.
하지만 다음과 같이 할 수도 있습니다.

var a = 1;
var b = true;
console.log(a == b);//true

동등하지 않나요? 실제로 이것은 유형 변환 및 == 연산자에 대한 지식입니다. 즉, 서로 다른 유형의 두 변수를 비교하기 위해 ==를 사용할 때 일부 유형 변환이 수행된다는 의미입니다. 위의 비교는 먼저 true를 숫자 1로 변환한 다음 숫자 1과 비교하면 결과가 true가 됩니다. 이는 비교되는 두 값의 유형이 다른 경우 == 연산자가 유형 변환을 수행하지만 두 값이 동일한 유형인 경우 ==도 ===와 동일합니다.

var a = 'jozo';
var b = 'jozo';
console.log(a === b);//true

3. 기본 타입 변수는 스택 영역에 저장됩니다. (스택 영역은 메모리에 있는 스택 메모리를 의미합니다.)

다음과 같은 기본 유형의 변수가 있다고 가정합니다.

var name = 'jozo';
var city = 'guangzhou';
var age = 22;

那么它的存储结构如下图:

栈区包括了变量的标识符和变量的值。

四、引用类型特点

引用类型会比较好玩有趣一些。

javascript中除了上面的基本类型(number,string,boolean,null,undefined)之外就是引用类型了,也可以说是就是对象了。对象是属性和方法的集合。也就是说引用类型可以拥有属性和方法,属性又可以包含基本类型和引用类型。来看看引用类型的一些特性:

1).引用类型的值是可变的

我们可为为引用类型添加属性和方法,也可以删除其属性和方法,如:

var person = {};//创建个控对象 --引用类型
person.name = 'jozo';
person.age = 22;
person.sayName = function(){console.log(person.name);} 
person.sayName();// 'jozo'

delete person.name; //删除person对象的name属性
person.sayName(); // undefined

上面代码说明引用类型可以拥有属性和方法,并且是可以动态改变的。

2).引用类型的值是同时保存在栈内存和堆内存中的对象

javascript和其他语言不同,其不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间,那我们操作啥呢? 实际上,是操作对象的引用,所以引用类型的值是按引用访问的。

准确地说,引用类型的存储需要内存的栈区和堆区(堆区是指内存里的堆内存)共同完成,栈区内存保存变量标识符和指向堆内存中该对象的指针,也可以说是该对象在堆内存的地址。
假如有以下几个对象:

var person1 = {name:'jozo'};
var person2 = {name:'xiaom'};
var person3 = {name:'xiaoq'};

则这三个对象的在内存中保存的情况如下图:

3).引用类型的比较是引用的比较

var person1 = '{}';
var person2 = '{}';
console.log(person1 == person2); // true

上面讲基本类型的比较的时候提到了当两个比较值的类型相同的时候,相当于是用 === ,所以输出是true了。再看看:

var person1 = {};
var person2 = {};
console.log(person1 == person2); // false

可能你已经看出破绽了,上面比较的是两个字符串,而下面比较的是两个对象,为什么长的一模一样的对象就不相等了呢?

别忘了,引用类型时按引用访问的,换句话说就是比较两个对象的堆内存中的地址是否相同,那很明显,person1和person2在堆内存中地址是不同的:

所以这两个是完全不同的对象,所以返回false;

五、简单赋值

在从一个变量向另一个变量赋值基本类型时,会在该变量上创建一个新值,然后再把该值复制到为新变量分配的位置上:

var a = 10;
var b = a;

a ++ ;
console.log(a); // 11
console.log(b); // 10

此时,a中保存的值为 10 ,当使用 a 来初始化 b 时,b 中保存的值也为10,但b中的10与a中的是完全独立的,该值只是a中的值的一个副本,此后,这两个变量可以参加任何操作而相互不受影响。

也就是说基本类型在赋值操作后,两个变量是相互不受影响的。

六、对象引用

当从一个变量向另一个变量赋值引用类型的值时,同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。前面讲引用类型的时候提到,保存在变量中的是对象在堆内存中的地址,所以,与简单赋值不同,这个值的副本实际上是一个指针,而这个指针指向存储在堆内存的一个对象。那么赋值操作后,两个变量都保存了同一个对象地址,则这两个变量指向了同一个对象。因此,改变其中任何一个变量,都会相互影响:

var a = {}; // a保存了一个空对象的实例
var b = a; // a和b都指向了这个空对象

a.name = 'jozo';
console.log(a.name); // 'jozo'
console.log(b.name); // 'jozo'

b.age = 22;
console.log(b.age);// 22
console.log(a.age);// 22

console.log(a == b);// true

그들의 관계는 다음과 같습니다.

따라서 참조 유형 할당은 실제로 스택 영역에 저장된 객체의 주소 포인터를 할당하는 것입니다. 따라서 두 변수는 동일한 객체를 가리키며 모든 작업은 서로 영향을 미칩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

안전한 시험 브라우저

안전한 시험 브라우저

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

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구