JavaScript高级程序设计读书分享之10章——函数

JavaScript高级程序设计(第4版)读书分享笔记记录

适用于刚入门前端的同志

定义函数

定义函数有两种方式：函数声明和函数表达式

        大致看这两种方式没有什么区别，事实上，JavaScript 引擎在加载数据时对它们是区别对待的。JavaScript 引擎在任何代码执行之前，会先读取函数声明，并在执行上下文中生成函数定义。而函数表达式必须等到代码执行到它那一行，才会在执行上下文中生成函数定义。

函数声明式

栗子：

function sum (num1, num2) { 
 return num1 + num2; 
}

 函数提升

栗子：

console.log(sum(10, 10)); //20
function sum(num1, num2) { 
 return num1 + num2; 
}

        以上代码可以正常运行，因为函数声明会在任何代码执行之前先被读取并添加到执行上下文（函数声明提升）。

执行原理：

        在执行代码时，JavaScript 引擎会先执行一遍扫描， 把发现的函数声明提升到源代码树的顶部。因此即使函数定义出现在调用它们的代码之后，引擎也会把函数声明提升 到顶部

注意： 如果把前面代码中的函数声明改为等价的函数表达式，那么执行的时候就会出错。

栗子：

// 会出错
console.log(sum(10, 10)); // // Error! function doesn't exist yet
let sum = function(num1, num2) { 
 return num1 + num2; 
};

函数表达式

        函数表达式看起来就像一个普通的变量定义和赋值，即创建一个函数再把它赋值给一个变量.

这样创建的函数叫作 匿名函数（anonymous funtion ），因为 function 关键字后面没有标识符

栗子：

let functionName = function(arg0, arg1, arg2) { 
 // 函数体 
};
// or
let functionName;
functionName = function(arg0, arg1, arg2) { 
 // 函数体 
};

箭头函数

ECMAScript 6 新增了使用胖箭头（ => ）语法定义函数表达式的能力。

        很大程度上，箭头函数实例 化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数

栗子：

let arrowSum = (a, b) => { 
 return a + b; 
};
console.log(arrowSum(5, 8)); // 13

        如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号。

注意：

        箭头函数虽然语法简洁，但也有很多场合不适用。箭头函数不能使用 arguments 、super 和

new.target，也不能用作构造函数。此外，箭头函数也没有 prototype 属性。

理解参数

读取函数参数可以用到命名参数和arguments对象。

     arguments 对象是一个类数组对象，因此可以使用中括号语法访问其中的 元素（第一个参数是 arguments[0]）。而要确定传进来多少个参数，可以访问arguments.length 属性。

栗子：

function sayHi(name, message) { 
 console.log("Hello " + name + ", " + message); 
    console.log(arguments.length);
}

//等价于

function sayHi() { 
 console.log("Hello " + arguments[0] + ", " + arguments[1]); 
    console.log(arguments.length);
}


sayHi('Tom','welcome To My CSDN'); // 2

还有一个必须理解的重要方面，那就是 arguments 对象可以跟命名参数一起使用。

栗子：

function doAdd(num1, num2) { 
 if (arguments.length === 1) { 
 console.log(num1 + 10); 
 } else if (arguments.length === 2) { 
 console.log(arguments[0] + num2); 
 } 
}

arguments

        arguments 对象其实还有一个 callee 属性，是一个指向 arguments 对象所在函数的指针。

使用 arguments.callee 就可以让函数逻辑与函数名解耦

使用栗子：

function factorial(num) { 
 if (num <= 1) { 
 return 1; 
 } else { 
 return num * factorial(num - 1); 
 } 
}

//等价于
function factorial(num) { 
 if (num <= 1) { 
 return 1; 
 } else { 
 return num * arguments.callee(num - 1); //arguments.callee代表factorial
 } 
}

箭头函数中的参数

        上面提到过箭头函数，如果函数是使用箭头语法定义的，那么传给函数的参数将不能使用 arguments 关键字访问，而只能通过定义的命名参数访问。

默认参数值

ECMAScript 6 支持显式定义默认参数了。

栗子：

function makeKing(name = 'Henry') { 
 return `King ${name} VIII`; 
} 
console.log(makeKing('Louis')); // 'King Louis VIII' 
console.log(makeKing()); // 'King Henry VIII'

//箭头函数也可

let makeKing = (name = 'Henry') => `King ${name}`; 
console.log(makeKing()); // King Henry

扩展参数

在 ECMAScript 6 中，可以通过扩展操作符极为简洁地实现参数扩展。

   因为数组的长度已知，所以在使用扩展操作符传参的时候，并不妨碍在其前面或后面再传其他的值， 包括使用扩展操作符传其他参数（普通传参可以和扩展传参一起使用）

栗子：

let values = [1, 2, 3, 4]; 
function getSum() { 
 let sum = 0; 
 for (let i = 0; i < arguments.length; ++i) { 
 sum += arguments[i]; 
 } 
 return sum; 
}

console.log(getSum(...values)); // 10

//等价于  getSum(1,2,3,4)

console.log(getSum(-1, ...values)); // 9 
//等价于  getSum(-1,1,2,3,4)
console.log(getSum(...values, 5)); // 15 
console.log(getSum(-1, ...values, 5)); // 14 
console.log(getSum(...values, ...[5,6,7])); // 28
//等价于  getSum(1,2,3,4,5,6,7)

   函数内部

this

•  this，它在标准函数和箭头函数中有不同的行为。(重点)
•  在标准函数中，this 引用的是把函数当成方法调用的上下文对象，这时候通常称其为 this 值（在网页的全局上下文中调用函数时，this 指向 windows）（谁调用这个函数，this就指向谁）。

•  这个 this 到底引用哪个对象必须到函数被调用时才能确定

栗子：

window.color = 'red'; 
let o = { 
 color: 'blue' 
}; 
function sayColor() { 
 console.log(this.color); 
} 
sayColor(); // 'red' 
o.sayColor = sayColor; 
o.sayColor(); // 'blue'

• 在箭头函数中，this引用的是定义箭头函数的上下文。（箭头函数在哪里定义的，this就指向谁）

栗子：

扫描二维码关注公众号，回复： 15527058 查看本文章

this 引用的都是 window 对象，因为这个箭头函数是在 window 上下文中定义的。

window.color = 'red'; 
let o = { 
 color: 'blue' 
}; 
let sayColor = () => console.log(this.color); 
sayColor(); // 'red' 
o.sayColor = sayColor; 
o.sayColor(); // 'red'

caller

ECMAScript 5 也会给函数对象上添加一个属性： caller。这个属性引用的是调用当前函数的函数

栗子：

function outer() { 
 inner(); 
} 
function inner() { 
 console.log(inner.caller); 
} 
outer();
//前面有说过 arguments.callee 是指向arguments所在的函数，所以可以改为
function outer() { 
 inner(); 
} 
function inner() { 
 console.log(arguments.calle.caller); 
} 
outer();

打印结果：

 函数属性与方法

属性

        前面提到过，ECMAScript 中的函数是对象，因此有属性和方法。每个函数都有两个属性： length和 prototype 。

        length 属性保存函数定义的命名参数的个数

栗子：

function sayName(name) { 
 console.log(name); 
} 
function sum(num1, num2) { 
 return num1 + num2; 
} 
function sayHi() { 
 console.log("hi"); 
} 
console.log(sayName.length); // 1 
console.log(sum.length); // 2 
console.log(sayHi.length); // 0

方法

• 函数还有两个方法：apply()和 call()。

• 这两个方法都会以指定的 this 值来调用函数，即会设置调用函数时函数体内 this 对象的值。
• apply() 和 call() 真正强大的地方并不是给函数传参，而是控制函数调用上下文即函数体内 this
  值的能力。

apply() 方法接收两个参数：函数内 this 的值和一个参数数组

栗子：

window.color = 'red'; 
let o = { 
 color: 'blue' 
}; 
function sayColor(a,b,c) { 
 console.log(this.color,a,b,c); 
} 
sayColor(1,2,3); // red,1,2,3
sayColor.apply(this,[2,3,4]); // red,2,3,4
sayColor.apply(window,[2,3,4]); // red ,2,3,4
sayColor.apply(o,[2,3,4]); // blue,2,3,4

call()方法：第一个参数函数内 this 的值，而剩下的要传给被调用函数的参数则是逐个传递的。

栗子：

window.color = 'red'; 
let o = { 
 color: 'blue' 
}; 
function sayColor(a,b,c) { 
 console.log(this.color,a,b,c); 
} 
sayColor(1,2,3); // red,1,2,3
sayColor.call(this,2,3,4); // red,2,3,4
sayColor.call(window,2,3,4); // red ,2,3,4
//而在使用 sayColor.call(o)把函数的执行上下文即 this 切换为对象 o 之后，结果就变成了示"blue"了。
sayColor.call(o,2,3,4)// bule,2,3,4

总结：

1. 区别

• call传递的参数是序列1，2，3
• apply传递的参数是集合型[1，2，3]

2. 相同点

• call和apply是替换前面函数内部的this指针以及传递参数。
• 功能：可以自动执行前面的函数
• 都有两个参数：a. 替换的对象 b. 传递的值

bind()

        ECMAScript 5 出于同样的目的定义了一个新方法： bind() 。 bind() 方法会创建一个新的函数实例， 其 this 值会被 绑定 到传给 bind() 的对象。

栗子：

window.color = 'red'; 
var o = { 
 color: 'blue' 
}; 
function sayColor() { 
 console.log(this.color); 
} 
let objectSayColor = sayColor.bind(o); 
objectSayColor(); // blue