JavaScript学習のまとめ(1)～JavaScript入門の基礎_javascriptスキル

1. JavaScript 言語の機能

1.1. JavaScript はオブジェクト駆動型およびイベント駆動型 (動的)

Web サービス プログラムを経由せずに、ユーザーまたは顧客の入力に直接応答できます。イベント駆動型の方法でユーザーに応答します。いわゆるイベントドリブンとは、ホームページ上で何らかの操作を行うことで発生するアクションのことを「イベント」と呼びます。例えば、マウスを押す、ウィンドウを移動する、メニューを選択するなどをイベントとみなすことができます。イベントが発生すると、対応するイベント応答がトリガーされる場合があります。

1.2. JavaScript はクロスプラットフォームです

JavaScript はブラウザ自体に依存しており、オペレーティング システムとは関係ありません。

2. JavaScript 変数

2.1. 変数を定義する

変数を定義するときは、常に「var 変数名」を使用します。例: var str; キーワード var

を省略することもできます。

2.2. JavaScript 変数の型を決定する方法

JavaScript の変数のデータ型は、JS エンジンによって決定されます

var name="孤傲苍狼";//name是string类型
var age=;//age是number类型
var flag=true;//flag是boolean类型
var email;//email只是声明，没有赋值，因此代表的类型是"undefined"，也就是无法确定
name=;//name自动变成了number类型

2.3. typeof キーワードを使用して、変数

で表される特定のデータ型を表示します。

typeof 演算子には 1 つのパラメーターがあり、それはチェックされる変数または値です。例:

var sTemp = "test string";
alert (typeof sTemp);  //输出 "string"
alert (typeof );  //输出 "number"

変数または値に対して typeof 演算子を呼び出すと、次のいずれかの値が返されます:

未定義 - 変数の型が未定義の場合

boolean - 変数の型が Boolean の場合

number - 変数の型が Number の場合

string - 変数の型が String の場合

オブジェクト - 変数が参照型または Null 型の場合

テストコード:

<script type="text/javascript">
   var name="孤傲苍狼";//name是string类型
   alert("name是"+typeof name+"类型");
   var age=;//age是number类型
   alert("age是"+typeof age+"类型");
   var flag=true;//flag是boolean类型
   alert("flag的类型是："+typeof flag);
   name=;//name自动变成了number类型
   alert("name变量重新赋值后，name的数据类型变成了："+typeof name);
   var email;//email只是声明，没有赋值，因此代表的类型是"undefined"，也就是无法确定
   alert("email的类型是："+typeof email );
   var a=null;
 /*
 为什么 typeof 运算符对于 null 值会返回 "Object"。
 这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
 */
   alert("a是"+typeof a +"类型");
  </script>

実行結果:

3. JavaScript データ型

JavaScript には、基本データ型と参照データ型という 2 つの異なるデータ型が含まれています。プリミティブ型は単純なデータを指し、参照型は複数の値で構成されるオブジェクトを指します。変数に値を割り当てるとき、パーサーが最初に行う必要があるのは、その値がプリミティブ型の値であるか参照型の値であるかを確認することです。

3.1. 基本的なデータ型

5 つの一般的な基本データ型:

ブール値
番号
文字列
未定義
ヌル

これら 5 つの基本データ型は、変数に格納されている実際の値を直接操作できます。

3.1.1、数値型(Number)とブール型(Boolean)

以下のコードを見てください:

<script type="text/javascript">
  var a = ;
  var b = a;
    b = ;
  alert("a="+a);//打印a=

  var b = true;
  var b = b;
    b = false;
  alert("b="+b);//打印b=true
</script>

実行結果:

実行結果から、b の値は a の値のコピーであることがわかります。2 つの変数の値は等しいですが、2 つの変数には 2 つの異なる基本データ型の値が格納されています。 b は a のコピーのコピーを保存するだけです。したがって、b の値が 20 に変化しても、a の値は 10 のままです。 2 つのブール変数 b1 と b2 も基本データ型であり、2 つの異なる基本データ型値も格納されます。b2 には 1 のコピーが格納されます。したがって、b2 の値が false に変化しても、b1 の値は true のままです。

次の図は、この基本的なデータ型の割り当てプロセスを示しています。

スタックメモリ

3.1.2. 文字列型(String)

JavaScript の String は特別な基本データ型であり、多くの言語では String はオブジェクトの形式で表現されますが、JavaScript では String は基本データ型として扱われ、値によって渡されます。しかし、それはかなり特殊な基本タイプです。

以下の例を見てください:

<script type="text/javascript">
   var strA = "这是字符串";
   var strB = strA;
     strA = "这是另外一个字符串";
     alert("strB="+strB);
 </script>

运行结果：

　　

　　从运行结果可以看到，仿佛strA通过值传递的方式复制了一份给了strB。当strA改变的时候，strB并没有改变，似乎我们已经可以下结论，String就是个基本数据类型。

可是，因为String是可以任意长度的，通过值传递，一个一个的复制字节显示效率依然很低，看起来String也可以当作引用类型。

看下面例子：

var a = "myobject";
a.name = "myname";//为字符串a动态添加name属性
alert("a.name="+a.name); //访问a的name属性，

结果显示：a.name=undefined

运行结果：

　　

　　运行结果显示，String无法当作一个对象来处理。这也证明了一点：基本类型虽然也可以添加属性，也不会报错，经测试添加完之后却是无法访问的，实际上，javascript里的String是不可以改变的，javascript也没有提供任何一个改变字符串的方法和语法。

看下面的例子：

var b = "myobject";
b = b.substring(,);
alert("b="+b); // b=bj

运行结果：

　　

　　这样做，没并有改变String字符串"myobject"，只b引用了另一个字符串"bj"，"myobject"被回收了。

　　所以可以这样讲，String实际上并不符合上面两种数据类型分类。它是具有两方面属性介于两都之间的一种特殊类型。

3.1.3、Null 类型

　　Null类型只有一个专用值 null，值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

<script type="text/javascript">
  alert("null == undefined的结果是："+(null == undefined)); //输出 "true"
</script>

运行结果：

　　

　　尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（typeof 运算符对于 null 值会返回 "Object"。）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

3.1.4、Undefined 类型

　　Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

var oTemp;

　　前面一行代码声明变量 oTemp，没有初始值。该变量将被赋予值 undefined，即 undefined 类型的字面量。可以用下面的代码段测试该变量的值是否等于 undefined：

<script type="text/javascript">
  var oTemp;
  alert("oTemp == undefined的结果是："+(oTemp == undefined));//输出 "true"
 </script>

运行结果：

　　

　　运行结果显示 "true"，说明这两个值确实相等。

　　可以用 typeof 运算符显示该变量所代表的的数据类型是undefined类型

<script type="text/javascript">
  var oTemp;
  alert("typeof oTemp的结果是："+typeof oTemp); //输出 "undefined"
 </script>

　　值 undefined 并不同于未定义的值。但是，typeof 运算符并不真正区分这两种值。考虑下面的代码：

<script type="text/javascript">
  var oTemp;
  alert("oTemp变量有声明，typeof oTemp的结果是："+typeof oTemp); //输出 "undefined"
  alert("oTemp变量没有声明，typeof oTemp的结果是："+typeof oTemp); //输出 "undefined"
 </script>

运行结果：

　　两个变量输出的都是 "undefined"，即使只有变量 oTemp2 从未被声明过。如果对oTemp2 使用除 typeof 之外的其他运算符的话，会引起错误，因为其他运算符只能用于已声明的变量上。

　　下面的代码将引发错误：

var oTemp;
 alert(oTemp == undefined);//'oTemp' 未定义

　　当函数无明确返回值时，返回的也是值 "undefined"，如下所示：

function testFunc() {
   //这是一个空函数，没有返回值
 }
 alert("testFunc() == undefined的结果是："+(testFunc() == undefined)); //输出 "true"

运行结果：

　　

3.2、引用数据类型

　　javascript引用数据类型是保存在堆内存中的对象，JavaScript不允许直接访问堆内存空间中的位置和操作堆内存空间，只能通过操作对象在栈内存中的引用地址。所以引用类型的数据，在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存在堆内存中的对象。

看下面的例子：

<script type="text/javascript">
  var obj = new Object();
  var obj = obj;
  obj.name = "孤傲苍狼";
  alert(obj.name); // 孤傲苍狼
</script>

运行结果：

　　

　　由上面例子，我们声明了一个引用数据类型变量obj1，并把它赋值给了另外一个引用数据类型变量obj2。当我们obj2添加了一个name属性并赋值" 孤傲苍狼"。obj1同样拥有了和obj2一样的name属性。说明这两个引用数据类型变量指向同一个对象。obj1赋值给obj2，实际只是把这个对象在栈内存的引用地址复制了一份给了obj2，但它们本质上共同指向了堆内存中的同一个对象。

下面我们来演示这个引用数据类型赋值过程

　　　　

自然，给obj2添加name属性，实际上是给堆内存中的对象添加了name属性，obj2和obj1在栈内存中保存的只是堆内存对象的引用地址，虽然也是拷贝了一份，但指向的对象却是同一个。故而改变obj2引起了obj1的改变。

　　一般而言，基本数据类型是由固定数目的字节组成，这些字节可以在解析器的较底层进行操作，比如Number和 Boolean；而引用数据类型，可以包含任意数目的属性和元素，因此它们无法像基本数据类型那样很容易的操作。

由于，引用数据类型的值是会发生变化的， 所以通过跟基本数据类型一样的值传递方式，也就没什么意义了，因为会牵涉到大量的内存的复制和比较，效率太低。所以引用数据类型是通过引用传递方式，实际传递的只是对象的一个地址。

比如Array和Function，因为它们都是特殊的对象所以它们都是引用类型。另外，引用类型是可以添加属性，基本类型虽然也可以添加属性，也不会报错，经测试添加完之后却是无法访问的。