函数:就是封装起来的可以重复被调用的代码块。
【在js中,函数是头等对象,因为它们可像任何其他对象一样具有属性、方法。区别在于函数可被调用function对象】
函数的命名规则和变量名是一样的(同“javascript变量的声明、赋值、命名”中提到命名规则一样)
注:函数名也不能和变量名重复,否则发生覆盖现象。
e.g.
var a = function a() {
console.log(111); //111
};
a();
a = 1;
console.log(a); //1
语法结构:
function 函数名 (参数[可有可无]) {
//函数主体
}
e.g.
a(); //在同一代码块中,可提前调用函数
function a(){
alert(1);
}
a();//调用函数
a();//可多次调用同一函数
(1)直接声明一个变量,将一个函数赋值给他
语法结构:
var 变量 = function (){}
e.g.
foo(); //不被优先解析,在此foo是一个变量
var foo = function (){
console.log(1); //1
}
foo();
(2)在计时器中声明
语法结构: setInterval(function (){},1000);
e.g.
setInterval(function () {
console.log(1)
},1000)
setTimeout(function () {
console.log(1)
},5000)
(3)在一个事件后面声明
语法结构:div.onclick = function (){};
e.g.
点我
【函数调用形式】一般在声明函数后直接调用
e.g.
function func() {
console.log("hello");
};
func(); //声明一个函数并调用
var foo = function () {
console.log("hi");
};
foo(); //声明一个匿名函数赋值给一个变量,然后调用
e.g.同上
点我
e.g.
// fn(); //Uncaught ReferenceError: fn is not defined
(function fn(){
console.log("自调用");
})();
//fn(); //Uncaught ReferenceError: fn is not defined
注:在自调用前后调用此函数均报错!
在调用函数时,可以向其传递值,这些值被称之为参数。
让函数的调用更加灵活
e.g.
function pyramid(rows) {
for (var i=1;i<=rows;i++){
for (var j=0;j<=rows-i;j++){
document.write(" ");
}
for (var n=1;n<=i;n++){
document.write("* ");
}
document.write("
");
}
}
pyramid(5);
pyramid(2);
pyramid(3);
实参:在调用函数时传递的真正的值
形参:在声明函数时定义的变量
语法结构:
function 函数名foo(参数--形参){ //封装函数时,括号内的参数为形参
//函数主体
}
函数名foo(参数--实参); //调用函数时,括号内的参数为实参
e.g.
可以是多个,写多个参数时,用逗号“,”隔开。
注:形参、实参必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
函数参数的默认值是undefined。若在调用函数时,参数的值没被提供,那么它的值就为undefined。
函数默认参数:允许在没有实参值或者undefined被传入时使用默认形参。
注:
//实参 < 形参
function fun1(a,b,c) {
console.log(a); //1
console.log(c); //undefined
}
fun1(1,2);
//实参 > 形参【不报错,多出个数不被解析】
function fun2(a,b) {
console.log(a); //1
console.log(b); //2
}
fun2(1,2,3,4,5,6);
可以是任意数据类型【可查看“javascript数据类型”一篇】
数据类型:数值(number);字符串(string);布尔值(Boolean);未定义(undefined);空值(null);Symbol(ES6新增);对象(object)
e.g.
function table (rows,sols,color){
if(rows==undefined){
rows = 10;
}
if(sols==undefined){
sols = 10;
}
if(color==undefined){
color = "#ccc";
}
//以上三个if语句可简写为:
rows = rows || 10;
sols = sols || 10;
color = color || "#ccc";
document.write("");
for(var i=1;i<=rows;i++){
if(i%2==0){
document.write(``);
}else {
document.write(" ");
}
for(var j=0;j第${i}行 第${j+1}列`);
}
document.write(" ");
}
document.write("
");
}
table(5,6,'blue');
table(5,6);
arguments对象会保存所有传递的实参;
arguments伪变量的length属性是某次调用的实参的个数;
函数对象的length属性是形参的个数
e.g.
function fun(a,b) {
console.log(arguments); //Arguments(3)对象[保存所有传递的实参]
console.log(fun.length); //2[函数对象的length属性是形参的个数]
for(var i = 0;i
是定义在函数内部的语法结构,返回的至就是函数调用表达式的结果。
return 返回值,即 return value。
function myFun() {
var x = 1;
return x; //返回值 1
}
注: return语句仅仅使函数停止执行,JS继续执行代码(从函数调用的地方)。函数调用将被返回值取代。
function myFun() {
var x = 1;
return x; //返回值 1
}
var myVar = myFun();
console.log(myVar); //1
function myFun() {
var x = 1;
return x; //返回值 1
}
var box = document.querySelector("#demo").innerHTML = myFun();
//获取到一个id为demo的元素,使其innerHTML为1,也就是myFun()所返回的值。
function fun(a,b) {
return a * b;
}
var num = fun(2,3);
console.log(num); //6
function out(m,n) {
if(m>n){
return;
}
console.log(m * n);
}
out(2,3); //6
out(5,3); //无输出