散人研Blog
不学无术的前端工程师

JavaScript | 函数的概念及作用

通俗讲:函数就是可重复执行的代码块。

函数的作用:

1.通过函数可以封装任意多条语句,以便在任何地方、任何时候调用;

2.将代码编写在函数中,就可以避免在非必要情况下调用该代码。

函数的编写及调用

JavaScript中的函数使用function关键字来声明函数,后跟一组参数以及函数体。

function 函数名(参数) {//函数体
    // do something
}

函数需要调用才能触发:函数名(参数); //调用

系统函数:alert()、parseInt()、prompt()……

自定义函数:函数声明、函数表达式、匿名函数
注意:函数声明(任意位置调用)、函数表达式(先定义后调用)、匿名函数(不允许单独定义)

参数的声明及传递:


  形参:形式参数,函数定义时,函数的变量
  实参:实际参数,函数调用时,要有具体值,实参的值传递给形参且一 一对应
  参数的意义是让程序更灵活
  形参和实参的个数可以不一样,与函数的定义无关
  函数的实参副本 arguments 对象

length属性:

    函数的length属性,返回函数的形参个数
示例:根据传递的参数,执行对应的加减乘除运算

函数的返回值

所有函数都有返回值!
如果函数没有明确的返回值,默认返回 undefined 
使用 return 语句可以自定义返回值。
return 语句会终止当前函数的执行并返回函数的值。
注意:函数内,return 语句之后的所有代码都不会执行!

事件的概念、种类及作用

事件指的是文档或者浏览器窗口中发生的一些特定交互瞬间。

事件是可以被 JavaScript 侦测到的行为。

事件可以提高网页的交互性。

事件:用户的行为
onblur         元素失去焦点
onfocus        元素获得焦点
oninput        用户输入时触发
onchange       用户改变域的内容(值改变时触发)
onclick        鼠标点击某个对象
ondblclick     鼠标双击某个对象
onkeydown      键盘某个键被按下
onkeyup        键盘某个键被松开
onkeypress     键盘某个键按下并松开
onmousedown    某个鼠标按键被按下
onmousemove    鼠标在某元素上移动
onmouseup      某个鼠标按键被松开
onmouseenter    鼠标移到某元素之上
onmouseleave     鼠标从某元素移开
onmouseover    鼠标移到某元素之上
onmouseout     鼠标从某元素移开
onsubmit       form提交时触发
......

非用户行为:
onload         某个页面或图像被完成加载
计时器
......

事件与函数的关系

JavaScript是事件驱动的语言!

事件通常与函数配合使用,当事件发生时执行对应的函数。

事件依赖于函数执行,函数可以由事件驱动执行。


事件处理程序 --> 函数

处理元素的样式
  dom.style.样式 = 值;

处理元素的属性
  dom.属性 = 值;

处理元素的内容
  表单元素:dom.value
  非表单元素:dom.innerHTML、dom.innerText

处理交互逻辑
    if (true) { // do something }
......

获取元素、元素的值

document.getElementById('元素的id名');
document.getElementsByTagName('标签名');

低版本浏览器不支持(IE6 7 8)
document.getElementsByClassName('元素的类名');
document.querySelector('css选择器');
document.querySelectorAll('css选择器');

表单元素
元素.value

非表单元素
元素.innerHTML
元素.innerText

元素样式
元素.style.样式 = ‘值’;

作用域

在 JavaScript 中, 作用域为可访问变量(包含对象和函数)的集合。

通俗讲,作用域就是起作用的范围。

在 JavaScrip 中,有全局作用域和局部作用域。

全局作用域
整个页面起作用,在<script>内都能访问到;
在全局作用域中有全局对象window,代表一个浏览器窗口,由浏览器创建,可以直接调用;
全局作用域中声明的变量和函数,会作为window对象的属性和方法保存;
变量在函数外声明,即为全局变量,拥有全局作用域。
<script>
    var a = 123;//全局变量
    function fn() {
        console.log(a);//123
    }
    fn();
    console.log(a);//123
</script>


在 JavaScrip 中,函数是唯一拥有自身作用域的代码块。

局部作用域
局部作用域内的变量只能在函数内部使用,所以也叫函数作用域;
变量在函数内声明,即为局部变量,拥有局部作用域。
<script>
    function fn() {
        var b = 456;//局部变量
        console.log(b);//456
    }
    fn();
    console.log(b);//b is not defined
</script>


可以直接给一个未声明的变量赋值(全局变量),但不能直接使用未声明的变量!
因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。
当全局与局部有同名变量的时候,访问该变量将遵循 "就近原则"。

变量的生命周期

全局变量在页面打开时创建,在页面关闭后销毁。
局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

赞(0) 打赏
未经允许不得转载:散人研Blog » JavaScript | 函数的概念及作用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

只要五角钱,我就可以买一包辣条!

支付宝扫一扫打赏

微信扫一扫打赏