JavaScript2

JavaScript使用if () { ... } else { ... }来进行条件判断。例如，根据年龄显示不同内容，可以用if语句实现如下：

var age =20;if(age >=18) {//如果age >=18为true，则执行if语句块    alert('adult');}else{//否则执行else语句块    alert('teenager');}

其中else语句是可选的。如果语句块只包含一条语句，那么可以省略{}：

varage =20;if(age >=18)    alert('adult');elsealert('teenager');

省略{}的危险之处在于，如果后来想添加一些语句，却忘了写{}，就改变了if...else...的语义，例如：

var age =20;if(age >=18)    alert('adult');elseconsole.log('age < 18');//添加一行日志    alert('teenager');//<- 这行语句已经不在else的控制范围了

上述代码的else子句实际上只负责执行console.log('age < 18');，原有的alert('teenager');已经不属于if...else...的控制范围了，它每次都会执行。

相反地，有{}的语句就不会出错：

varage =20;if(age >=18) {    alert('adult');}else{    console.log('age < 18');    alert('teenager');}

这就是为什么我们建议永远都要写上{}。

多行条件判断

如果还要更细致地判断条件，可以使用多个if...else...的组合：

varage =3;if(age >=18) {    alert('adult');}elseif(age >=6) {    alert('teenager');}else{    alert('kid');}

上述多个if...else...的组合实际上相当于两层if...else...：

varage =3;if(age >=18) {    alert('adult');}else{if(age >=6) {        alert('teenager');    }else{        alert('kid');    }}

但是我们通常把else if连写在一起，来增加可读性。这里的else略掉了{}是没有问题的，因为它只包含一个if语句。注意最后一个单独的else不要略掉{}。

请注意，if...else...语句的执行特点是二选一，在多个if...else...语句中，如果某个条件成立，则后续就不再继续判断了。

试解释为什么下面的代码显示的是teenager：

'use strict';

var age = 20;

 Run

由于age的值为20，它实际上同时满足条件age >= 6和age >= 18，这说明条件判断的顺序非常重要。请修复后让其显示adult。

如果if的条件判断语句结果不是true或false怎么办？例如：

vars ='123';if(s.length) {// 条件计算结果为3//}

JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true，因此上述代码条件判断的结果是true。

循环

要计算1+2+3，我们可以直接写表达式：

1+2+3;//6

要计算1+2+3+...+10，勉强也能写出来。

但是，要计算1+2+3+...+10000，直接写表达式就不可能了。

为了让计算机能计算成千上万次的重复运算，我们就需要循环语句。

JavaScript的循环有两种，一种是for循环，通过初始条件、结束条件和递增条件来循环执行语句块：

varx =0;vari;for(i=1; i<=10000; i++) {    x = x + i;}x;// 50005000

让我们来分析一下for循环的控制条件：

i=1 这是初始条件，将变量i置为1；

i<=10000 这是判断条件，满足时就继续循环，不满足就退出循环；

i++ 这是每次循环后的递增条件，由于每次循环后变量i都会加1，因此它终将在若干次循环后不满足判断条件i<=10000而退出循环。

avaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。

但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题，最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范，请执行以下代码，如果浏览器报ReferenceError错误，那么你需要换一个支持ES6的浏览器：

'use strict';

var m = new Map();

var s = new Set();

console.log('你的浏览器支持Map和Set！');

 Run

Map

Map是一组键值对的结构，具有极快的查找速度。

举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：

varnames = ['Michael','Bob','Tracy'];varscores = [95,75,85];

给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。

如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下：

varm =newMap([['Michael',95], ['Bob',75], ['Tracy',85]]);m.get('Michael');// 95

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

varm =newMap();// 空Mapm.set('Adam',67);// 添加新的key-valuem.set('Bob',59);m.has('Adam');// 是否存在key 'Adam': truem.get('Adam');// 67m.delete('Adam');// 删除key 'Adam'm.get('Adam');// undefined

由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

var m = new Map();m.set('Adam',67);m.set('Adam',88);m.get('Adam'); // 88

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

vars1 =newSet();// 空Setvars2 =newSet([1,2,3]);// 含1, 2, 3

重复元素在Set中自动被过滤：

var s = newSet([1,2,3,3,'3']);s; //Set{1,2,3,"3"}

注意数字3和字符串'3'是不同的元素。

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

s.add(4);s; //Set{1,2,3,4}s.add(4);s; // 仍然是Set{1,2,3,4}

通过delete(key)方法可以删除元素：

var s = newSet([1,2,3]);s; //Set{1,2,3}s.delete(3);s; //Set{1,2}

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

for ... of循环是ES6引入的新的语法，请测试你的浏览器是否支持：

'use strict';

var a = [1, 2, 3];

for (var x of a) {

}

console.log('你的浏览器支持for ... of');

 Run

用for ... of循环遍历集合，用法如下：

vara = ['A','B','C'];vars =newSet(['A','B','C']);varm =newMap([[1,'x'], [2,'y'], [3,'z']]);for(varx of a) {// 遍历Arrayconsole.log(x);}for(varx of s) {// 遍历Setconsole.log(x);}for(varx of m) {// 遍历Mapconsole.log(x[0] +'='+ x[1]);}

你可能会有疑问，for ... of循环和for ... in循环有何区别？

for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：

vara = ['A','B','C'];a.name ='Hello';for(varxina) {    console.log(x);// '0', '1', '2', 'name'}

for ... in循环将把name包括在内，但Array的length属性却不包括在内。

for ... of循环则完全修复了这些问题，它只循环集合本身的元素：

vara = ['A','B','C'];a.name ='Hello';for(varx of a) {    console.log(x);// 'A', 'B', 'C'}

这就是为什么要引入新的for ... of循环。

然而，更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：

'use strict';

var a = ['A', 'B', 'C'];

 Run

注意，forEach()方法是ES5.1标准引入的，你需要测试浏览器是否支持。

Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：

vars =newSet(['A','B','C']);s.forEach(function(element, sameElement, set){console.log(element);});

Map的回调函数参数依次为value、key和map本身：

varm =newMap([[1,'x'], [2,'y'], [3,'z']]);m.forEach(function(value, key, map){console.log(value);});

如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们。例如，只需要获得Array的element：

vara = ['A','B','C'];a.forEach(function(element){console.log(element);});

定义函数

在JavaScript中，定义函数的方式如下：

functionabs(x){if(x >=0) {returnx;    }else{return-x;    }}

上述abs()函数的定义如下：

function指出这是一个函数定义；

abs是函数的名称；

(x)括号内列出函数的参数，多个参数以,分隔；

{ ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

请注意，函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。因此，函数内部通过条件判断和循环可以实现非常复杂的逻辑。

如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。

由于JavaScript的函数也是一个对象，上述定义的abs()函数实际上是一个函数对象，而函数名abs可以视为指向该函数的变量。

因此，第二种定义函数的方式如下：

varabs =function(x){if(x >=0) {returnx;    }else{return-x;    }};

在这种方式下，function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。

上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。

调用函数

调用函数时，按顺序传入参数即可：

abs(10);//返回10abs(-9);//返回9

由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：

abs(10,'blablabla');// 返回10abs(-9,'haha','hehe',null);// 返回9

传入的参数比定义的少也没有问题：

abs();//返回NaN

此时abs(x)函数的参数x将收到undefined，计算结果为NaN。

要避免收到undefined，可以对参数进行检查：

functionabs(x){if(typeofx !=='number') {throw'Not a number';    }if(x >=0) {returnx;    }else{return-x;    }}

arguments

JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：

'use strict'

 Run

利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：

functionabs(){if(arguments.length ===0) {return0;    }varx = arguments[0];returnx >=0? x : -x;}abs();// 0abs(10);// 10abs(-9);// 9

实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法：

// foo(a[, b], c)// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：functionfoo(a, b, c){if(arguments.length ===2) {// 实际拿到的参数是a和b，c为undefinedc = b;// 把b赋给cb =null;// b变为默认值}// ...}

要把中间的参数b变为“可选”参数，就只能通过arguments判断，然后重新调整参数并赋值。

rest参数

由于JavaScript函数允许接收任意个参数，于是我们就不得不用arguments来获取所有参数：

functionfoo(a, b){vari, rest = [];if(arguments.length >2) {for(i =2; i

为了获取除了已定义参数a、b之外的参数，我们不得不用arguments，并且循环要从索引2开始以便排除前两个参数，这种写法很别扭，只是为了获得额外的rest参数，有没有更好的方法？

ES6标准引入了rest参数，上面的函数可以改写为：

functionfoo(a, b, ...rest){console.log('a = '+ a);    console.log('b = '+ b);    console.log(rest);}foo(1,2,3,4,5);// 结果:// a = 1// b = 2// Array [ 3, 4, 5 ]foo(1);// 结果:// a = 1// b = undefined// Array []

rest参数只能写在最后，前面用...标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest，所以，不再需要arguments我们就获取了全部参数。

如果传入的参数连正常定义的参数都没填满，也不要紧，rest参数会接收一个空数组（注意不是undefined）。

因为rest参数是ES6新标准，所以你需要测试一下浏览器是否支持。请用rest参数编写一个sum()函数，接收任意个参数并返回它们的和：

'use strict';

// 测试:

var i, args = [];

for (i=1; i<=100; i++) {

    args.push(i);

}

if (sum() !== 0) {

    console.log('测试失败: sum() = ' + sum());

} else if (sum(1) !== 1) {

    console.log('测试失败: sum(1) = ' + sum(1));

} else if (sum(2, 3) !== 5) {

    console.log('测试失败: sum(2, 3) = ' + sum(2, 3));

} else if (sum.apply(null, args) !== 5050) {

    console.log('测试失败: sum(1, 2, 3, ..., 100) = ' + sum.apply(null, args));

} else {

    console.log('测试通过!');

}

 Run

小心你的return语句

前面我们讲到了JavaScript引擎有一个在行末自动添加分号的机制，这可能让你栽到return语句的一个大坑：

functionfoo(){return{ name:'foo'};}foo();// { name: 'foo' }

如果把return语句拆成两行：

functionfoo(){return{ name:'foo'};}foo();// undefined

要小心了，由于JavaScript引擎在行末自动添加分号的机制，上面的代码实际上变成了：

functionfoo(){return;// 自动添加了分号，相当于return undefined;{ name:'foo'};// 这行语句已经没法执行到了}

所以正确的多行写法是：

functionfoo(){return{// 这里不会自动加分号，因为{表示语句尚未结束name:'foo'};}

练习

定义一个计算圆面积的函数area_of_circle()，它有两个参数：

r: 表示圆的半径；

pi: 表示π的值，如果不传，则默认3.14

'use strict';

function area_of_circle(r, pi) {

}

// 测试:

if (area_of_circle(2) === 12.56 && area_of_circle(2, 3.1416) === 12.5664) {

    console.log('测试通过');

} else {

    console.log('测试失败');

}

 Run

在JavaScript中，用var申明的变量实际上是有作用域的。

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

'use strict';functionfoo(){varx =1;    x = x +1;}x = x +2;// ReferenceError! 无法在函数体外引用变量x

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

'use strict';functionfoo(){varx =1;    x = x +1;}functionbar(){varx ='A';    x = x +'B';}

由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：

'use strict';functionfoo(){varx =1;functionbar(){vary = x +1;// bar可以访问foo的变量x!}varz = y +1;// ReferenceError! foo不可以访问bar的变量y!}

如果内部函数和外部函数的变量名重名怎么办？来测试一下：

'use strict';

 Run

这说明JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

变量提升

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：

'use strict';functionfoo(){varx ='Hello, '+ y;    console.log(x);vary ='Bob';}foo();

虽然是strict模式，但语句var x = 'Hello, ' + y;并不报错，原因是变量y在稍后申明了。但是console.log显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。

对于上述foo()函数，JavaScript引擎看到的代码相当于：

functionfoo(){vary;// 提升变量y的申明，此时y为undefinedvarx ='Hello, '+ y;    console.log(x);    y ='Bob';}

由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：

functionfoo(){varx =1,// x初始化为1y = x +1,// y初始化为2z, i;// z和i为undefined// 其他语句:for(i=0; i<100; i++) {        ...    }}

全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：

'use strict';varcourse ='Learn JavaScript';alert(course);// 'Learn JavaScript'alert(window.course);// 'Learn JavaScript'

因此，直接访问全局变量course和访问window.course是完全一样的。

你可能猜到了，由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：

'use strict';functionfoo(){alert('foo');}foo();// 直接调用foo()window.foo();// 通过window.foo()调用

进一步大胆地猜测，我们每次直接调用的alert()函数其实也是window的一个变量：

'use strict';

window.alert('调用window.alert()');

// 把alert保存到另一个变量:

var old_alert = window.alert;

// 给alert赋一个新函数:

window.alert = function () {}

// 恢复alert:

window.alert = old_alert;

alert('又可以用alert()了!');

 Run

这说明JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。

名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:varMYAPP = {};// 其他变量:MYAPP.name ='myapp';MYAPP.version =1.0;// 其他函数:MYAPP.foo =function(){return'foo';};

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

局部作用域

由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：

'use strict';functionfoo(){for(vari=0; i<100; i++) {//}    i +=100;// 仍然可以引用变量i}

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

'use strict';functionfoo(){varsum =0;for(leti=0; i<100; i++) {        sum += i;    }// SyntaxError:i +=1;}

常量

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：

varPI =3.14;

ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

'use strict';constPI =3.14;PI =3;// 某些浏览器不报错，但是无效果！PI;// 3.14

解构赋值

从ES6开始，JavaScript引入了解构赋值，可以同时对一组变量进行赋值。

什么是解构赋值？我们先看看传统的做法，如何把一个数组的元素分别赋值给几个变量：

vararray= ['hello','JavaScript','ES6'];varx =array[0];vary =array[1];varz =array[2];

现在，在ES6中，可以使用解构赋值，直接对多个变量同时赋值：

'use strict';

// 如果浏览器支持解构赋值就不会报错:

var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

 Run

注意，对数组元素进行解构赋值时，多个变量要用[...]括起来。

如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致：

let[x, [y, z]] = ['hello', ['JavaScript','ES6']];x;// 'hello'y;// 'JavaScript'z;// 'ES6'

解构赋值还可以忽略某些元素：

let[, , z] = ['hello','JavaScript','ES6'];// 忽略前两个元素，只对z赋值第三个元素z;// 'ES6'

如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性：

'use strict';

var person = {

    name: '小明',

    age: 20,

    gender: 'male',

    passport: 'G-12345678',

    school: 'No.4 middle school'

};

var {name, age, passport} = person;

 Run

对一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值，只要保证对应的层次是一致的：

varperson = {    name:'小明',    age:20,    gender:'male',    passport:'G-12345678',    school:'No.4 middle school',    address: {        city:'Beijing',        street:'No.1 Road',        zipcode:'100001'}};var{name, address: {city, zip}} = person;name;// '小明'city;// 'Beijing'zip;// undefined, 因为属性名是zipcode而不是zip// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:address;// Uncaught ReferenceError: address is not defined

使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致，可以用下面的语法获取：

varperson = {    name:'小明',    age:20,    gender:'male',    passport:'G-12345678',    school:'No.4 middle school'};// 把passport属性赋值给变量id:let{name, passport:id} = person;name;// '小明'id;// 'G-12345678'// 注意: passport不是变量，而是为了让变量id获得passport属性:passport;// Uncaught ReferenceError: passport is not defined

解构赋值还可以使用默认值，这样就避免了不存在的属性返回undefined的问题：

varperson = {    name:'小明',    age:20,    gender:'male',    passport:'G-12345678'};// 如果person对象没有single属性，默认赋值为true:var{name, single=true} = person;name;// '小明'single;// true

有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：

// 声明变量:varx, y;// 解构赋值:{x, y} = { name:'小明', x:100, y:200};// 语法错误: Uncaught SyntaxError: Unexpected token =

这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：

({x, y} = { name: '小明', x: 100, y: 200});

使用场景

解构赋值在很多时候可以大大简化代码。例如，交换两个变量x和y的值，可以这么写，不再需要临时变量：

varx=1, y=2;[x, y] = [y, x]

快速获取当前页面的域名和路径：

var{hostname:domain, pathname:path} = location;

如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中。例如，下面的函数可以快速创建一个Date对象：

functionbuildDate({year, month, day, hour=0, minute=0, second=0}){returnnewDate(year +'-'+ month +'-'+ day +' '+ hour +':'+ minute +':'+ second);}

它的方便之处在于传入的对象只需要year、month和day这三个属性：

buildDate({year:2017,month:1,day:1});//SunJan01201700:00:00GMT+0800(CST)

也可以传入hour、minute和second属性：

buildDate({year:2017,month:1,day:1,hour:20,minute:15});//SunJan01201720:15:00GMT+0800(CST)

使用解构赋值可以减少代码量，但是，需要在支持ES6解构赋值特性的现代浏览器中才能正常运行。目前支持解构赋值的浏览器包括Chrome，Firefox，Edge等。

在一个对象中绑定函数，称为这个对象的方法。

在JavaScript中，对象的定义是这样的：

varxiaoming = {    name:'小明',    birth:1990};

但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：

varxiaoming = {    name:'小明',    birth:1990,    age:function(){vary =newDate().getFullYear();returny -this.birth;    }};xiaoming.age;// function xiaoming.age()xiaoming.age();// 今年调用是25,明年调用就变成26了

绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个this关键字，这个东东是什么？

在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。

让我们拆开写：

functiongetAge(){vary =newDate().getFullYear();returny -this.birth;}varxiaoming = {    name:'小明',    birth:1990,    age: getAge};xiaoming.age();// 25, 正常结果getAge();// NaN

单独调用函数getAge()怎么返回了NaN？请注意，我们已经进入到了JavaScript的一个大坑里。

JavaScript的函数内部如果调用了this，那么这个this到底指向谁？

答案是，视情况而定！

如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。

如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

坑爹啊！

更坑爹的是，如果这么写：

varfn = xiaoming.age;// 先拿到xiaoming的age函数fn();// NaN

也是不行的！要保证this指向正确，必须用obj.xxx()的形式调用！

由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，在strict模式下让函数的this指向undefined，因此，在strict模式下，你会得到一个错误：

'use strict';varxiaoming = {    name:'小明',    birth:1990,    age:function(){vary =newDate().getFullYear();returny -this.birth;    }};varfn = xiaoming.age;fn();// Uncaught TypeError: Cannot read property 'birth' of undefined

这个决定只是让错误及时暴露出来，并没有解决this应该指向的正确位置。

有些时候，喜欢重构的你把方法重构了一下：

'use strict';varxiaoming = {    name:'小明',    birth:1990,    age:function(){functiongetAgeFromBirth(){vary =newDate().getFullYear();returny -this.birth;        }returngetAgeFromBirth();    }};xiaoming.age();// Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）

修复的办法也不是没有，我们用一个that变量首先捕获this：

'use strict';varxiaoming = {    name:'小明',    birth:1990,    age:function(){varthat =this;// 在方法内部一开始就捕获thisfunctiongetAgeFromBirth(){vary =newDate().getFullYear();returny - that.birth;// 用that而不是this}returngetAgeFromBirth();    }};xiaoming.age();// 25

用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

apply

虽然在一个独立的函数调用中，根据是否是strict模式，this指向undefined或window，不过，我们还是可以控制this的指向的！

要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。

用apply修复getAge()调用：

functiongetAge(){vary =newDate().getFullYear();returny -this.birth;}varxiaoming = {    name:'小明',    birth:1990,    age: getAge};xiaoming.age();// 25getAge.apply(xiaoming, []);// 25, this指向xiaoming, 参数为空

另一个与apply()类似的方法是call()，唯一区别是：

apply()把参数打包成Array再传入；

call()把参数按顺序传入。

比如调用Math.max(3, 5, 4)，分别用apply()和call()实现如下：

Math.max.apply(null, [3,5,4]);// 5Math.max.call(null,3,5,4);// 5

对普通函数调用，我们通常把this绑定为null。

装饰器

利用apply()，我们还可以动态改变函数的行为。

JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。

现在假定我们想统计一下代码一共调用了多少次parseInt()，可以把所有的调用都找出来，然后手动加上count += 1，不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()：

'use strict';

var count = 0;

var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {

    count += 1;

    return oldParseInt.apply(null, arguments); // 调用原函数

};

 Run