Python学习笔记：5.2.3 javascript函数

本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！

一、课程目标

• 函数基本定义
• 作用域
• 嵌套函数与闭包
• 高阶函数
• callee与this

二、详情解读

2.1.函数基本定义

函数声明：
function funcName(args1, args2) {
   …
   …
   return…
}
函数调用传参时可以传递不限数量的参数，在函数内部使用arguments对象接受

函数表达式：
funcName = function (args1, args2) {
   …
   …
   return…
}

使用函数声明与使用函数表达式定义的区别:
函数声明会在调用之前已经加载好
函数表达式只有执行到该行代码时才会定义函数

代码示例：

// 函数声明式定义方式			
function myFun(){
	console.log("hello world")
}
//函数调用
myFun()			
		   
// 函数参数
function mySub(a, b){
	console.log("a=>",a ," b=>", b)
	return a-b
}

// // 传参调用
// // 顺序传参
// mySub(10,2)
// //不支持关键字传参
mySub(b=2, a=10)

运行结果：（注意js是不支持关键字传参的，不要被mySub(10, m=2)迷惑）

2.1.1.默认参数位置不限制、按照顺序传参

示例代码：

function myFun(a, c, b=2, d){
	 console.log("a=>", a, " b=>", b, " c=>", c, " d=>", d)
}

a = 10, b = 2
myFun(10)

a = 10, c = 20, b = 2
myFun(10, 20)

a = 10, c = 20, b = 30
myFun(10,20,30)

a = 10, c = 20, b = 30, d = 40
myFun(10,20,30,40)

运行结果：

2.1.2.参数列表 - arguments,通过传参顺序索引0,1,2,3…取值

代码示例：

// python中通过 *args来接受未在函数的形参中定义的参数
//参数列表 - arguments,通过传参顺序索引0,1,2,3...取值
function myFun(a,b){
	console.log(a)
	console.log(b)
	console.log(arguments)
	console.log(arguments[0]) //a
	console.log(arguments[0]) //b
}

myFun(1,20)
myFun(1,2,3,4,5,6)

function myStudents(){
	console.log(arguments)
	if (arguments[0]!=undefined){
		console.log("您的名字:",arguments[0] )
	}
	if (arguments[1]!=undefined){
		console.log("您的性别:",arguments[1] )
	}
}

myStudents("luxp")
myStudents("luxp", "男")

运行结果：

2.1.3.匿名函数 - 函数表达式，可以将匿名函数赋值给一个变量

使用函数声明与使用函数表达式定义的区别
函数声明会在调用之前已经加载好
函数表达式只有执行到该行代码时才会定义函数

代码示例：

my_func = function(){
  console.log(arguments)
}
my_func()

myHello1() // 这句正常执行，因为函数声明会在调用之前已经加载好
myHello2() // 这句会报错，因为匿名表达式只有执行到该行代码时才会定义函数

function myHello1(){
	console.log("hello")
}

myHello2 = function(){
	console.log("hello")
}

// 下面两句都可以正常执行
myHello1()
myHello2() 

运行结果：

2.1.4.不支持重载：javascript定义多个同名的函数，只有最后一个生效

示例代码：

function myfun(a){
	console.log("1")
}
function myfun(a,b){
	console.log("2")
}
function myfun(a,b,c){
	console.log("3")
}

运行结果：

2.2.作用域

1.在web浏览器中，全局环境表示为窗口window对象下
2.所有的全局变量与函数都是window的属性或者方法
3.关闭浏览器窗口，就销毁了所有的全局对象
4.每个函数都拥有自己的执行环境
5.每一个代码执行时都有自己的作用域链，作用链前端就是当前执行环境的变量对象，作用域链下一个变量对象就是下一个包含的环境，直到全局环境

2.2.1.全局变量 - 当前页面所在的窗口下的环境window BOM，页面之间的变量并不能相互访问

示例代码：

var myName = "luxp"
// console.log(window.name)
function myFun(){
	console.log(myName)
}
// console.log(window.myFun)

在浏览器的当前窗口运行结果：

在另一个窗口的运行结果：(因为页面之间的变量并不能相互访问)

2.2.2.函数局部作用域

在函数内部使用var定义的变量为函数内部变量，
如果没有使用var关键字，变量就会声明为全局变量。
es5规范中并没有块级作用域，即诸如if， while的{}部分，es6拥有块级作用域

示例代码：

my_sex= "男"
function myFun(){
	var my_name = "luxp" // 此处my_name是局部作用域的变量，外部不能访问；如果没有用var，则是全局作用域的变量，外部可以访问
	my_age = 18
	console.log(my_name, my_sex)
}
myFun()
console.log(my_name)

运行结果：

2.2.3.函数作用域链

变量作用域查找顺序由内而外寻找，当在函数内部定义局部变量时，首先会声明该变量

var  name = "luxp"
			
function seekName1(){		
	var name = "luxp_2"
	console.log(name) // 输出 luxp_2
	var name = "luxp_1"
	function subFun(){
		var name = "luxp_3"
		// name = "luxp_4"
		console.log(name)  // 输出 luxp_3
	}
	subFun()
}

seekName1()
			
//局部变量会被预先声明			 
function seekName2(){
	console.log(name) // 输出全局变量中的name,为 luxp
	
	// 如果用var声明name,则上面的语句打印结果为undefined，是相当于在打印name之前声明了局部变量name
	// var name = "luxp_2" 
				
	// var name = "luxp_1"
	function subFun(){
		var name = "luxp_2"
		// name = "luxp_4"
		console.log(name) // 输出局部变量中的name,为luxp_2
	}
	subFun()
} 
seekName2()

2.3.嵌套函数与闭包

function funcParent() {
	funcChild() {

	}
	return funcChild()
}

函数的局部环境在函数调用完毕后，局部环境就会被销毁，局部环境的变量也会被销毁，而闭包的用法可以在父级函数执行后，还可以保留对父级的环境变量的引用

2.3.1. 内嵌函数

示例代码：

function myFunc(i){
	
	function mySubFun(){
		return i
	}
	return mySubFun()
} 

2.3.2.将函数作为值返回

示例代码：

function create_fun(I){
 	return function (){
 		return "func_"+I
 	}
}
func_array = []
for (i=0;i<5;i++){
   func_array[i]=create_fun(i)
}

运行结果：

2.3.3.如何让每个函数输出不同的值

示例代码一：

/* 
闭包的原因，所有的函数都会输出five  
*/

function create_fun(){
	var array = ["one", "two", "three", "four", "five"]
	var func_array = []
	for (i in array){
		console.log(i)
		func_array[i] = function (){
			return array[i]
		}
		
	}
	return func_array
}
//执行这一句的时候，内部函数其实是引用i，而不是i的值，执行
//到最后的时候i的值是5，所以全部的函数的i都是5
func_array = create_fun()
func_array[0]()

运行结果：

示例代码二：

function create_fun(){
	var array = ["one", "two", "three", "four", "five"]
	var func_array = []
	
	for (i in array){
		func_array[i] = function create_fun(I){
						 //增加了一个内嵌函数
						  return function (){
							   return array[I]
						  }
						//执行，通过执行把i的值固定下来
						}(i)
		
	}
	return func_array
}
func_array = create_fun()
func_array[0]() 

运行结果：

2.3.4.函数作为参数

函数可以作为一个参数给另一个函数调用，另一个函数就被称为该函数的高阶函数

示例代码：

function sum(a,b){
	return a+b
}

function sub(a,b){
	return a-b
}

function compute(func, a,b){
	return func(a,b)
}
value = compute(sum, 10,3)
value = compute(sub, 10, 3)
			
function selectEvenNumber(number){
	if (number % 2 == 0) {
		return number
	} else {
		return 0
	}
}
function selectOddNumber(number){
	if (number % 2 == 1) {
		return number
	} else {
		return 0
	}
}

function map(array, func=selectEvenNumber){
	for ( i in array){
		array[i] = func(array[i])
	} 
} 

array = [1,2,3,4,5,6,7,8,9]
map(array)
console.log(array)

array = [1,2,3,4,5,6,7,8,9]
map(array, selectOddNumber)
console.log(array)

/* 
js中常见的一种高阶用法 
 */

function myfun(args, func){}
myfunc(args, function(){})

运行结果：

2.4.高阶函数

2.4.1.函数作为值

function func1(){}
function func2(func){
	return func()
}

return func2(func1)

2.5.callee与this

2.5.1.arguments.callee

arguments.callee可以在内部对函数名实现解耦

callee代表这对函数自身的引用
可以降低函数名与内部调用的耦合性

示例代码一：

function myFun(){
	console.log(arguments)
	console.log(arguments.callee)
}

运行结果：

示例代码二：

/*利用递归计算阶乘 */

// 这种方法，当函数名改变时，函数内部的递归方法名也得修改
function jiecheng(num) {
	if (num === 1) {
		return 1
	} else {
		return num * jiecheng(num-1)
	}
}

// 这种方法不一样，无论函数名如何改变，函数内部的递归方法名不用修改
function jiecheng(num) {
	if (num === 1) {
		return 1
	} else {
		return num * arguments.callee(num-1)
	}
} 

2.5.2.this

在函数内部，this引用了函数的执行环境

/* this 指向对象由所在的执行环境决定 */

console.log(this)

function myFun(){
	console.log(this)
	// return this
	this.nickname = "luxp"
}

function myFun(){
	function mySubFun(){
		console.debug(this)
		return this
	}
	return mySubFun()
}

function myFun(){
	var o = new Object()
	o.func = function(){
		console.log(this)
	}
	return o
}

运行结果：

三、课程小结

• 1.函数基本定义
• 2.作用域
• 3.嵌套函数与闭包
• 4.callee与this