JavaScript函数

标题函数

一：回顾

• this：存在不同环境，不同的位置所代表的值是不一样的，取决于当前函数被调用时所处的环境(调用函数的对象)

  事件函数中:this指向触发事件对象

• 自定义属性

  • 一个标签两种状态，但是标签有很多个 标签.tag = true
  • 需要下标，但是没有，标签.index = 下标

二、函数

函数：函数是由事件驱动的或者当他被调用时可重复使用的代码块

1、函数的应用场景

• 作为事件处理函数

  oDiv.onclick = function(){
  }

• 函数封装

  function home(){
  //写作业 实现某个特定功能
  }

• 代码复用

  把重复使用的代码，抽出来放到一个函数里面，需要的时候调用

2、函数的简单使用

存储一段代码，在需要的时候调用

• 声明函数

  • 普通函数声明 function 函数名(){ 存储的代码 }

    //1.声明函数
    function sleep() {
    //存储的代码块
    console.log(“困，睡觉”);
    }

    //2.调用
    sleep();
    sleep();
    sleep(); //函数没有调用时不会执行的，可以多次调用

  • 表达式函数：var 变量 = function (){ 存储的代码 }

    //3.表达式函数声明
    var fun = function (){
    console.log(“饿，吃饭”);
    }
    console.log(fun);
    fun();
    fun();

• 调用

  函数名()

• 注意：函数声明了没有调用，是不会执行的，可以多次调用

3、函数的参数

• 1个参数

  /*
  函数中如果出现确定不了的值，做参数
  形参：形式参数 function 函数(a) a=形参
  实参：实际参数 函数名(10) 10-实参

   多个参数，用逗号隔开
  

  */
  //1.声明一个函数，计算1-n的和
  function sum(n){//形参 var n;
  var s = 0;
  for(var i = 1;i<=n;i++){
  s += i;
  }
  console.log(s);
  }

  //2.调用
  sum(100);//n = 100
  sum(70); //n = 70

• 多个参数

  //2.声明一个函数，计算两个数的和
  function add(x,y){//var x,y
  console.log(x+y);
  }
  add(100,200); //300
  add(1,2); //3

• 任意参数：arguments

  //3.声明一个函数，计算机多个数的和
  //如果参数个数不确定，不用参数，使用arguments，实参集合,类似数组
  function fun(){
  console.log(arguments);
  console.log(arguments.length); //3
  console.log(arguments[0]); //1

  var sum = 0;
  for(var i = 0;i<arguments.length;i++){
      sum += arguments[i];
  }
  console.log(sum);
  

  }
  fun(1,2,3); //6
  fun(1,2,3,4); //10

• 参数类型

  所有的js数据类型都能作为函数的参数

  number string boolean null undefined 复合类型(object,array,function)

  注意：null和undefined不会作为函数的参数，没有意义

  冒泡排序：
  var arr = [7, 3, 9, 4, 6, 1, 5, 2, 8];
  //第一次比较的时候，确定最大的值
  for(var i = 0;i<arr.length;i++){
  for(var j = 0;j<arr.length-1-i;j++){
  if(arr[j]>arr[j+1]){
  //交换位置
  var temp = arr[j];
  arr[j] = arr[j+1];
  arr[j+1] = temp
  }
  }
  }
  console.log(arr);

  函数做参数

  //6.函数作为参数
  function home(){
  console.log(“今天没有作业，不,可能”);
  }
  console.log(home); //整体函数

  function homework(f){//var f = function home(){console.log(“今天没有作业，不,可能”);}
  //数据
  f();
  }
  homework(home);

4、函数面试题

//以下代码执行后的结果是
function sum(x,y){
console.log(“x+y=”+(x+y));
}

function sum(x,y){
console.log(x+y);
}
//重名会覆盖，
sum(10,20);//30

//
function add(x,y){//var x,y;
console.log(x+y);
}
add(10,30,20);//x=10,y=30 40
add(10);//x=10,y=undefined NaN

//普通函数中
function s(){ //Window
console.log(this);
}
s();

三、作用域与变量提升

1、作用域：

​ 作用域：变量或函数的有效使用范围

• 全局作用域：在函数外声明变量或函数，叫全局变量或者全局函数，可以任何地方被访问和修改，会一直存储在内存中，直到页面关闭

  //全局
  var a = 10;
  console.log(a); //10

  function fun(){
  a = 20
  }
  fun();
  console.log(a); //20

• 局部作用域：在函数内声明的变量或函数，叫局部变量或函数，只能在函数内部使用，出了函数的大括号，就会被销毁

  //2.局部
  function sum(){
  var x = 100; //局部变量
  console.log(x); //100
  };
  sum();
  //console.log(x);//x is not defined

• 作用域链：js的一种查找机制，先找自己作用域，有就用自己的，没有依次往上一级作用域查找，如果找到全局还是没有，报错 is not defined

  /3.作用域链:js中的一种查找机制,先找自己作用域中是否有，有就用自己作用域范围的,
  //没有依次查找上一级作用域，如果全局还是找不到，报错
  var n = 100;
  function out(){
  var n = 40;
  function inner(){
  var n = 20;
  console.log(n);
  }
  inner();
  }
  out();

2、变量提升

//浏览器里的js解析器，在解析js代码的时候，至少经过两步
//1.预解析(变量提升)：var function
// var：提前声明变量,如果同名，只会声明一次
// function: 提前声明函数
//2.逐行执行

//练习1
var x = 10;
var y = 20;
function s(){
console.log(x,y);
var x = 30;
}
s();

//练习2
console.log(a);
var a = 10;
function a(){
console.log(“函数1”);
}
console.log(a);
var a = 20;
function a(){
console.log(“函数2”);
}
console.log(a);
var a = 30;
a();

//练习3
var x = 10;
var y = 20;
var a = 30;
var b = 40;
function f(){
console.log(x,y);//undefined 20
var x = y = 30;
console.log(a,b)
var a = 30,b=30;
}
f();

//练习4
function f2(m){
console.log(m);
var m = 30;
}
f2(300);

四、函数返回值

函数返回值 return 返回值 : 函数调用后的结果

//实现某个特定的功能
function js(a,b){
var c = a+b;
return c;
}

var s = js(10,20);
console.log(s); //30 没有return的时候，默认是undefined

//注意点
//一次只能返回一个值,如果有多个值返回的是最后一个
function add(a,b){
var x = a+b;
var y = a*b;
return x,y;
}
var s = add(10,20);
console.log(s);//200

//函数中只要遇到return 函数就结束了
function sum1(n){
var s = 0;
for(var i = 1;i<=n;i++){
s+=i;
return s; //1 函数遇到return 函数就结束，return一般放在函数的末尾
}
}
var sss = sum1(100);
console.log(sss);//1