原文链接:http://www.cnblogs.com/daysme/p/6127088.html 
原文博客:http://www.cnblogs.com/daysme

JS函数和变量 

函数
函数是由事件或者当它被调用时执行的可重复使用的代码块。 是一个独立的代码块,实现特定功能模块。 函数他不进行调用触发的话,不会自己主动执行。 像ATM机一样,不去取钱的话不会自己吐钱。  函数分为系统函数自定义函数
系统函数
比如:alert(),当浏览器看到alert(1)时就会直接弹出1。
系统函数是系统固有的,预定义的。 自定义函数
当系统函数不能满足要求时,需要自己定义函数。 创建自定义函数: 通过 function 关键字创建。
语法一:
1
2
3
function 函数名(){
  执行的代码
}
语法二:
1
2
3
var 函数名=function(){
  执行的代码
}
不能自定义系统函数。 当调用该函数时,会执行函数内的代码。 可以在某事件发生的时候直接调用函数,如点击时、鼠标移入时。

有名函数和无名函数:
都不会自动执行。 无名函数:
直接定义一个无名函数而不调用就会报错:
1
2
3
function(){
  alert(1)
}
而这样如果定义并用调用就不会报错:
1
2
3
btn.onclick=function(){
  alert(1)
}

调用函数的方式
window 调用(直接调用),如: test() ,不能没有括号。
定时器调用
事件调用 函数也遵循脚本解析规则:既然由上到下,下面的函数为什么还会执行? 因为所有的函数会被提(相当于移动代码块)到脚本最前面。
1
2
3
4
test()
function test(){
  alert(1)
}
函数名后面的括号: 在调用和定义函数的时候,可以向其传递值,这些值被叫做参数。个数不限,多个由逗号隔开。 
参数的声明方式: 声明函数时的参数叫形式参数,形参,下面的形参是a,b。
1
2
3
4
function test(a,b){
    alert(a+b)
  }
test(1,2)
调用函数时传入的参数叫实际参数,实参,上面的实参是1,2,运行过程为1+2,结果为3。 

参数变量
1
2
3
4
5
6
7
8
function test(a){
  //相当于在函数内声明变量a
  //var a;
  alert(a)
}
//如果调用时不传入值,不会报错:
//如调用上例函数:
test() //弹出 undefined

return 每个函数自带的。可以打断函数的运行并返回一个值。 

打断函数:
1
2
3
4
5
6
function test(){
  alert(1)
  return
  alert(2)
}
test() //只会弹出1,不弹出2
打断函数并返回值:
1
2
3
4
5
6
function test(){
  alert(1)
  return "断线了"
  alert(2)
}
console.log(test()) //只会弹出1,不弹出2,在控制台输出test()返回的“断线了”。
return 默认返回 undefined 。 return 只能在一个函数里使用一次,多个return只会返回第一个return值。 

函数中的内置对象: 
arguments 对象包含了函数调用的参数数组, arguments.length 相当于实参个数。 函数名.length 形参个数,函数名无括号(如果有括号就立即执行了)。
1
2
3
4
5
6
function test(a,b,c){
  console.log(arguments) //数组
  console.log(arguments.length) //实参个数
  console.log(test.length) //形参个数
}
test(1,2)
上面的调用输出: 
[1,2] //数组
2 //实参个数
3 //形参个数  event ,也是函数的内部对象。
1
2
3
4
5
6
var oDiv=document.getElementsByTagName("div");
oDiv[0].onclick=function(a){
  console.log(a); //点击div时输出了一些事件信息。输出 MouseEvent {...}
  //为什么输出MouseEvent而不是其他?因为MouseEvent是函数的第一个内置对象。
  console.log(arguments); //输出 [MouseEvent]
}

this 谁触发的事件,this就是谁。
1
2
3
4
var oDiv=document.getElementsByTagName("div");
oDiv[0].onclick=function(a){
  console.log(this); //输出oDiv[0],即第一个div。
}
为什么是oDiv[0]而不是onclick? 
如果谁打了你一下,你会问:“谁打了我?”
然后我告诉你:“手打了你。”
你肯定也不想得到这个答案吧。
你想得到一个真实的对象。
那js也不是拿来搞笑的。
js和你一样,需要得到一个具体的对象。  局部变量全局变量 以函数为分界线,定义在函数里面的的变量是局部变量。定义在函数外面的变量是全局变量。
1
2
3
4
5
6
test()
function test(){
  var a=1;
  console.log(a) //输出1
}
console.log(a) //输出错误,外面的a不能使用不是test里面的a
函数内的变量调用完成后会删除。
1
2
3
4
5
var a=1;
function test(){
  console.log(a) //输出1
}
console.log(a) //输出1
函数外的变量只有当页面关闭后会被删除。
1
2
3
4
5
6
function test(){
  //var a; //1
  console.log(a); //2因为函数内3处有 var 关键字声明;所以声明(只声明不赋值,赋值依然在3处)会被执行在函数顶部1位置。
  var a=1; //3
}
test(); //输出 undefinde;
例二
1
2
3
4
5
6
7
8
9
var a=10;
function fn(){
  //var a; //1 因为下面3处有var关键字声明变量a;所以var会被提入函数最顶部声明(但不赋值,赋值依然在3处)。
  var b=10;
  console.log(a); //2 输出 undefined
  console.log(b);
  var a="123"; //3 这里有var
}
fn();

JS函数和变量的更多相关文章

  1. js 函数和变量的提升

    js 函数和变量的提升 1. 函数的作用域: js中 ,函数的作用域为函数,而不是大括号. var hei = 123;if(true){ hei = 456;}console.log(hei);// ...

  2. js函数和变量的执行顺序【易错】

    js函数和变量的声明与执行顺序 一.函数执行顺序 1.正常顺序 function f(){ alert(2); } f(); //alert 2 所有浏览器都能测试通过. 2.倒序调用 f(); // ...

  3. js函数和变量的声明与执行顺序

    一.函数执行顺序 1.正常顺序 function f(){ alert(2); } f(); //alert 2 所有浏览器都能测试通过. 2.倒序调用 f(); //alert 2 function ...

  4. JS函数和变量名称冲突

    在JS中如果函数名与变量名冲突,JS是怎么执行的? <script> console.log(sum);//function sum(){} function sum(){} var su ...

  5. [转]js 判断js函数、变量是否存在

    本文转自:http://blog.csdn.net/liang4571231/article/details/4042519 在进行js编程时,总会出现可能一些函数或者变量未定义而被引用,导致报错的情 ...

  6. js函数、变量提升(hoisting)

    其实我只是想复习下变量提升的,然后看到了函数提升,然后再看到了函数声明.函数表达式. 有必要怀着敬仰之心提及园子里的TOM大叔的解密命名函数表达式,不愧是大叔,好好地脑补了下基础知识. 在ECMASc ...

  7. js函数与变量同名

    console.log(a); var a = 3; function a(){} 输出的结果是:[Function: a] 注意一下几点就能知道原因了! 1)函数声明会置顶2)变量声明也会置顶3)函 ...

  8. js 判断js函数、变量是否存在 JS保存和删除cookie操作,判断cookie是否存在的方法

    //是否存在指定函数 function isExitsFunction(funcName) {    try {        if (typeof(eval(funcName)) == " ...

  9. JS函数、变量作用域

    函数参数 函数的()中指定一个或多个形参(形式参数),多个形参之间用,号隔开,声明形参相当于在函数内部声明了对应的变量,但不赋值.在调用时在()中指定实参  调用时解析器不会检查实参类型.数量,实参可 ...

随机推荐

  1. spark textFile 困惑与解释

    在编写spark测试应用时, 会用到sc.textFile(path, partition) 当配置为spark分布式集群时,当你读取本地文件作为输入时, 需要将文件存放在每台work节点上. 这时会 ...

  2. Python-实现对表插入百万条数据

    新手小白写的,我自己都不知道对不对,先写下来记着,以后掌握更多Python知识后,再来看下写的对不对. 题目:造一百万条大学生的基本信息(学校.专业.姓名.学号) 分析思路:利用Python的MySQ ...

  3. java去中文

    java 去中文 package a.b; public class TrimCNTool { public static boolean checkCNChar(char oneChar) { if ...

  4. iOS 发送Email

    第一步:在程序中添加MessageUi.framework框架 第二步:引入#import <MessageUI/MessageUI.h>头文件 第三步:代码实现 3.1判断是否可以发送邮 ...

  5. POJ2762 UV

    题意:n个山洞,对于每两个山洞s,e,都满足s可以到达e或者e可以到达s,则输出Yes,否则输出No. ---------------------------------------- 第一个缩点的题 ...

  6. C++队列中应该注意的一些问题

    第一次在C++中写类,新手,见笑 #include<iostream.h>#include<iostream>template<typename T> class ...

  7. win7 64位 mongodb2.6.0 安装服务启动

    Workaround to install as a service You can manually install 2.6.0 as a service on Windows from an Ad ...

  8. HTML中doctype以及target论述

    首先,为什么要在每个html文档开头写入<!doctype......>呢.                                                         ...

  9. vim编辑格式与环境设置

    set wildmenu set backspace= set pastetoggle=<f3> filetype on filetype plugin on filetype inden ...

  10. Visual studio 非常好的插件

    1. Productive power tools2015 2. Visual studio spell checker