JavaScript学习笔记——函数

本文详细介绍了JavaScript中的函数概念、定义方式,包括基本函数和表达式函数,强调了函数参数的使用,特别是arguments对象。同时,探讨了作用域的概念、特点,如全局作用域和局部作用域,以及预解析和作用域链的工作原理。此外,还讨论了函数封装、this的用法以及如何获取经过浏览器渲染的样式。
摘要由CSDN通过智能技术生成

目录

函数概念及作用

函数的定义方式

基本函数(命名函数)

表达式函数(匿名函数)

函数的参数

参数基础

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值