JS里的函数

发布 : 2019-10-18 分类 : JavaScript 浏览 :

1、函数的五种声明方式

1.1 具名函数

1
2
3
4
function f(x, y) {
return x + y
}
f.name //"f"

1.2 匿名函数

1
2
3
4
5
var a
a = function(x, y) {
return x + y
}
a.name //"a"

1.3 具名函数赋值

1
2
3
4
5
var x = function y() {
console.log(y) //不报错
}
x.name //"y"
console.log(y) //报错,作用域不同

1.4 window.Function

1
2
var f = new Function('x', 'y', 'return x+y')
f.name //"anonymous"

1.5 箭头函数

1
2
3
4
5
var f = x => n * n
var f = (x, y) => x + y
var f = (x, y) => {
return x + y
}

2、函数的本质

函数就是一段可以反复调用的代码块。

函数是一个对象,这个对象可以执行一段代码,可以执行代码的对象就是函数

为什么函数是一个对象?

1
2
3
4
5
6
7
8
var f = {}
f.name = 'f'
f.params = ['x', 'y']
f.functionBody = 'console.log("1")'
f.call = function() {
return window.eval(f.functionBody)
}
f.call() //1

3、this与arguments

this就是call的第一个参数,可以用this得到。
arguments就是call除了第一个以外的参数,可以用arguments得到。

在普通模式下,如果this是undefined,浏览器会自动把this变为window。

普通模式下:

1
2
3
4
5
f = function() {
console.log(this)
console.log(this === window)
}
f.call(undefined) //window true

严格模式下:

1
2
3
4
5
6
f = function() {
'use strict'
console.log(this)
console.log(this === window)
}
f.call(undefined) //undefined false

arguments:

1
2
3
4
f = function() {
console.log(arguments)
}
f.call(undefined, 1, 2) //[1,2]

4、call stack调用栈

先进后出
查看调用栈过程:http://latentflip.com/loupe/

普通调用

嵌套调用

递归调用

5、作用域

5.1 题目1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = 1

function f1() {
var a = 2
f2.call()
console.log(a) //2

function f2() {
var a = 3
console.log(a) //3
}
}
f1.call()
console.log(a) //1

5.2 题目2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = 1

function f1() {
f2.call()
console.log(a) //undefined
var a = 2 //变量提升!!!

function f2() {
var a = 3
console.log(a) //3
}
}
f1.call()
console.log(a) //1

5.3 题目3

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 1

function f1() {
console.log(a) //undefined
var a = 2
f2.call()
}

function f2() {
console.log(a) //1
}
f1.call()
console.log(a) //1

5.4 题目4

1
2
3
4
5
6
var liTags = document.querySelectorAll('li')
for (var i = 0; i < liTags.length; i++) {
liTags[i].onclick = function() {
console.log(i) //点击第二个li时,打印6
}
}

以上代码可等价变形如下:变量提升

1
2
3
4
5
6
7
8
var liTags
var i
liTags = document.querySelectorAll('li')
for (i = 0; i < liTags.length; i++) {
liTags[i].onclick = function() {
console.log(i)
}
}

6、闭包

如果一个函数使用了它范围外的变量,那么(这个函数和这个变量)就叫做闭包。

1
2
3
4
5
var a = 1

function f() {
console.log(a)
}

这个函数f与变量a就形成一个闭包。

本文作者 : LqZww
原文链接 : http://yoursite.com/2019/10/18/js-li-de-han-shu/
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
支付宝扫一扫, 向我赞赏

支付宝扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

留下足迹