js函数

1 进阶：函数

1. 函数的 5 种声明
2. 如何调用函数 f.call
3. this 和 arguments
4. 什么是 call stack
5. 作用域
6. 闭包
   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 闭包
多搜搜博客吧