JavaScript学习笔记——函数

目录

函数概念及作用

函数的定义方式

基本函数（命名函数）

表达式函数（匿名函数）

函数的参数

参数基础

arguments

实参的数据类型

函数注意问题

作用域

概念

作用域划分

作用域特点

预解析

作用域链

函数封装及this应用

函数的封装

函数的返回值

获取经过浏览器渲染的样式

this

---

函数概念及作用

函数：函数就是具有特定功能的代码段 （是做某件事或实现某种功能）

函数作用：将特定功能的代码段放到函数中，重复执行 调用。能提高代码的复用性

函数的封装：把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

函数的定义方式

基本函数（命名函数）

函数定义：function 函数名() {函数体->特定功能的代码段}

函数调用：函数名();

function sum(){
  console.log(1+1);
}
// 定义一个函数可以调用无数次，并且每次都是相互独立的
 sum();
 console.log(sum); //函数名就表示函数本身或这个函数整体

表达式函数（匿名函数）

将一个匿名函数当做值赋值给某个变量

函数定义：var 变量名 = function(){函数体}

函数调用：变量名();

var fn1 =  function (){
   console.log("哈哈~~~~");
}

fn1();
console.log(fn1);

注意：表达式函数声明方式和声明变量差不多。只不过变量里面存的是值，而函数表达式里面存的是函数。

函数的参数

参数基础

传递不同参数，实现不同的功能

参数可以是一个也可以是多个，多个之间用逗号隔开

• 形参：function 函数名(形参){函数体} ->形式上的参数

• 实参：函数名(实参); ->具体的值

 function test(a){   // 括号里面的是形参

        console.log(a);

 }

test(100);   //函数调用括号里的是实参

arguments

arguments：函数独有的，是接收实参的一个集合。当我们不确定有多少个参数传递的时候，可以用arguments来获取

• 其展示形式是一个伪数组，由下标和值组成，天生自带length属性

• 获取对应的某一项 集合[下标] <=> arguments[下标]

function test() {
     console.log(arguments);  // Arguments(5) [10, 20, 30, 100, 200]
     console.log(arguments.length);  // 5
   }
test(10,20,30,100,200);

实参的数据类型

实参可以传递任意数据类型（number、string、null、object...）

函数注意问题

1.命名重复问题,函数名或变量名相同，后边覆盖前边的

2.函数参数问题
        2.1  定义了形参没有传递实参  形参就是没有初始化，没有赋值，默认值是undefined

        2.2  形参个数 等于 实参个数  一一对应进行赋值

        2.3  形参个数 小于 实参个数   首先一一对应进行赋值 超出没有影响

        2.4  形参个数 大于 实参个数   首先一一对应进行赋值  没有赋值的默认值是undefined

3.arguments和形参问题  形参 和 集合是对应的，形参的值变了 集合改变  集合的值变了  形参的值也变了

作用域

概念

概念：变量或函数使用的范围

作用域划分

作用域可以分为：全局作用域 和 局部作用域

• 全局作用域 ：script标签以内，函数体以为

• 局部作用域：函数执行形成局部作用域（私有作用域），函数体中属于私有的

作用域特点

• 全局作用域：全局作用域下的变量或函数可以在任意地方修改或使用

• 局部作用域：局部作用域下的变量或函数只能在当前作用域下修改或使用，外界无法进行访问​

预解析

预解析又称之为变量提升 (提前加载)

在js代码真正执行之前进行预解析，把所有带有var和function关键字的进行提前加载，预解析可以分为两部分，声明和定义

• 变量只 声明不定义 var a;

• 函数 声明+定义 var b = 100;

  • 函数执行形成局部作用域（私有作用域），开辟一块栈内存，提供函数体中代码执行的环境

  • 函数执行完毕，自动销毁（垃圾回收机制）

预解析可以分为全局作用域下的预解析和局部作用域下的预解析

• 全局作用域下的预解析

console.log(a, b);//undefined undefined
var a = 10;
var b = 20;
console.log(a, b); //10  20

• 局部作用域下的预解析

function sum(b) {
    console.log(b);  //50

    var b = 10;
    var c = 20;

    console.log(b); //10

    function test() {
        console.log("哈哈");
    }

    test();
}

作用域链

作用域链是一种查找机制，是内部函数访问外部函数的变量

用到某个变量或函数时，有私有的先用私有的，否则会往上级作用域进行查找，直到找到全局作用域为止，若最后找不到 就会报错。(站在目标出发，一层一层往外查找)

        var a = 100;

        var b = 200;

        test1(5);

        function test1(num1) {

            console.log(num1); //5

            var a = 10;

            var b = 20;

            var num1 = 1000;

            a++;

            b++;

            num1++;

            console.log(a, b,num1); //11,21,1001

            function test2() {

                a++;

                b++;

                console.log(a, b); //12 22

            }

            test2();

        }

        console.log(a, b); // 100 200

函数封装及this应用

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

封装：将实现也同样功能代码段放到同一个函数中，用到了调用即可，提高代码的复用性，也称之为封装

函数的返回值

return 值; 值：返回的内容 ，需要返回谁，就return谁 ，将函数中内容返回到函数外界（函数中内容是私有的，外界无法进行访问）

return的本质：退出当前函数，函数中一旦遇到return整个函数就结束了，return之后的代码不执行（全局作用域不需要return）

• 没有返回值 默认值是undefined
• 返回的是具体的值
• 返回多个值时，只能返回最后一个。放到数组中可以返回多个值
• 返回值的数据类型,可以返回任意数据类型

获取经过浏览器渲染的样式

注意：通过style属性只能操作行内样式

语法：getComputedStyle(元素).样式属性 / getComputedStyle(元素)['样式属性']

• 只能获取不能设置((行内，内部，外部))，如果需要设置只能通过style属性

• 兼容问题：IE8及以下不兼容，IE下提供了独有的属性去获取经过浏览器器渲染的样式

  • IE独有：元素.currentStyle.样式属性;/元素.currentStyle['样式属性'];

• 兼容处理封装

• function getStyle(ele, attr) {
      // 判断
      if (ele.currentStyle) { //IE
          return ele.currentStyle[attr];
      } else {//除了IE以外其它的浏览器
          return getComputedStyle(ele)[attr];
      }
  }

this

this：表示 当前行为 执行的主体this不是函数独有的，但是在js中我们主要研究的是函数中的this(函数执行才能确定this)

1. 在事件处理函数（将一个函数赋值给某个事件，就称之为事件处理函数）中，this指向当前触发事件的这个元素 （谁调用他 他就指向谁）

2. 直接在全局作用域中输出，this指向window（window属于浏览器的顶层对象，全局作用域下 所有变量和函数都属于window的属性，调用时可省略window. ）

3. 函数调用就看前边有没有点，有点点前面是谁就是谁，没有点就是window