js自定义函数

函数

• 函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。

• 函数包含着的代码只能在函数被调用时才会执行，就可以避免页面载入时执行该脚本

• 在JavaScript中，可以使用以下三种方法来定义一个函数

  • 使用function语句定义函数

  • 使用Function()构造函数来定义函数

  • 在表达式中定义函数

Function构造函数定义函数

var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);

注意

1. 在使用Function()构造函数的时候，第一个字母要大写
2. Function()构造函数只能在JavaScript 1.1或更高版本中使用
3. 每次调用构造函数时都会解析函数体，并且创建一个新的函数对象，效率非常低

function语句定义函数

function 函数名 (参数1，参数2……[形参])}

<语句块>

return 返回值

}

 function关键字：用于定义一个函数

函数名：函数名通常是一个合法的标识符,是唯一的，区分大小写的

参数：在函数里，可以有0个或者多个参数。如果有多个参数，参数与参数之间要用逗号隔开。无论函数是否有参数，小括号必需要有

函数体：用大括号括起来的代码块，即函数的主体

返回值：函数返回的值由关键字return完成，可选项

在表达式中直接定义函数

var 函数名 = function (参数1，参数2，…){函数体};

 调用函数

直接调用

myFunction();或window.myFunction()

事件处理调用

 <div onclick="myFunction()"></div>

将函数的返回值赋给变量

 var t = myFunction();

 

函数的参数

形參：定义函数时，函数名后面()中的参数；JavaScript中的函数允许给行参赋初始值

实参：调用函数时，传递的参数

参数的匹配： 默认情况下，形參和实参是一一对应的 但是当传递的参数个数与函数定义好的参数个数可以不匹配当不匹配时

• 如果传递的参数个数小于函数定义的参数个数，JavaScript会自动将多余的参数值设为undefined；

• 如果传递的参数个数大于函数定义的参数个数，那么多余传递的参数将会被忽略掉。

默认参数

JavaScript中的函数允许给参数赋初始值

比如：我们在创建封装一个创建table表格的函数，如果任何参数不传，我们也想创建一个四行五列，并且背景颜色，各行换色的表格，这时候我们就可以使用表格来创建

函数的返回值

• return语句并不是必须的

• 默认情况下，函数的返回值为undefined

• 在使用 return 语句时，函数会停止执行，并返回指定的值，return后面的代码不再执行

什么情况下添加return：

如果函数中的变量要在函数外进行调用

函数体的结果需要在函数外进行使用

变量的作用域

全局变量

在函数外申明的变量为全局，在整个js文档中生效

局部变量

在函数内用var声明的变量为全局变量，只能在函数内部使用

全局变局部

全局变量可以在局部的任意位置使用

局部变全局

局部变量不能在全局使用，如果想要在全局使用，可以去除前边的var或者将该值使用return返回到全局

什么是作用域链

• 只要在js中创建变量，就会存在作用域【全局作用域】

• 写在函数内部的被称为局部作用域

• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个新的作用域

• 在函数中如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这样一个查找过程形成的链条就叫做作用域链。

默认情况下：内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数

var n = 10;
function outer(){
  function inner(){
    function center(){
      console.log(n);
    }
    center();
  }
  inner();
  var n = 15;
}
outer(); //=> undefined

预解析

预解析，又称之为变量提升，在js代码真正执行之前，进行提前加载，把所有带有var和function的关键字进行预解析

• JavaScipt代码是由浏览器中的JavaScript解析器来执行的

• JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行

• 预解析分为变量预解析（变量提升）和函数预解析（函数提升）

• 代码执行是按代码的书写顺序从上到下执行的

1. 对于带有var和function关键字在预解释的时候操作

var :只声明不定义 function:既声明又定义 注：私有作用域下也要进行预解析

1. 预解析只发生在当前的作用域下

就是当文档加载的时候，开始只对window进行预解析，函数执行的时候才会对里面的代码进行预解析

console.log(a); // 注意：预解析的问题，如果同时有变量和函数的预解析，那么函数的优先级高
var a = 'hello';
function a(){
  console.log(123);
}

// 优先执行栈内存中的内容
// function a(){
//     console.log(123);
// }
// var a = 'hello';
// console.log(a); // hello

// 案例1
var num = 10;
fun();
function fun(){
  console.log(num);
  var num = 20;
}
// 案例二
var num = 10;
function fun() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fun();

// 案例三
var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = 13;
}

// 案例四
console.log(a,b,c);
var a = b = c = 5;

// 案例四
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 案例五
fn();//报错 只预解析“=”左边的，右边的是指针，不参与预解析
var fn=function(){
    console.log(11);
}
// 案例六
function fn(){
    console.log(a);
    a=100;
}
fn();
console.log(a);
//注意：js中，如果在不进行任何特殊处理的情况下，上面的代码报错，下面的代码不再执行

// 案例七
console.log(show);
function show(){
  console.log(123);
}
var show = 10;

// 案例八
function show(){
  console.log(123);
}
var show = 10;
console.log(show);

变量的生命周期【了解】

JavaScript 变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

var lis = document.querySelectorAll("li");
  for(var i=0; i<lis.length;i++){
    lis[i].onclick = function(){
      alert(i);
    }
}

// 案例一
function test(){
  uname = "香水有毒";
}
console.log(uname);

// 案例二
function test(){
  uname = "香水有毒";
}
test();
console.log(uname); 

// 案例三
uname = "香水有毒";
function test(){
  console.log(uname);
}
test(); 

// 案例四
var uname = "香水有毒";
function test(){
  console.log(uname);
}
function test2(){
  uname = "老鼠爱大米";
  test();
}
test2(); 

// 案例五
var uname = "香水有毒";
function test(){
  console.log(uname); 
}
function test2(){
  uname = "老鼠爱大米";
  return test;
}
res=test2(); 
res();

自执行函数

(function a(){alert('我是自执行函数')} ()); // 用括号把整个表达式包起来
(function a(){alert('我是自执行函数')}) (); //用括号把函数包起来
!function a(){alert('我是自执行函数')}(); // 求反，我们不在意值是多少，只想通过语法检查。
+function a(){alert('我是自执行函数')}();
-function a(){alert('我是自执行函数')}();
~function a(){alert('我是自执行函数')}();
void function a(){alert('我是自执行函数')}();
new function a(){alert('我是自执行函数')}();

自执行函数通常都是定义之后立即执行，以后都不再会调用，所以声明时可以省略函数名，因此自执行函数又叫**匿名函数** 。

(function(){console.log('我是匿名函数')})();// 我是匿名函数