函数

2018-08-17  本文已影响0人  zzzZink

函数的声明方式:

function fn(){} //具名函数
var f = function (){} //匿名函数,必须将其赋给一个变量,这种形式称为函数表达式
var f = fucntion fn(){} //具名函数,函数表达式
var f = new Function('x', 'y', 'return x+y') //构造函数声明,最不常用
var f = ()=>{} //箭头函数

//对于var f = fucntion fn(){}这种形式的,只能通过f()调用
var f = function fn(){console.log('hello')}
fn() //报错
f() //hello

函数的本质

请看下面代码

//这是一个求三角形面积的函数
function area (width, height){
  s = width*hegiht.2
  return s
}

当我们每次需要求三角形面积的时候,调用这个函数即可,需要就用
所以,函数的本质就是可以反复调用的代码块,并且可以接受参数,结果会根据参数的不同而改变


this、arguments

this表示属性当前所在的对象

var obj = {
  n: 1,
  fn: function(){
    console.log(this.n)
  }
}
obj.fn() //1
obj.fn,call(obj) //1
obj.fn.call()  //undefined
var n = 2
obj.fn.call()  //2

call可以改变this的指向,this就是call的第一个参数,在非严格模式下,call的第一个参数为空或为undefined,this默认指向window

function fn(){
  console.log(this)
  console.log(this === window) 
}
fn.call()
//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//true

在严格模式下,call的第一个参数是什么this就是什么

function fn(){
  'use strict'
  console.log(this)
  console.log(this === window) 
}
fn.call()
//undefined
//false
fn.call(123)
//123
//false

arguments就是函数接收的参数,是一个伪数组,因为它的原型链没有Array.prototype这一环

function f(){
    console.log(arguments)
}
fn(1,2,3,4) //Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

作用域、变量提升

每个函数都有自己单独的作用域,并且在函数内部也会发生变量提升。

函数内部的变量提升

函数作用域问题

var a = 1
function f1(){
  var a = 2
  console.log(a)  //优先在f1范围内查找a,若找不到a向上查找(也就是全局范围),不会想下查找
  f2()
  function f2(){
    var a = 3
    console.log(a)
  }
}
f1()  //2 3
console.log(a)  //1

此时的作用域是这样的:


image.png
上一篇 下一篇

猜你喜欢

热点阅读