1 进阶:函数
- 函数的 5 种声明
- 如何调用函数 f.call
- this 和 arguments
- 什么是 call stack
- 作用域
- 闭包
2 函数的 5 种声明
1. 具名函数
2. function f(x,y){
3. return x+y
4. }
5. f.name // 'f'
6. 匿名函数
7. var f
8. f = function(x,y){
9. return x+y
10. }
11. f.name // 'f'
12. 具名函数赋值
13. var f
14. f = function f2(x,y){ return x+y }
15. f.name // 'f2'
16. console.log(f2) // undefined
17. window.Function
18. var f = new Function('x','y','return x+y')
19. f.name // "anonymous"
20. 箭头函数
21. var f = (x,y) => {
22. return x+y
23. }
24. var sum = (x,y) => x+y
25. var n2 = n => n*n
函数的name属性
函数的名字:记下来,如下图
3 如何调用函数
f.call(asThis, input1,input2)
其中 asThis 会被当做 this,[input1,input2] 会被当做 arguments
禁止使用 f(input1, input2)
4 this 和 arguments
function f(){
'use strict'
console.log(this)
console.log(arguments)
return undefined
}
f.call(1,2,3) // this 为 1,arguments 为 [2,3]
5 什么是 call stack
• 普通调用 http://latentflip.com/loupe/?code=ZnVuY3Rpb24gYSgpewogICAgY29uc29sZS5sb2coJ2EnKQogIHJldHVybiAnYScgIAp9CgpmdW5jdGlvbiBiKCl7CiAgICBjb25zb2xlLmxvZygnYicpCiAgICByZXR1cm4gJ2InCn0KCmZ1bmN0aW9uIGMoKXsKICAgIGNvbnNvbGUubG9nKCdjJykKICAgIHJldHVybiAnYycKfQoKYS5jYWxsKCkKYi5jYWxsKCkKYy5jYWxsKCk%3D!!!
• 嵌套调用 http://latentflip.com/loupe/?code=ZnVuY3Rpb24gYSgpewogICAgY29uc29sZS5sb2coJ2ExJykKICAgIGIuY2FsbCgpCiAgICBjb25zb2xlLmxvZygnYTInKQogIHJldHVybiAnYScgIAp9CmZ1bmN0aW9uIGIoKXsKICAgIGNvbnNvbGUubG9nKCdiMScpCiAgICBjLmNhbGwoKQogICAgY29uc29sZS5sb2coJ2IyJykKICAgIHJldHVybiAnYicKfQpmdW5jdGlvbiBjKCl7CiAgICBjb25zb2xlLmxvZygnYycpCiAgICByZXR1cm4gJ2MnCn0KYS5jYWxsKCkKY29uc29sZS5sb2coJ2VuZCcp!!!
• 递归调用 http://latentflip.com/loupe/?code=ZnVuY3Rpb24gc3VtKG4pewogICAgaWYobj09MSl7CiAgICAgICAgcmV0dXJuIDEKICAgIH1lbHNlewogICAgICAgIHJldHVybiBuICsgc3VtLmNhbGwodW5kZWZpbmVkLCBuLTEpCiAgICB9Cn0KCnN1bS5jYWxsKHVuZGVmaW5lZCw1KQ%3D%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D
6 作用域
• 按照语法树,就近原则
• 我们只能确定变量是哪个变量,但是不能确定变量的值
面试题1
var a = 1
function f1(){
alert(a) // 是多少
var a = 2
}
f1.call()
拿到代码直接做——必然会错。请先提升声明
面试题2
var a = 1
function f1(){
var a = 2
f2.call()
}
function f2(){
console.log(a) // 是多少
}
f1.call()
拿到代码直接做——必然会错。请先提升声明
面试题3
var liTags = document.querySelectorAll('li')
for(var i = 0; i<liTags.length; i++){
liTags[i].onclick = function(){
console.log(i) // 点击第3个 li 时,打印 2 还是打印 6?
}
}
拿到代码直接做——必然会错。请先提升声明
7 闭包
多搜搜博客吧