JS核心之函数
函数五种声明方式
1.具名函数
function f(x,y){
return x+y
}
f.name // 'f'
具名函数
注意:如果console.log(x)
后面的参数不是字符串,他会自动调用x.tostring
的方法来得到string
。
2.匿名函数
var f
f = function(x,y){
return x+y
}
f.name // 'f'
匿名函数
注意:匿名函数必须声明一个变量。
3.具名函数赋值
var f
f = function f2(x,y){ return x+y }
f.name // 'f2'
console.log(f2) // undefined
具名函数赋值
注意:console.log
永远返回undefined
,console.log
打印与返回没有关系。
4.window.Function
var f = new Function('x','y','return x+y')
f.name // "anonymous"
注意:函数的name
属性很不常用,用new Funtion
声明函数,则该函数没有名字(anonymous)。
5.箭头函数
var f = (x,y) => {
return x+y
}
var sum = (x,y) => x+y
var n2 = n => n*n
箭头函数
注意:箭头函数无名字,一定是匿名的。
函数的本质
函数就是一段可以反复调用的代码块。
求三角形的面积
eval
:将字符串当做代码执行。
函数的调用
调用函数有两种:f()
和f.call()
f = function (x,y) {return x+y}
f(1,2) //3
等同于
f.call(undefined,1,2)//3
注意:调用函数必须用f.call()
这种方法。f.call()
方法语法是f.call(this,arguments)
this和arguments
在f.call
中第一个参数就是this
,后面一个参数就是arguments
。
this
在严格模式和普通模式之间也会有一些差别。
注意:在普通模式下。如果
this是undefined
。则浏览器会自动把this
变成全局对象window
。
严格模式
注意:在 严格模式下,
this
就是函数调用时候的第一个参数,给什么就是什么,如果只有一个参数,这个参数就是this
arguments示例
注意:f.call(this,arguments)
中arguments
是除了第一位的后面参数,他返回的是一个伪数组arguments.__proto__ === Object.prototype
call stack 调用栈
````Call stack```,意思是调用堆栈,调用堆栈是一个方法列表,按调用顺序保存所有在运行期被调用的方法。
当本次函数调用结束后,局部变量先出栈,然后是参数,最后栈顶指针指向最开始存的地址,也就是主函数中的下一条指令,程序由该点继续运行。
遵循先入后出的原因。
作用域
作用域分两种:一种是全局作用域,变量在整个程序中一直存在,所有地方都可以读取;另一种是函数作用域,变量只在函数内部存在。
作用域
注意:按照语法树,就近原则
我们只能确定变量是哪个变量,但是不能确定变量的值
函数的内部提升
与全局作用域一样,函数作用域内部也会产生“变量提升”现象。var命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。
function f =(){
console.log(a)
var a = 1
}
等同于
function f =(){
var a
console.log(a)
a = 1
}
f()//undefined 因为先声明,还没赋值就打出a,所以a就是undefined
面试题1
var a = 1
function f1(){
alert(a) // 是多少
var a = 2
}
f1.call()
等同于
var a = 1
function f1(){
var a
alert(a) // 是多少
a = 2
}
f1.call()//undefined
注意:拿到代码直接做——必然会错。请先提升声明。
面试题2
var a = 1
function f1(){
var a = 2
f2.call()
}
function f2(){
console.log(a) // 是多少
}
f1.call()
注意:f1.call()
调用f1
函数,得到f2.call()
.再调用f2
函数得到console.log(a)
,f2
函数是顶层函数,他作用范围内没有a
的赋值,因此向上找父作用范围:全局范围,因此f1.call()
等于1
面试题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?
}
}
等同于
var liTags
var = i
liTags = document.querySelectorAll('li')
for( i = 0; i<liTags.length; i++){
liTags[i].onclick = function(){
//整个for循环之后 i = 6
console.log(i) // 点击第3个 li 时,打印 2 还是打印 6?
}
}
面试3
注意:console.log(i)
会在他之上的代码全部运行结束后再执行,这里i
是动态取值的,所以在最后运行完整个for
循环,得到的值是6
闭包
闭包闭包延伸阅读:闭包