javascript进阶笔记(1)

学习js已经有一段时间了，大大小小还是能够做出一些东西来。不过觉得可惜的是，还是对js本身这门语言不是很熟悉，总有一点雾里看花的感觉，看得见，但是看不清楚。最近发现有一本关于js的叫做《忍者秘籍》的书刊，听说是jQuery作者写的，可以让初级者进阶，哇啦啦，打怪兽，加经验升级，多好的事情。于是，就有了此篇文章及其后续。闲话休谈，正事要紧！

javascript是一门函数式语言(functional language)。最重要的，在js中，函数是第一型对象(first-class object)，也就是说，函数可以共处，可以将其视为其他任意类型的javascript对象。就像普通的js数据类型，函数可以被任意变量进行引用，或声明成对象字面量，甚至可以将其作为函数参数进行传递。

函数的第一型对象体现在：

1、它们可以通过字面量进行创建；

2、它们可以赋值给变量、数组或其他对象的属性；

3、它们可以作为参数传递给函数；

4、它们可以作为函数的返回值进行返回；

5、它们拥有动态创建并赋值的属性。

函数除了以上的功能外，它还包含一个功能，它们可以被调用。千万不要小瞧了函数的调用！因为不同的调用机制会产生不同的功效，特别是针对函数的this关键字。

当我们定义了一个函数，以便其他一些代码在适当的时候回头调用它，我们可以称之为回调。回调是高效利用js必不可少的一部分。

js函数是使用函数字面量(function literal)进行声明从而创建函数值的。例如：

function method(){}

一个函数的创建，由四个部分组成：

1、function 关键字；

2、函数名称，为可选。没有名称的函数称为匿名函数；

3、圆括号包含的一个以逗号分隔的参数列表，该参数列表可以为空，但是圆括号必须存在；

4、大括号包含的函数体。函数体可以为空，但大括号必须存在。

所有的函数都有一个name属性，该name属性值是该函数名称的字符串。没有名称的函数也有name属性，只是该属性值为空字符串。

//该函数的name属性值为Method
function Method(){}

//通过匿名函数赋值的情况，该函数的name属性值为空字符串，因为function关键字后面没有函数名称
var method=function(){};

//该函数的name属性值为method，因为该函数声明中，包含了函数名称
var fun=function method(){}

当我们声明一个函数时，我们不仅要关注该函数可用的作用域，还要关注该函数自身所创建的作用域，以及函数内部的声明是如何影响这些作用域的。

js不同于其他面向对象语言，在js中，作用域是由function进行声明的，而不是代码块。或许有的变量或函数声明于代码块，但不终结于该代码块。例如：

function method(value){
    //虽然变量i在for代码块中声明，但是变量i的作用域离开了该for代码块也存在，一直到method函数体结尾，下面在if代码块中声明的变量a也是一个道理
    for(var i=;i<;i++){

    }
    alert(i);//10
    
    alert(a);//undefined
    a=2;
    alert(a);//2
    if(true){
        var a=;
    }
    alert(a);//
}

关于变量和函数声明的作用域：

1、变量声明的作用域开始于声明的地方，结束于所在函数的结尾，与代码嵌套无关。值得注意的是，只要在该函数中，变量在其声明之前，还是可以通过对其赋值进行调用，如果不对其进行赋值，那么该变量值为undefined，列子如上面method函数中的变量a；

2、命名函数的作用域是指声明该函数的整个函数范围，与代码嵌套无关。说的就是函数声明提升机制。

3、对于作用域声明，全局上下文就像一个包含页面所有代码的超大型函数。

每个声明项的作用域不仅取决于它的声明，还取决于它是变量还是函数。

在编写js代码时，我们都是称调用js函数，但是，能否应该停下来想一想，函数被调用时，到底发生了什么？

事实证明，函数调用的方式对其函数内部的代码是如何执行的，有着巨大的影响，尤其是针对this参数，这是非常重要的。

实际上，有四种不同的方式可以进行函数调用，每种方式都有它们自己细微的差别：

1、作为一个普通函数进行调用，这是最简单的形式。如：method()；

2、作为一个对象的方法进行调用，支持面向对象编程。如：person.setName()；

3、作为构造器进行调用，创建一个新对象。如：new Person()；

4、通过apply()或call()方法进行调用。如：[].slice.call(argument,0,3)。

在研究函数调用之前，我们先来看函数的参数传递。当一个参数列表作为函数调用的一部分时，这些参数会按照函数声明里的形参声明顺序，将参数值分别赋给这些形参。第一个参数赋值给第一个形参，第二个参数赋值给第二个形参，以此类推。

如果传入的参数与形参的个数不一致，怎么办？别担心，山人自有妙计：

1、如果实际传递的参数数量大于函数声明的形参数量，超出的参数则不会配给形参；

2、如果实际传递的参数数量小于形参数量，则没有对应参数的形参会被赋值为undefined。

在参数传递的时候，有一个非常有趣且非常有用的现象，所有的函数调用都会传递两个隐式参数：arguments和this。所谓的隐式，也就意味着两个参数不会显示在函数签名里，但是它们默默地传递给函数并存在于函数的作用域内。在函数内部，它们可以像其他显示命名的参数一样使用。

arguments参数：这是传递给函数的所有参数的一个集合。该集合拥有length属性，length值为全部参数的个数。我们可以通过for循环遍历出每个参数值，也可以像访问数组一样通过索引去获取其中的某个参数值。例如argument[0]就是获取第一个参数值。在这里，请注意，arguments不是数组！arguments不是数组！arguments不是数组！重要的事情说三遍。它就像一个类数组结构。

this参数：一个函数被调用时，除了传入函数的显示参数外，名为this的隐式参数也被传入了函数。this参数引用了与该函数调用进行隐式关联的一个对象，被称之为函数上下文(function context)。请注意，js中的this依赖于函数的调用方式。

如果一个函数作为普通函数进行调用，也就是例如method()这种，一个函数名称加上圆括号的样式。以这种方式进行调用时，函数的上下文是全局上下文，也就是说隐式传入的this是window对象。

如果将一个函数作为对象的方法进行调用，例如person.setName()这种，则该person对象就变成了setName函数的上下文。也就是说一个方法所属的对象在该方法体内可以以this的形式进行引用。说得通俗一点，传入该对象方法的this是当前调用该方法的对象，也就是person。

注意：相同的函数，其函数上下文(this)会随着函数调用方式的变化而变化，而不是取决于函数是怎样声明的。因为一个函数，可以被当做普通函数调用，也可以赋值给一个对象的方法。

将函数作为一个构造器进行调用，其实它并没有什么特别的地方。只是，构造器函数的声明和其他函数有点不大一样，不同的地方是在于如何调用该函数。将函数作为构造器(constructor)进行调用，我们要在函数名称前使用new关键字，例如：new Person()。

将函数作为构造器进行调用，是js的一个超级特性，因为构造器调用时，会发生如下行为：

1、创建一个新的空对象；

2、将该新的空对象当做this参数传递给构造器函数，从而成为该构造器的函数上下文(this)；

3、如果该构造器函数没有显示的返回值，则新创建的对象就会作为构造器的返回值进行返回。

请注意：构造器的目的是要创建一个新对象并对其进行设置，然后将其作为构造器的返回值进行返回。任何干扰或者不存在这种意图的函数，都不适合作为构造器函数。

我们可以用以下代码来测试：

//声明一个构造器函数
function Person(){
    this.showSelf=function(){return this;};
}

//创建一个对象
var p=new Person();

if(p===p.showSelf())
    alert("OK!");
else
    alert("Fail!");

//OK!

//解析以上代码
//首先声明一个构造器函数Person
//接着，用new调用构造器函数Person，并创建一个对象p
//当构造器函数Person被调用时：
//1.创建一个新的空对象
//2.将新创建的对象当做this参数隐式传递给构造器函数Person。然后在Person内部，this新增了一个方法showSelf
//3.将该新创建的对象当做返回值，并赋值给p变量
//p对象和p.showSelf方法返回的this指向的是同一个对象，因此它们真相等！

由于构造器的编码和使用方式不同于其他函数，除了作为构造器调用之外，通常它们也不是全部都那么有用，因此命名约定的出现是为了区别构造器和其他普通函数的方法。一般函数的命名以动词开头，比如setName、getName之类的。而构造器的名称通常是由一个描述所构造对象的名词来命名，如Person。

在函数调用的时候，js为我们提供了一种方式，就是可以显示指定任何一个对象作为其函数上下文。js中的每个函数都有apply()和call()方法。使用其中一个方法，我们都可以实现这种功能。有的同学会迷惑，为啥函数也有它们自己的方法呢？因为作为第一型对象(透个底，它是由Function()构造器创建的)，函数可以像其他任何类型的对象一样，拥有属性和方法。

通过函数的apply()方法来调用函数，我们要给apply()传递两个参数：第一个是函数上下文，也就是this参数，另外一个是作为函数参数所组成的数组。call()方法与此非常类似，唯一不同的就是，给函数传入的参数是一个参数列表，而不是单个数组。如以下代码所示：

function sum(){
    var result=;
    for(var i=;i<arguments.length;i++)
        result+=arguments[i];
    this.result=result;
}

var obj1={},obj2={};
sum.call(obj1,,,,);
sum.call(obj2,,);

alert(obj1.result);//
alert(obj2.result);//11

//其实函数调用apply或call方法，就是显示指定传给函数的this和arguments参数

使用apply()和call()方法，我们可以选择任意对象作为函数的上下文(this)。

我们可以通过apply()或call()方法，给回调函数强制指定函数上下文，也就是this参数。如下代码所示：

//给callback强制指定其this参数为list数组的每个迭代的元素，arguments为当前迭代元素的索引
function forEach(list,callback){
    for(var i=;i<list.length;i++)
        callback.call(list[i],i);
}

var names=['小明','小花','小萌'];

//回调函数的this参数就是names数组的单个元素
forEach(names,function(index){
    console.log("大家好，我是"+this);
});

//大家好，我是小明
//大家好，我是小花
//大家好，我是小萌