函数
1. arguments
JavaScript另有一个免费赠予的关键字arguments,它只在函数内部起作用,而且永久指向当前函数的挪用者传入的一切参数。arguments相似Array但它不是一个Array:
function foo(x) {
alert(x); // 10
for (var i=0; i<arguments.length; i++) {
alert(arguments[i]); // 10, 20, 30
}
}
foo(10, 20, 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
2.警惕你的return语句
前面我们讲到了JavaScript引擎有一个在行末自动增加分号的机制,这能够让你栽到return语句的一个大坑:
function foo() {
return { name: 'foo' };
}
foo(); // { name: 'foo' }
假如把return语句拆成两行:
function foo() {
return
{ name: 'foo' };
}
foo(); // undefined
要警惕了,由于JavaScript引擎在行末自动增加分号的机制,上面的代码现实上变成了:
function foo() {
return; // 自动增加了分号,相当于return undefined;
{ name: 'foo' }; // 这行语句已没法实行到了
}
所以准确的多行写法是:
function foo() {
return { // 这里不会自动加分号,由于{示意语句还没有完毕
name: 'foo'
};
}
3.变量作用域
由于JavaScript的函数能够嵌套,此时,内部函数能够接见外部函数定义的变量,反过来则不可:
'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 = 1;
function bar() {
var x = 'A';
alert('x in bar() = ' + x); // 'A'
}
alert('x in foo() = ' + x); // 1
bar();
}
这申明JavaScript的函数在查找变量时从自身函数定义最先,从“内”向“外”查找。假如内部函数定义了与外部函数重名的变量,则内部函数的变量将“屏障”外部函数的变量。
4.变量提拔
JavaScript的函数定义有个特性,它会先扫描全部函数体的语句,把一切申明的变量“提拔”到函数顶部:
'use strict';
function foo() {
var x = 'Hello, ' + y;
alert(x);
var y = 'Bob';
}
foo();
虽然是strict情势,但语句var x = ‘Hello, ‘ + y;并不报错,原因是变量y在稍后说清楚明了。然则alert显现Hello, undefined,申明变量y的值为undefined。这正是由于JavaScript引擎自动提拔了变量y的声明,但不会提拔变量y的赋值。
关于上述foo()函数,JavaScript引擎看到的代码相当于:
function foo() {
var y; // 提拔变量y的申明
var x = 'Hello, ' + y;
alert(x);
y = 'Bob';
}
5.全局作用域
不在任何函数内定义的变量就具有全局作用域。现实上,JavaScript默许有一个全局对象window,全局作用域的变量现实上被绑定到window的一个属性:
'use strict';
var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript
因而,直接接见全局变量course和接见window.course是完整一样的。
你能够猜到了,由于函数定义有两种体式格局,以变量体式格局var foo = function () {}定义的函数现实上也是一个全局变量,因而,顶层函数的定义也被视为一个全局变量,并绑定到window对象:
'use strict';
function foo() {
alert('foo');
}
foo(); // 直接挪用foo()
window.foo(); // 经由过程window.foo()挪用
这申明JavaScript现实上只要一个全局作用域。任何变量(函数也视为变量),假如没有在当前函数作用域中找到,就会继承往上查找,末了假如在全局作用域中也没有找到,则报ReferenceError毛病。
6.部分作用域
由于JavaScript的变量作用域现实上是函数内部,我们在for轮回等语句块中是没法定义具有部分作用域的变量的:
'use strict';
function foo() {
for (var i=0; i<100; i++) {
//
}
i += 100; // 依然能够援用变量i
}
for轮回第一条语句声明的变量是全局变量,在for轮回表面固然能够一般运用。
为了处理块级作用域,ES6引入了新的关键字let,用let替换var能够申明一个块级作用域的变量:
'use strict';
function foo() {
var sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
i += 1; // SyntaxError
}
7.要领
在一个对象中绑定函数,称为这个对象的要领。
假如我们给xiaoming绑定一个函数,就能够做更多的事变。比方,写个age()要领,返回xiaoming的岁数:
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关键字,这个东东是什么?
在一个要领内部,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
零丁挪用函数getAge()怎样返回了NaN?请注意,我们已进入到了JavaScript的一个大坑里。
JavaScript的函数内部假如挪用了this,那末这个this究竟指向谁?
答案是,视情况而定!
假如以对象的要领情势挪用,比方xiaoming.age(),该函数的this指向被挪用的对象,也就是xiaoming,这是相符我们预期的。
假如零丁挪用函数,比方getAge(),此时,该函数的this指向全局对象,也就是window。
坑爹啊!
更坑爹的是,假如这么写:
var fn = xiaoming.age; // 先拿到xiaoming的age函数
fn(); // NaN
也是不可的!要保证this指向准确,必须用obj.xxx()的情势挪用!
由于这是一个庞大的设想毛病,要想改正可没那末简朴。ECMA决议,在strict情势下让函数的this指向undefined,因而,在strict情势下,你会获得一个毛病:
有些时刻,喜好重构的你把要领重构了一下:
'use strict';
var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - this.birth;
}
return getAgeFromBirth();
}
};
xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined
效果又报错了!原因是this指针只在age要领的函数内指向xiaoming,在函数内部定义的函数,this又指向undefined了!(在非strict情势下,它从新指向全局对象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;,你就能够放心肠在要领内部定义其他函数,而不是把一切语句都堆到一个要领中。
8.apply
虽然在一个自力的函数挪用中,依据是不是是strict情势,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。
9.装潢器
应用apply(),我们还能够动态转变函数的行动。
JavaScript的一切对象都是动态的,纵然内置的函数,我们也能够从新指向新的函数。
如今假定我们想统计一下代码一共挪用了多少次parseInt(),能够把一切的挪用都找出来,然后手动加上count += 1,不过如许做太傻了。最好计划是用我们本身的函数替换掉默许的parseInt():
var count = 0;
var oldParseInt = parseInt; // 保留原函数
window.parseInt = function () {
count += 1;
return oldParseInt.apply(null, arguments); // 挪用原函数
};
// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3