JavaScript 語言基礎

語言核心

一 詞法結構

• UniCode編碼

• 區分大小寫（HTML不區分/XHTML區分）

• Unicode轉義序列 \uxxxx (\u加4位16進製表示)

• 註釋

  // 單行註釋
  /* */ 多行註釋

• 直接量

  數字
  字符串
  布爾值
  正則表達式
  對象
  

• 標識符

  以字母,下劃線，符號開始，加字母，數字， ，_

二 類型，值和變量

類型

• 數字

  算術運算符（+，-，*，/，%）
  Math類
  Infinity (無窮大)
  NaN (非數字)
  Date
  

• 文本 (字符串)

• 布爾值

• null （空對象）

• undefined（未定義）

全局對象

• 全局屬性
• 全局函數
• 構造函數
• 全局對象

包裝對象（實例）

變量聲明提前

定義的變量會提前抽取出來，但是初始化語句不會提前執行，值會是undefined

作用域鏈

三 表達式和運算符

1. in 判斷左側是否爲右側對象的屬性

    var a = {x:1,y:2};
    "x" in a        //=> true

2. instanceof 判斷左側對象是否爲右側對象的實例

    var a = [];
    a instanceof Array;         //=> true

3. eval()表達式計算

• 如果參數不是字符串則返回這個參數

    function ab (){
        console.log('ab')
    }
    eval(ab);       //=> 返回ab函數本身

• 參數爲字符串時
  
  • 解釋該字符串，編譯成功,則執行該字符串,並返回字符串中最後一個表達式的值,若最後一個表達式或語句沒值則返回undefined
  • 否則拋出SyntaxError

    eval('3+4');                //返回7
    eval('console.log("aa")');  //打印出aa,返回undefined

• eval會改變所在局部環境的變量的值/方法

    eval('var x = 3');      //返回7
    console.log(x)          //=>3

• ECMAScript3: 使用別名調用eval 將會拋出EvalError異常
• ECMAScript5: 使用別名調用eval 將會調用全局的eval ,直接使用eval 調用的是局部的eval

    var geval = eval,
        x = 'gx',
        y = 'gy';

    function testLocal(){
        var x = 'lx'
        eval('x += "change"')
        return x;
    }       

    function testGlobal(){
        var y = 'ly'
        //使用了全局的作用域，所以改變的是全局的變量y
        geval('y += "change"')
        return y;
    }
    console.log("local:" + testLocal(), "global:" + x);  //=>local:lxchange global:gx       
    console.log("local:" + testGlobal(), "global:" + y); //=>local:ly global:gychange

4. typeof 返回右側表示式的類型的字符串

    typeof(true);  // => boolean

5. delete 刪除屬性

    //不能刪除全局屬性，繼承的屬性
    var a = {x:1,y:2}
    delete a.x;
    console.log(a);     //=>Object {y: 2}

四 語句

表達式語句 (賦值語句)

    var a,x;
    a++;
    x = 1+2+3+6;

複合語句和空語句 (語句塊)

    {
        var a = 10;
        a += 10;
        console.log(a);
    }

聲明語句(var 跟 function)

    var t = 123;
    function a(){

    }

    var b = function(){

    }

條件語句

    //1.if 語句
    var a = true;
    if(a){
        console.log('if 語句');
    }

    //2.switch 語句
    var b = 2;
    switch(b){
        case 1:
            console.log('執行1')
            break;
        case 2:
            console.log('執行2');
            console.log('執行2結束')
            break;
        case 3:
            console.log('執行3')
            break;
        default:
            console.log('default')
            break;
    }

循環語句

    //while
    var i = 0;
    while(i < 5){
        console.log(i++);
    }
    //do while
    do{
        console.log(i--);
    }while(i > 0)

    //for
    for (var j = 0; j <= 5; j++) {
        console.log(j);
    }

    //for/in 循環屬性值
    var x = {a:1, b:2};
    for(var p in x){
        console.log(p);
    }

跳轉語句

    //1標籤語句  使用break continue進行跳轉
    main:for (var i = 0; i < 5; i++){
        console.log("i:" + i);
        for(var j =0;j<5;j++){
            console.log("j:" + j);
            if(j == 2){
                continue main;
            }
        }
    }

    //2.break 退出最內層的循環語句 
    //3.continue 跳到執行下一次循環
    //4.return
    //5.throw
    //6.try/catch/finally
    try{
        console.log('try 執行');
        throw "拋出一個異常";
    }catch(err){
        console.log('捕獲一個異常');
    }finally{
        console.log('執行最後的語句');
    }

其他語句類型

    //1.with 改變作用鏈域
    with(document.forms[0]){
        name.value = "";   //相當於 document.forms[0].name.value
        address.value = "";
    }
    //2.debugger 添加一個斷點
    function test(){
        debugger;       //代碼會在這裏停止(相當於一個斷點)
        console.log('test')
    }
    test();
    //3.use strict 開啓嚴格模式

五 對象

對象創建

• 對象直接量

    var hero = {name:'Saber',skill:'Excalibur'};

• 使用new創建

    var a = new Date();

• 對象原型 Object.create()

    //對象繼承了屬性x,y,  
    var obj1 = Object.create({x:1,y:2});
    //不繼承任何屬性個方法
    var obj2 = Object.create(null);
    //繼承普通對象
    var obj3 = Object.create(Object.prototype);

屬性的訪問，刪除，檢測

    var a = {x:1,y:1};
    a.x;    // => 1
    a[x];   // => 1
    //刪除屬性
    delete a.y; 

    //檢查自身屬性
    var obj = {a:1,b:2,c:2};
    "a" in obj ;                    //=> true
    "toString" in obj;              // =>false  該屬性繼承的

    obj.hasOwnProperty('a');        // => true
    obj.hasOwnProperty('toString')  // => false  該屬性繼承的

    //不管是否繼承，判斷是否有該屬性
    obj.toString !== undefined;         //=>true

六 數組

數組的基礎操作

    //1.創建
    var array =[];
    var array1 = [1,2,3,4];
    var array2 = new Array(10); //創建一個長度爲10的數組
    var aray3 = new Array(1,2,3,4,5); //創建並初始化一個數組

    array1[0];          //獲取第一個元素
    array1[0]  = 111;   //更改該元素的值
    array.push(1);      //添加元素 

七 函數

函數調用

• 作爲函數

    //定義一個普通的函數來調用
    function test(){
        console.log('調用函數');
    }
    test();

• 作爲方法

    var people = {
        x:1,
        printX:function(){
            //這裏的this 是該對象本身
            console.log(this.x);
        }
    }
    people.printX();

• 作爲構造函數

    //帶有 new 關鍵字的調用
    var o = new Object();

• 通過call(),apply()間接調用

實參對象

    //可以用來 確定/獲取 實際的參數
    function test(x,y,z){
        console.log(arguments.length);
        console.log(arguments[0]);
        console.log(arguments[5]);

        if(x == 1){
            //callee 即代表當前函數自身
            arguments.callee(2,2,2);
        }

        //非標準
        //在一個函數調用另一個函數時，被調用函數會自動生成一個caller屬性，指向調用它的函數對象。
        //如果該函數當前未被調用，或並非被其他函數調用，則caller爲null。
        console.log(test.caller);
    }
    test(1,2,3);

    function callTest(){
        test();
    }
    callTest();

匿名函數

    //最外層添加一個括號是讓解釋器將其解析爲一個表達式，而不是定義一個函數
    (function(){
        //do something
    }());

閉包

    //廣義: 函數體的作用域保存在函數內，函數可以引用外部的作用域
    function test(){
        var a = 'outer';
        var b = 'outer'
        function inner(){
            var b = 'inner'
            console.log(a);  //=>outer
            console.log(b);  //=>inner
        }
        inner();
        console.log(b);     //=>outer
    }
    test();

    //狹義:函數體引用完之後，函數體的作用域沒用得到釋放，形成的閉包
    var a ='outer';
    function test(){
        var a = 'inner';
        function inner(){
            console.log(a)
        }
        return inner;
    }
    test()();   //=>inner 函數執行完之後，函數內的a依然存在

八 類和模塊

構造函數

    //構造函數，用以初始化對象，是類的公共標識
    function People(name){
        this.name = name;
    }

    //重寫 prototype
    People.prototype = {
        constructor:People,//顯示反向引用回構造函數
        sayMyName : function(){
            console.log('My name is ' + this.name)
        }
    }

    //修改原型的第二種方法
    People.prototype.walk = function(){
        console.log(this.name + ' walk')
    }

    var r = new People('Saber');
    r.sayMyName();
    r.walk();

    var F = function(){}
    F === F.prototype.constructor // =>true

模擬Java式繼承

    //類構造器
    function Hero(name,skill){
        //實例屬性
        this.name = name;
        this.skill = skill;
    }
    //實例方法
    Hero.prototype.useSkill = function(){
        console.log(this.name + ' use ' +this.skill)
    }
    //類方法
    Hero.special = function(){
        console.log('Hero is special');
    }
    //類常量
    Hero.TYPE = 'Hero';
    //類屬性
    Hero.number = 0;

子類

九 正則表達式的模式匹配

正則表達式的定義

    //1.使用 /...../ 定義
    var pattern = /s$/;
    //2.
    var pattern = new RegExp("s$");

正則表達式的字符類

字符	匹配
[…]	方括號內的任意字符
[^…]	不在方括號的任意字符
.	除換行符和其他Unicode行終止符之外的任意字符
\w	任何ASCII字符組成的單詞，等價於[a-zA-Z0-9]
\W	任何不是ASCII字符組成的單詞，等價於[^a-zA-Z0-9]
\s	任何Unicode空白符
\S	任何非Unicode空白符的字符，注意\w和\S不同
\d	任何ASCII數字，等價於[0-9]
\D	除了ASCII數字之外的任何字符，等價於[^0-9]
[\b]	退格直接量

正則表達式重複字符

字符	含義
{n,m}	匹配錢一項至少n次，但不能超過m次
{n,}	匹配前一項n次或者更多次
{n}	匹配前一項n次
?	匹配前一項0次或者一次，也就是說前一項是可選的，等價於{0,1}
+	匹配前一項1次或者多次，等價於{1,}
*	匹配前一項0次或者多次，等價於{0,}

選擇，分組和引用

    //  | 選擇符
    /a|b/       //->匹配 a 或者b
    //（）分組  分組操作匹配
    /a(abc)+/   //->匹配   aabcabc
    //(\數字) 匹配子模式

非貪婪重複

    //在重複字符後加一個問號爲非貪婪模式，匹配最少的數量
    /a+/        //->能匹配到aaaaa
    /a+?/       //->只能匹配到a 匹配的數量爲最少  

錨字符

字符	含義
^	匹配字符串的開頭，在多行檢索中，匹配一行的開頭
$	匹配字符串的結尾，在在多行檢索中，匹配一行的結尾
\b	匹配一個單詞的邊界，就是位於\w和\W之間的位置，或者位於\w和字符串的開頭或者結尾之間的位置
\B	匹配非邊界字符的位置

修飾符

字符	含義
i	執行不區分大小寫的匹配
g	執行一個全局匹配
m	多行匹配模式