1 函数
应用场景:当某些事件触发时才执行的代码块。
程序的语句是按顺序执行的,如果我们需要在满足某些条件或发生某些事件时执行,就需要使用函数。
1.1 定义
函数是能实现一定功能的代码块
作用:对事件做出响应,可重复执行
声明:function关键字
1.2 调用
使用函数名称+括号的方式调用;
方式:
程序中直接调用: test();
元素上调用:<button onclick="change()">点我</button>
程序中添加事件绑定
function test(){
alert('hans')
}
function test1(){
alert('test1')
}
var pTag = document.getElementById('change_color');
pTag.onclick=test;
//pTag.οnclick=test1;
pTag.addEventListener('click',test);
pTag.addEventListener('click',test1);
on绑定和addEventListener绑定的区别:
on只能绑定一个函数,后者会覆盖前者;addEventListener可以绑定多个函数,程序依次执行。
1.3 参数
参数就是调用函数时传给函数的数据
实例:计算器功能,输入两个数字,输出它们的和;
调用函数的时候需要给函数传入两个数字,函数接收这两个数字,然后输出他们的和
function sum(x,y){
console.log(x+y);
}
sum(3,4);
用来接收参数的x,y称为形参,调用时传入的3,4称为实参
Arguments对象,可以获取传入的所有参数
参数和变量没有本质区别
上述例子可以不用参数来实现
1.4 返回值
有些函数执行后会计算出一些数据,我们可以使用return将数据返回,供以后使用return 语句,将值返回调用它的地方
function sum(x, y) {
var z = x + y;
return z;
}
var aa = sum(3, 4);
alert(aa);
1.5 变量作用域和生命周期
全局作用域,局部作用域,块级作用域,循环作用域
Var
全局变量:从声明到关闭页面
局部作用域:从声明到函数执行结束
Let
块级作用域:在指定块的作用域之外无法访问的变量,它存在于
1、函数内部
2、{}之间的块区域内
循环作用域:只在当前循环内部有效
作用域链:子对象会一级一级向上寻找所有父对象的变量,反之不行。
1.6 函数种类
1.6.1 声明函数
使用function关键字声明,使用函数名称加括号调用
函数提升:可以吧函数放在调用后面(执行代码之前会先读取函数声明)
例如:function my(){} 就是声名函数
注意:如果函数名称重复,下面的函数会覆盖上面的
1.6.2 匿名函数
函数如果没有名字,就是匿名函数。
匿名函数不能直接调用。
1、通过变量调用
把匿名函数赋给一个变量,通过变量调用来调用匿名函数
var a = (function(){});
a();
2、直接调用(也叫自调用函数或者立即函数)
两种写法:
(function(){}());
(function(){})();
1.6.3 函数表达式
在使用之前必须先赋值
var obj = function(){
alert("a")
}
obj();
1.6.4 拓展(回调函数、闭包函数)
1、回调函数
函数作为参数调用
//函数声明,fn是一个参数同时又是一个变量
function f1(fn){
fn(); //函数调用--说明fn这个变量中存储的是一个函数
}
function f2(){
console.log("函数可以作为参数使用");
}
f1(f2); //调用f1,将f2作为参数传进去
//结果:函数可以作为参数使用
2、闭包函数
闭包是一个可以读取其他函数内部变量的函数
//例1
function fn(){
n = 100;
function fn1() {
console.log(n);
}
return fn1;
}
var result = fn();
result(); //100
//例2
function fn(){
n = 100;
nadd = function(){
n += 1;
}
function fn1() {
console.log(n);
}
return fn1;
}
var result = fn();
result(); //100
nadd();
result(); //101
闭包的优缺点:
可以读取其他函数内部的变量,并让这些值永远保存在内存中;但是它会携带包含他函数的作用域,因此占的内存会比较多
1.7 This指向
This关键字指向当前对象,谁调用函数,this就指向谁