<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
</head>
<body>
<button>匿名函数</button>
<script>
/*
javascript函数
什么是函数？
函数是一组可以随时随地运行的语句。
函数是 ECMAScript 的核心。
函数是由这样的方式进行声明的：关键字 function、函数名、一组参数，以及置于括号中的待执行代码。
*/
/*
1 函数定义
1.1 函数声明(定义式)
1.2 函数表达式(函数字面量)
1.3 Function（）构造函数
2 函数调用
2.1 函数调用模式
2.2 方法调用模式
2.3 构造器调用模式
2.4 call（）函数、apply（）函数调用模式
2.5 匿名函数调用模式
3 自执行函数
4 匿名函数
5 箭头函数(ES6)
*/
//1.函数定义
//1.1 函数声明(定义式)
/*
直接使用关键字function接一个函数名，函数名后是接收函数的形参
*/
function sum(num1,num2){
return num1 + num2;
}
//1.2 函数表达式(函数字面量)
/*
类似于普通变量初始化，只不过这个变量接收的是一个函数（可为正常函数和匿名函数），
调用时都需调用定义名字（看调用详解）
*/
var sum1 = function (num1,num2){
return num1 + num2;
}
var sum2=function foo(num1,num2){
return num1 + num2;
}
//1.3 Function（）构造函数
/*
使用new操作符调用Function（）构造函数，传入对应的参数定义函数
参数除去最后一个是执行的函数体，其它都是形参
相比于其它两种Function（）构造函数的使用比较少：
1.Function（）构造函数每次执行都会解析函数主体，并创建一新的函数对象效率相对较低。
2.Function（）构造函数创建函数不遵循典型的作用域，它将一直作为顶级函数执行
在一个函数内部调用Function（）构造函数时，其中的函数体不能访问到这个函数的局部变量而只能访问到全局变量。
*/
var sum3= new Function("num1","num2","return num1 + num2");
//1.3.2
var y='123'
function aaa(){
var y='456';
return new Function('return y')
}
console.log(aaa()())//123
//2.函数调用
//2.1 函数调用模式
/*
通过函数声明或者函数表达式的方式定义函数，然后直接通过函数名调用的模式。
*/
console.log(sum(1,2))//3
//2.2 方法调用模式
/*
调用对象内值为函数的属性property，通过对象obj.property来调用
*/
var obj={
name:'name',
getName:function () {
return this.name;
}
};
console.log(obj.getName())//name
//3.自执行函数
/*
自执行函数的定义的调用时先后进行的，
匿名函数属于自执行函数的一种，
以下展示几种自执行函数：
*/
var aa= function (x){
console.log(x)
}(1);//1
true && function(x){
console.log(x)
}(2);//2
(function (x){
console.log(x)
})(3);//3
//4.匿名函数
/*
匿名函数顾名思义指的是没有名字的函数,它也不会自己做任何事情.
你通常将匿名函数与事件处理程序一起使用, 例如，如果单击相关按钮.
还可以将匿名函数分配为变量的值，创建函数。
主要使用匿名函数来运行负载的代码以响应事件触发（如点击按钮） - 使用事件处理程序。
匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。
函数声明会进行声明提升（declaration hoisting），而函数表达式不会。
*/
var myButton = document.querySelector('button');
myButton.onclick = function() {
console.log('hello');
}
//5.箭头函数(ES6)
/*
es6新增使用胖箭头（=>）语法定义函数表达式的能力。
很大程度上箭头函数实例化的函数对象与正式的函数表达式创建函数对象行为是相同的。
任何可以使用函数表达式的地方都可以使用箭头函数。
但是箭头函数不能使用arguments、super和new.target，也不能用作构造函数。
箭头函数也没有prototype属性。
*/
let sum4=(a,b)=>{
return a+b;
}
/*注意：一个参数可以省略（）*/
</script>
</body>
</html>
浙公网安备 33010602011771号