検索
ホームページウェブフロントエンドjsチュートリアルJavaScriptの基本データ型と参照型の違いを詳しく解説

2 日前、基本データ型と参照型の違いについての偉大なマスターの記事をkraaas見て、非常によく書かれていると思ったので、私が普段見ている知識ポイントと理解を追加したいと思いました。次の記事があります

js の基本データ型:

js の基本データ型には、値によってアクセスされ、操作および保存が可能です。

1 の実際の値。基本データ型の値は不変です。

文字列などの基本型の値を変更できるメソッドはありません:

var name = "change";
name.substr();//hang
console.log(name);//change

var s = "hello";
s.toUpperCase()//HELLO;
console.log(s)//hello

これら 2 つの例を通して、次のことがわかります。元の定義 変数名の値は変更されておらず、substr() メソッドと toUpperCase() メソッドを呼び出すと、元の定義された変数名とは関係のない新しい文字列が返されます

次のような疑問を持つ人もいるかもしれません。コード:

var name = "change";
name = "change1";
console.log(name)//change1

を参照してください。 name の値が「変更」されているようです。実際、var name = "change"、ここでの基本タイプは文字列で、これは「change」です。ここでの「change」は変更できません。 name は "change" を指すポインタです。このとき、name = "change1" を指すことはできます。同様に、"change1" は変更できません。つまり、ここでは、あなたが考える変化は単なる「ポインタの向きの変化」です

ここでの基本型は名前ではなく「変化」を指します。明確に区別する必要があります

2. 基本データ型は属性を追加できません。とメソッド

var p = "change";
p.age = 29;
p.method = function(){console.log(name)};
console.log(p.age)//undefined
console.log(p.method)//undefined

上記のコードを通じて、基本型にプロパティとメソッドを追加できないことがわかり、また、基本型が不変であることもわかります

3. 基本データ型の割り当ては単純な割り当てです

基本型の値は、ある変数から別の変数に割り当てられます。新しい値が変数オブジェクトに作成され、その値が新しい変数に割り当てられた場所にコピーされます

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

上記のコードでは、値はa に保存された値は 10 です。 a の値を使用して b を初期化すると、値 10 も に保存されます。ただし、b の 10 と a の 10 は完全に独立しています。したがって、これら 2 つの変数は、次のように、相互に影響を与えることなく任意の操作に参加できます。スタック領域

以下の基本的な変数タイプがある場合:

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

その場合、その格納構造は以下のようになります:

スタック領域には、変数の識別子と変数の値が含まれます

js 参照型:

上記の基本的な型に加えて、js にはオブジェクト、配列、関数、データなどの参照型もあります。

1 の値。参照型は変更できます

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

2. 参照型はプロパティとメソッドを追加できます

var o = {x:1};
o.x = 2;//通过修改对象属性值更改对象
o.y = 3;再次更改对象,给它增加一个属性

var a = [1,2,3];
a[0] = 0;//更改数组的一个元素
a[3] = 4;//给数组增加一个元素

3. 参照型の割り当てはオブジェクト参照です

まず次のコードを見てください。ある変数から別の変数に参照型の値を移動すると、その変数に格納されているオブジェクトの値も、新しい変数に割り当てられた領域にコピーされます。参照型は保存されます。変数の内容は、その変数内のオブジェクトのアドレスです。したがって、基本データ型の単純な割り当てとは異なり、この値のコピーは実際にはポインタであり、このポインタはヒープ メモリに格納されているオブジェクトを指します。その後、割り当て操作の後、両方の変数に同じオブジェクトが格納されます。アドレスであり、これら 2 つのアドレスは同じオブジェクトを指しているため、変数のいずれかを変更すると相互に影響します

それらの関係は次のとおりです:

したがって、型の割り当ては実際には の割り当てになります。スタック領域に格納されているオブジェクトのアドレス ポインタなので、2 つの変数は同じオブジェクトを指しており、操作は相互に影響します。

4. 参照型の比較は参照の比較です

var person = {};
person.name = "change";
person.say = function(){alert("hello");}
console.log(person.name)//change
console.log(person.say)//function(){alert("hello");}

なぜ 2 つのオブジェクトはまったく同じに見えるのに等しくありませんか?

参照型の比較は参照の比較、つまりヒープメモリを指すスタック領域に格納されている2つのオブジェクトのアドレスが同じかどうかを比較することになりますが、このときp1とp2 は両方とも "{}" のように見えますが、スタック領域に保存するヒープメモリを指すアドレスが異なるため、2 つのオブジェクトは等しくありません

5. 引用类型是同时保存在栈区和堆区中的

引用类型的存储需要在内存的栈区和堆区共同完成,栈区保存变量标识符和指向堆内存的地址

假如有以下几个对象:

var person1 = {name:"change1"};
var person2 = {name:"change2"};
var person3 = {name:"change3"};

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

基本包装类型(包装对象):

先看下以下代码:

var s1 = "helloworld";
var s2 = s1.substr(4);

上面我们说到字符串是基本数据类型,不应该有方法,那为什么这里s1可以调用substr()呢?

通过翻阅js权威指南第3.6章节和高级程序设计第5.6章节我们得知,ECMAScript还提供了三个特殊的引用类型Boolean,String,Number.我们称这三个特殊的引用类型为基本包装类型,也叫包装对象.

也就是说当读取string,boolean和number这三个基本数据类型的时候,后台就会创建一个对应的基本包装类型对象,从而让我们能够调用一些方法来操作这些数据.

所以当第二行代码访问s1的时候,后台会自动完成下列操作:

  1. 创建String类型的一个实例;// var s1 = new String(“helloworld”);

  2. 在实例上调用指定方法;// var s2 = s1.substr(4);

  3. 销毁这个实例;// s1 = null;

正因为有第三步这个销毁的动作,所以你应该能够明白为什么基本数据类型不可以添加属性和方法,这也正是基本装包类型和引用类型主要区别:对象的生存期.使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都是一直保存在内存中.而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。

 以上就是JavaScript 基本数据类型和引用类型的区别详解 的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章:

Java四种引用类型的具体介绍

详细比较Java中的基本类型变量和引用类型变量

解析java中的引用类型的概念

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。