说起ECMAScript中什么最有意思,我想那莫过于函数了——而有意思的根源,则在于函数实际上是对象。每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。
如何理解函数是对象?
在JavaScript基础知识点解读—对象这篇文章的后半部分已经介绍过JavaScript中函数和对象之间的关系。
创建函数
有三种基本的函数创建方式。
// 1 使用function声明
function add(num1, num2) {
return num1 + num2;
}
// 2 函数表达式
var add = function(num1, num2) {
return num1 + num2;
}
// 3 使用new Function创建
var add = new Function("num1", "num2", "return num1 + num2"); //不推荐
创建函数的时候一定要理解在JavaScript中函数没有重载。
什么是重载?
面向对象编程语言的三大基本特征:封装,继承和多态。
实现多态的两种方式:
覆盖(重写),子类重新定义父类中的虚函数
重载,是指允许存在多个同名函数,而这些函数的参数表不同(或许参数个数不同,或许参数类型不同,或许两者都不同)。
更多的面向对象语言的特性就不做更多的解释。一定要记住JavaScript中没有重载。为什么?因为使用function声明的函数后面声明的函数会把前面声明的函数覆盖掉,同一个函数名只保留一个最后一个定义的函数体。使用var声明的函数表达同样存在覆盖的情况,看下面例子。
// 1 使用function声明函数
function addSomeNumber(num) {
return num + 100;
}
function addSomeNumber(num) {
return num + 200;
}
var result = addSomeNumber(100); // 300
// 使用函数表达式
var addSomeNumber = function(num) {
return num + 100;
};
addSomeNumber = function(num) {
return num + 100;
};
var result = addSomeNumber(100); // 300
函数声明和函数表达式
思考!函数声明和函数表达式有什么区别?
函数声明有函数提升的作用,即解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问)。至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。
// 函数声明
sum(10, 10); // 20
function sum(num1, num2) {
return num1 + num2;
}
// 函数表达式
sum(10, 10); // 报错 Uncaught TypeError: sum is not a function
var sum = function(num1, num2) {
return num1 + num2;
}
作为值的函数
在ECMAScript中,函数名本身就是变量,所以函数也可以作为值来使用。比如下面的程序。
function callSomeFunction(someFn, someArgument) {
return someFn(someArgument);
}
function add10(num) {
return num + 10;
}
var result = callSomeFunction(add10, 10);
console.log(result); // 20
这里记住函数名也是变量,和普通变量的区别是在函数名变量后面加上“()”后可以执行即可。
函数内部属性
在函数内部有两个特殊的对象:arguments和this。
arguments,是一个类数组对象,它里面存的是传入函数中的所有参数。这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。请看下面这个非常经典的阶乘函数。
function factorial(num) {
if(num <= 1) {
return 1;
} else {
return num * factorial(num - 1);
}
}
定义阶乘函数一般都要用到递归算法;如上面的代码所示,在函数有名字且名字以后也不会变的情况下,这样定义没有问题。问题是这个函数的执行与函数名factorial紧紧耦合在了一起。想要消除这种紧密耦合的现象,可以像下面这样使用arguments.callee。
function factorial(num) {
if (num <= 1){
return 1;
} else {
return num * arguments.callee(num - 1);
}
}
使用arguments.callee到底有什么作用呢?请看下面的程序。
var trueFactorial = factorial;
factorial = funciton() { return 0; };
console.log(trueFactorial(5)); // 120
console.log(factorial(5)); // 0
将factorial函数的指针赋值给trueFactorial 后,即使原函数factorial被重新定义,函数trueFactorial依然可以实现阶乘的功能。
this,是函数内部的另一个特殊对象。this引用的是函数据以执行的环境对象。说到this,顿时感觉有说不完的话要表达了。
思考!在程序执行的过程中,this到底指向(代表)了什么?
请看下面的程序,程序有些长,也可以先看下面this指向的规律后再分析程序。
// 1
var color = "red";
var obj = {
color: "blue"
};
function getColor() {
console.log(this.color);
};
getColor(); // "red"
obj.getColor = getColor;
obj.getColor(); // "blue"
// 2
function colorFull() {
var color = "yellow";
function getColor() {
console.log(this.color);
}
getColor(); // "red"
}
colorFull();
// 3
var name = "window";
var object = {
name: "object",
sayName: function() {
function innerFunction() {
console.log(this.name); // "window"
}
innerFunction();
return function() {
console.log(this.name); // "window"
}
}
}
object.sayName()();
// 4
var obj = {
value: 37,
fun: function() {
return this.value;
}
}
var fun1 = obj.fun;
console.log(fun1()); // undefined
// 原型链中的this
var obj = {
a: 2,
b: 5,
fun: function() {
return this.a + this.b;
}
}
var o = Object.create(obj);
o.a = 1;
o.b = 2;
console.log(o.fun()); // 3
// 构造函数中的this
function C() {
this.a = 1;
}
var o1 = new C();
console.log(o1.a); // 1
function C2() {
this.a = 2;
return {a: 3}
}
var o2 = new C2();
console.log(o2.a); // 3 好诡异
从上面的程序中我们可以得出使用this的几条规律。
1. this的指向是在函数执行时候确定的。
2. 函数如果有直接调用者对象(如object.fun()),那么函数内部的this执行该调用者对象(即object);如果函数没有直接调用者对象,那么函数内部的this对象指向的是window对象。原型链中的方法的this仍然指向调用它的对象
3. 构造函数的this与被创建的新对象绑定,当构造器返回的默认值是一个this引用的对象是,可以手动设置返回其他的对象,如果返回值不是一个对象,则返回this。
上面是在es5中this的使用,在es6中新增了箭头函数。箭头函数中的this指向与上述有所不同。请看下面的程序。
var name = "window";
var object = {
name: "objcet",
sayName: function() {
return () => {
console.log(this.name); // "object"
}
}
}
object.sayName()();
var anotherObject = {
name: "anotherObject"
}
/*
object.sayName()执行完后返回的箭头函数里面的this已经指向了object,此处的this已经固定不会被更改了
*/
object.sayName().call(anotherObject); // "object"
/*
object.sayName只是一个函数指针,该函数并未执行,其内部嵌套的箭头函数中的this
*/
object.sayName.call(anotherObject)(); // "anotherObject"
上面的es6中的箭头函数转换成es5,其实是下面这样的。
var name = "window";
var object = {
name: "object",
sayName: function() {
var _this = this;
return function() {
console.log(_this.name);
}
}
}
箭头函数不绑定this,它会捕捉其所在(即定义的位置)上下文的this值作为自己的this值
var adder = {
base: 1,
add: function(a) {
var f = v => v + this.base; // 此时已经确定了this的值即adder
return f(a);
}
addThruCall: funcntion(a) {
var f = v => v + this.base;
var b = {
base: 2
}
return f.call(b, a);
}
};
console.log(adder.add(1)); // 2
console.log(adder.addThruCall(1)) // 仍然 2,其内部的this并没有因为call() 而改变,其this值仍然为函数inFun的this值,指向对象adder
call(), apply(), bind()方法对于箭头函数来说只是传入参数,并不影响this的值。