js学习笔记二：js函数和作用域

最新推荐文章于 2023-07-13 14:03:42 发布

￥诸葛村夫￥

最新推荐文章于 2023-07-13 14:03:42 发布

阅读量347

点赞数

分类专栏：前端学习笔记文章标签： js函数作用域 js javascript

本文链接：https://blog.csdn.net/qq_33322074/article/details/104217890

版权

前端学习笔记专栏收录该内容

30 篇文章 1 订阅

订阅专栏

js学习笔记二：js函数和作用域

文章目录

- - js学习笔记二：js函数和作用域

js函数定义及调用

函数作用：方便我们封装调用代码。
函数定义

function fun(){}

var fun=function(){}

var fun=new Function()//这种方式函数会自调用（函数自己完成调用动作）

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">

            #tim{
                width: 100px;
                height: 100px;
                background: red;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <button id="taller" onClick="taller()">增高</button>
        <button id="longer" onClick="longer()">增长</button>
        <button id="changebg" onClick="changebg()">改变背景颜色</button>
        <div id="tim" ></div>
        <script type="text/javascript">
            //获取到要改变的div  id为tim
            var oDiv=document.getElementById('tim')
            //写点击增高的按钮时需要调用的函数
            var taller=function(){
                oDiv.style.height='300px'
            }
            //写点击增长的按钮时需要调用的函数
            function longer(){
                oDiv.style.width='300px'
            }
            //写点击改变背景颜色的按钮时需要调用的函数
            function changebg(){
                oDiv.style.background='black'
            }

        </script>
    </body>
</html>

JS命名规范

小驼峰命名法：

变量：第一个单词以小写字母开始，从第二个单词开始的每个单词首字母大写。

函数名：跟变量名一样

常量：全大写单词间用下划线隔开

js中函数的几种写法

function fun(){} 最常见的声明
(function fun(){}) 函数表达式声明方式，只在括号内起作用，外部无法访问。
(function(){}) 匿名函数表达方式，外部无法访问。
new Function() 通过构造器方式，因为麻烦，很少用。
export default function(){} ES6的向外暴露法
()=>{} 箭头函数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            function fun(){
                console.log(1)
            }
            (function tail(){
                console.log(2)
            })
            new Function(console.log(3))
        </script>
    </body>
</html>

js中函数的传参和取参

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">

            #tim{
                width: 100px;
                height: 100px;
                background: red;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <button id="taller" onClick="change('height','300px')">增高</button>
        <button id="longer" onClick="change('width','300px')">增长</button>
        <button id="changebg" onClick="change('background','black')">改变背景颜色</button>
        <div id="tim" ></div>
        <script type="text/javascript">
            //获取到要改变的div  id为tim
            var oDiv=document.getElementById('tim')
            //写点击增高的按钮时需要调用的函数
            // var taller=function(){
            // 		oDiv.style.height='300px'
            // }
            // //写点击增长的按钮时需要调用的函数
            // function longer(){
            // 		oDiv.style.width='300px'
            // }
            // //写点击改变背景颜色的按钮时需要调用的函数
            // function changebg(){
            // 		oDiv.style.background='black'
            // }

            function change(styleattr,value){
                //两种写法是一样的，但是如果需要传入变量就需要用第二种
                // oDiv.style.styleattr=value
                oDiv.style[styleattr]=value

            }

        </script>
    </body>
</html>

注意

对象取值方法有两种，但是如果对象是个变量就要第二种取值方法。

//两种写法是一样的，但是如果需要传入变量就需要用第二种
oDiv.style.styleattr=value
oDiv.style[styleattr]=value

button标签里面的参数一定要加上单引号，因为不加的话js会将它当成是变量。
js如何接收不定参数：不知道传过来多少参数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		//利用argument来编写一个求和函数
		function sum(){
			var s=0
			for(var i=0;i<arguments.length;i++){
				s=s+arguments[i]
			}
			console.log(s)
		}
		sum(1,22,3,4)
	</script>
</body>
</html>

js中变量的作用域和闭包

局部变量只定义在函数内部
全局变量可以在整个script作用域内都可以调用。
作用域链：也就是就近原则 当全局变量和局部变量相同时，会自动使用局部变量覆盖全局变量。
闭包：可以调用函数内部变量的函数。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            function a(){
                var tim =10
                var b=function(){
                    console.log(tim)//此处是闭包
                }
                return b
            }
            a()()//注意这里调用a()返回的是b方法，执行b方法时才会显示出来结果。

        </script>

    </body>
</html>

注意

var b =function(){} 此处的b是个方法，只是定义了一个方法,不是结果，这个方法执行的结果是b()

js中函数的返回值

用return返回
return代表该函数执行结束，不写return默认会返回undefined
返回多个值可以将值封装成数组和json对象。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //函数不写返回值会默认返回undefined
            function fun(){
                var tim=10
                var xd=20
                var obj={'tim':tim,'xd':xd}//此处封装成了对象。
                return obj

            }
            console.log(fun())

        </script>
    </body>
</html>