JS核心之函数

2019-06-22  本文已影响0人  饥人谷_丁健

函数五种声明方式

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永远返回undefinedconsole.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:将字符串当做代码执行。

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

闭包

闭包
闭包延伸阅读:闭包
上一篇下一篇

猜你喜欢

热点阅读