function functionName() { //codes }
return
时,函数就执行完毕return
语句,函数执行完毕后也会返回结果,只是结果为undefined
function abs(x) { if (x >= 0) { return x; } else { return -x; } }
function (x) { ... }
是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量abs
,所以,通过变量abs
就可以调用该函数var abs = function (x) { if (x >= 0) { return x; } else { return -x; } };
function abs(x) { if (x >= 0) { return x; } else { return -x; } } >>> abs(10); // 返回10 abs(-9); // 返回9
abs(10, 'blablabla'); // 返回10 abs(-9, 'haha', 'hehe', null); // 返回9
abs(); // 返回NaN
undefined
function abs(x) { if (typeof x !== 'number') { throw 'Not a number'; } if (x >= 0) { return x; } else { return -x; } }
arguments
function myFunction(arg1, arg2,...) { //codes }
arguments
,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。arguments
类似Array
但它不是一个Array
'use strict'; function foo(x) { console.log('x = ' + x); // 10 for (var i=0; i<arguments.length; i++) { console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30 } } foo(10, 20, 30); >>> x = 10 arg 0 = 10 arg 1 = 20 arg 2 = 30
利用arguments,你可以获得调用者传入的所有参数。也就是说,即使函数不定义任何参数,还是可以拿到参数的值: function abs() { if (arguments.length === 0) { return 0; } var x = arguments[0]; return x >= 0 ? x : -x; } >>> abs(); // 0 abs(10); // 10 abs(-9); // 9
// foo(a[, b], c) // 接收2~3个参数,b是可选参数,如果只传2个参数,b默认为null: function foo(a, b, c) { if (arguments.length === 2) { // 实际拿到的参数是a和b,c为undefined c = b; // 把b赋给c b = null; // b变为默认值 } // ... }
要把中间的参数
b
变为“可选”参数,就只能通过arguments
判断,然后重新调整参数并赋值
arguments
来获取所有参数:function foo(a, b) { var i, rest = []; if (arguments.length > 2) { for (i = 2; i<arguments.length; i++) { rest.push(arguments[i]); } } console.log('a = ' + a); console.log('b = ' + b); console.log(rest); }
为了获取除了已定义参数a
、b
之外的参数,我们不得不用arguments
,并且循环要从索引2
开始以便排除前两个参数,这种写法很别扭,只是为了获得额外的rest
参数,有没有更好的方法?
rest参数只能写在最后,前面用...
标识,从运行结果可知,传入的参数先绑定a
、b
,多余的参数以数组形式交给变量rest
,所以,不再需要arguments
我们就获取了全部参数
function foo(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 []
'use strict'; function sum(...rest) { var sum = 0; for (let i=0; i<rest.length; i++) { sum += rest[i]; } return sum; }; 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('测试通过!'); }
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
'use strict'; function foo() { var x = 1; x = x + 1; } x = x + 2; // ReferenceError! 无法在函数体外引用变量x
'use strict'; function foo() { var x = 1; x = x + 1; } function bar() { var x = 'A'; x = x + 'B'; }
'use strict'; function foo() { var x = 1; function bar() { var y = x + 1; // bar可以访问foo的变量x! } var z = y + 1; // ReferenceError! foo不可以访问bar的变量y! }
'use strict'; function foo() { var x = 'Hello, ' + y; console.log(x); var y = 'Bob'; } foo();
虽然是strict模式,但语句
var x = 'Hello, ' + y;
并不报错,原因是变量y
在稍后申明了。但是console.log
显示Hello, undefined
,说明变量y
的值为undefined
。这正是因为JavaScript引擎自动提升了变量y
的声明,但不会提升变量y
的赋值
- 对于上述
foo()
函数,JavaScript引擎看到的代码相当于:
function foo() { var y; // 提升变量y的申明,此时y为undefined var x = 'Hello, ' + y; console.log(x); y = 'Bob'; }
不在任何函数内定义的变量就具有全局作用域。实际上,JavaScript默认有一个全局对象window
,全局作用域的变量实际上被绑定到window
的一个属性
'use strict'; var course = 'Learn JavaScript'; alert(course); // 'Learn JavaScript' alert(window.course); // 'Learn JavaScript'
var foo = function () {}
定义的函数实际上也是一个全局变量,因此,顶层函数的定义也被视为一个全局变量,并绑定到window
对象'use strict'; function foo() { alert('foo'); } foo(); // 直接调用foo() window.foo(); // 通过window.foo()调用
// 唯一的全局变量MYAPP: var MYAPP = {}; // 其他变量: MYAPP.name = 'myapp'; MYAPP.version = 1.0; // 其他函数: MYAPP.foo = function () { return 'foo'; };
for
循环等语句块中是无法定义具有局部作用域的变量的'use strict'; function foo() { for (var i=0; i<100; i++) { // } i += 100; // 仍然可以引用变量i }
为了解决块级作用域,ES6引入了新的关键字let
,用let
替代var
可以申明一个块级作用域的变量, 即在函数内部有效
'use strict'; function foo() { var sum = 0; for (let i=0; i<100; i++) { sum += i; } // SyntaxError: i += 1; }
var
和let
申明的是变量const
来定义常量,const
与let
都具有块级作用域'use strict'; const PI = 3.14; PI = 3; // 某些浏览器不报错,但是无效果! PI; // 3.14
var array = ['hello', 'JavaScript', 'ES6']; var x = array[0]; var y = array[1]; var z = array[2];
'use strict' var [x, y, z] = ['hello', 'Javascript', 'ES6'] console.log('x = ' + x + ', y = ' + y + ', z = ' + z) >>> x = hello, y = Javascript, z = ES6
let [x, [y, z]] = ['hello', ['Javascript', 'ES6']]; x; // 'hello' y; // 'Javascript' z; // 'ES6'
let [, , z] = ['hello', 'Javascript', 'ES6']; z; // 'ES6'
'use strict'; var person = { name: 'Rick', age: 18, gender: 'male' }; var {name, age, gender} = person console.log('name = ' + name + ', age = ' + age + ', gender = ' + gender); >>> name = Rick, age = 18, gender = male
var person = { 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
是一致的。如果要使用的变量名和属性名不一致,可以用下面的语法获取var person = { 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
的问题var person = { name: '小明', age: 20, gender: 'male', passport: 'G-12345678' }; // 如果person对象没有single属性,默认赋值为true: var {name, single=true} = person; name; // '小明' single; // true
// 声明变量: var x, y; // 解构赋值: {x, y} = { name: '小明', x: 100, y: 200}; // 语法错误: Uncaught SyntaxError: Unexpected token =
{
开头的语句当作了块处理,于是=
不再合法。解决方法是用小括号括起来:({x, y} = { name: '小明', x: 100, y: 200});
var x=1, y=2; [x, y] = [y, x]
var {hostname:domain, pathname:path} = location;
Date
对象function buildDate({year, month, day, hour=0, minute=0, second=0}) { return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second); } buildDate({ year: 2017, month: 1, day: 1 }); >>> Sun Jan 01 2017 00:00:00 GMT+0800 (CST) buildDate({ year: 2017, month: 1, day: 1, hour: 20, minute: 15 }); >>> Sun Jan 01 2017 20:15:00 GMT+0800 (CST)
this
关键字var xiaoming = { name: '小明', birth: 1990, age: function () { var y = new Date().getFullYear(); return y - this.birth; } }; xiaoming.age; // function xiaoming.age() xiaoming.age(); // 今年调用是25,明年调用就变成26了
在一个方法内部,this
是一个特殊变量,它始终指向当前对象,也就是xiaoming
这个变量。所以,this.birth
可以拿到xiaoming
的birth
属性。
让我们拆开写:
function getAge() { var y = new Date().getFullYear(); return y - this.birth; } var xiaoming = { name: '小明', birth: 1990, age: getAge }; xiaoming.age(); // 25, 正常结果 getAge(); // NaN
JavaScript的函数内部如果调用了
this
,那么这个this
到底指向谁?答案是,视情况而定!
如果以对象的方法形式调用,比如
xiaoming.age()
,该函数的this
指向被调用的对象,也就是xiaoming
,这是符合我们预期的。如果单独调用函数,比如
getAge()
,此时,该函数的this
指向全局对象,也就是window
that
变量首先捕获this
'use strict'; var xiaoming = { name: '小明', birth: 1990, age: function () { var that = this; // 在方法内部一开始就捕获this function getAgeFromBirth() { var y = new Date().getFullYear(); return y - that.birth; // 用that而不是this } return getAgeFromBirth(); } }; xiaoming.age(); // 25
用
var that = this;
,你就可以放心地在方法内部定义其他函数,而不是把所有语句都堆到一个方法中
this
指向undefined
或window
,不过,我们还是可以控制this
的指向的!要指定函数的this
指向哪个对象,可以用函数本身的apply
方法,它接收两个参数,第一个参数就是需要绑定的this
变量,第二个参数是Array
,表示函数本身的参数。
apply
修复getAge()
调用:function getAge() { var y = new Date().getFullYear(); return y - this.birth; } var xiaoming = { name: '小明', birth: 1990, age: getAge }; xiaoming.age(); // 25 getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空
另一个与apply()
类似的方法是call()
,唯一区别是:
apply()
把参数打包成Array
再传入;
call()
把参数按顺序传入。Math.max(3, 5, 4)
,分别用apply()
和call()
实现如下:Math.max.apply(null, [3, 5, 4]); // 5 Math.max.call(null, 3, 5, 4); // 5
对普通函数调用,我们通常把
this
绑定为null
apply()
,我们还可以动态改变函数的行为。parseInt()
,可以把所有的调用都找出来,然后手动加上count += 1
,不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()
'use strict'; var count = 0; var oldParseInt = parseInt; // 保存原函数 window.parseInt = function () { count += 1; return oldParseInt.apply(null, arguments); // 调用原函数 }; // 测试: parseInt('10'); parseInt('20'); parseInt('30'); console.log('count = ' + count); // 3