ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルの基本タイプと参照タイプを学ぶには、私に従ってください。

javascript_javascript スキルの基本タイプと参照タイプを学ぶには、私に従ってください。

WBOY
WBOYオリジナル
2016-05-16 15:32:141097ブラウズ

1. 基本型と参照型

基本的なデータ型は 5 つあります: 未定義、ブール、数値、文字列、null

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

(紛らわしいことに、null 型を typeofing すると「object」が返されますが、ECMAScript 標準ではそれを個別の型として説明しています。)

基本的な型の値の操作を容易にするために、ECMAScript は 3 つの特別な参照型 (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 に保存します。プリミティブ型の値はオブジェクトではないことがわかっているため、論理的にはメソッドを持つべきではありません (ただし、メソッドは存在します)。実はこの直感的な操作を実現するために、一連の処理がバックグラウンドで自動的に行われています。コードの 2 行目が s1 にアクセスするとき、アクセス プロセスは読み取りモードになります。つまり、この文字列の値がメモリから読み取られます。読み取りモードで文字列にアクセスすると、次の処理がバックグラウンドで自動的に完了します:

(1) String型のインスタンスを作成します。

(2) インスタンス上で指定されたメソッドを呼び出します。

(3) このインスタンスを破棄します。

は次のコードを使用して表現できます:

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

この処理により、基本的な文字列値はオブジェクトと同じになります。さらに、上記の 3 つの手順は、Boolean 型および Number 型に対応する Boolean および数値にも適用されます。

2. ライフサイクル

参照タイプと基本パッケージ化タイプの主な違いは、オブジェクトのライフサイクルです。 new 演算子を使用して作成された参照型のインスタンスは、実行フローが現在のスコープを離れるまでメモリ内に残ります。自動的に作成される基本的なパッケージング タイプのオブジェクトは、このコード行の実行期間中 (瞬間的に) のみ存在し、その後すぐに破棄されます。これは、実行時にプロパティやメソッドをプロパティに追加できないことを意味します。

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

もちろん、Boolean、Number、String を明示的に呼び出して、基本的なパッケージ化タイプのオブジェクトを作成することもできますが、これはお勧めできません。基本ラッパー型のインスタンスで typeof を呼び出すと、「object」が返され、基本ラッパー型のすべてのオブジェクトがブール値 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

それらは平等ではないでしょうか?実際、これは型変換と == 演算子の知識です。つまり、== を使用して型の異なる 2 つの変数を比較するときに、何らかの型変換が実行されることになります。上記の比較では、まず true を数値 1 に変換し、次に数値 1 と比較すると、結果は true になります。 これは、比較する 2 つの値の型が異なる場合、== 演算子で型変換が行われますが、2 つの値が同じ型の場合は、== であっても === と同等になります。

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

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

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

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

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