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	多行匹配模式