JavaScript函数的声明
函数的声明
function 函数名(参数){
函数体
return 返回值
}
通过function关键字声明
func:函数名
x:函数的参数
{}:函数体
function func(x){
// 执行的代码
console.log("这是一个函数")
}
console.log(func);
函数的调用 通过函数名调用
func();
func();
func();
func();
声明提升?
console.log(i);//undefined
var i=10;
console.log(func2); 函数声明也存在提升
function func2(){
}
JavaScript命名函数和匿名函数
1.命名函数
function func(){
console.log("这是一个命名函数")
}
调用func
func();//方法+() 代表立即执行
2.匿名函数
document.onclick=function(){
console.log("这是一个点击事件驱动的匿名函数")
}
使用变量将匿名函数进行储存
var func3=function(){
console.log("通过变量储存的匿名函数")
}
// 通过变量名进行函数的调用
// func3();
// func3();
// func3();
document.onclick=func3;
function func2(){
console.log("这是一个被点击事件驱动的命名函数")
}
document.onclick=func2;
JavaScript传参函数和无参函数
1.无参函数
function func() {
console.log("无参函数")
}
var func2 = function () {
console.log("无参函数2")
}
2.传参函数 f(x)=x+1 参数:调用方法(函数)时,根据传入的参数的不同,而返回不同的结果。
x:形参 形式上的参数
function func3(x) {
console.log(x)
}
调用
func3(1);//1 实参 实际的参数
func3(2);//2 实参
func3(3);
func3(4);
拼接字符串
function newStr(str1,str2) {
console.log(str1+str2)
}
newStr("hello","world");
newStr("hello","China");
newStr("hi","Nanjing");
newStr("你好,","web21");
JavaScript带有返回值的函数
function func(){
console.log("没有返回值的函数")
}
// 调用
// func();
// console.log(func());// 打印方法执行后的结果 undefined 没有返回值
console.log("------------")
// return 语句 返回值(结果)
function func2() {
console.log("带有返回值的函数");
var x=10;
return x;
}
// func2();
// console.log(func2());// 10
// var res=func2();
// console.log(res);
// 注意事项 return 之后的代码不执行 函数停止执行
function func3(params) {
return "func3";
console.log("func3")
}
// console.log(func3());
// 应用:return; 空 退出函数
function func5(x,y) {
if(x>y){
console.log(x+y)
}else{
return;
}
}
// func5(1,4);
function func6(a,b) {
console.log(a+b)
}
func6(10,20);
// 工作中,经常需要对方法或函数执行的结果进行处理时,就需要使用return语句将结果返回(抛出)
function func7(a,b) {
return a+b
}
var res2=func7(10,20);
console.log(res2);
JavaScript闭包函数
-
局部作用域:局部变量
变量在函数中声明,变量为局部作用域
局部变量:只能在函数内部访问声明函数
function func1() {
var x=10000;
return function() {
return x;
}
}
var res=func1();//将func1中返回的方法进行储存
console.log(res());
console.log(func1()())
JavaScript自执行函数
function func(params) {
}
func()
匿名函数
(function() {
console.log("自执行函数1")
})()
// (function() {
// console.log("自执行函数2")
// }())
JavaScript闭包函数的应用
function func1() {
var x = 10000;
return function () {
return x;
}
}
var res=func1();//将func1中返回的方法进行储存
console.log(res());
通过window实现闭包函数
function func1() {
var x=10000;
function func2() {
return x;
}
// return func2;
window.func3=func2;
}
func1();
console.log(func3());
应用
// 1.可以读取函数内部的变量
function func() {
var a = 100;
return (function () {
return a
})()
}
var b=func();
console.log(b);// 100
function func2() {
var c=99;
fAdd=function(){
c+=1;// c=c+1
}
return function(){
return c;
}
}
var res=func2();
console.log(res());//99
fAdd();// c+1
console.log(res());//100
fAdd();
console.log(res());//101
3.应用
// 红:30 蓝:30
function func3(){
var live=30;
return (function(){
return live
})()
}
// 游戏开始,红蓝个3条命
var red=func3();
var blue=func3();
red-=1;
console.log(red,blue);//29 30
JavaScript函数的封装
// 字面量 不可被改变 重复使用字面量
// 使用变量将字面量储存起来,直接使用变量
// 功能函数 方法
// 将功能封装为函数,对外提供函数的接口(使用方法)
// 实现10以内的 + - * /
// function add(a,b) {
// return a+b
// }
// // 告诉使用者 add 是一个用来做加法的方法 add(数字1,数字2)
// function sub(a,b) {
// return a-b
// }
// function times(a,b) {
// return a*b
// }
// function devided(a,b) {
// return a/b
// }
// var res=add(10,20);
// console.log(res);
// 封装:相同的地方不变 不同的地方通过参数来表示
function func(a, b, type) {
return eval(a + type + b)
}
console.log(func(10, 20, "+"))
console.log(func(10, 20, "-"))
console.log(func(10, 20, "*"))
console.log(func(10, 20, "/"))