目录
函数概念及作用
函数:函数就是具有特定功能的代码段 (是做某件事或实现某种功能)
函数作用:将特定功能的代码段放到函数中,重复执行 调用。能提高代码的复用性
函数的封装:把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
函数的定义方式
基本函数(命名函数)
函数定义: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); //50var 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)
-
在事件处理函数(将一个函数赋值给某个事件,就称之为事件处理函数)中,this指向当前触发事件的这个元素 (谁调用他 他就指向谁)
-
直接在全局作用域中输出,this指向window(window属于浏览器的顶层对象,全局作用域下 所有变量和函数都属于window的属性,调用时可省略window. )
-
函数调用就看前边有没有点,有点点前面是谁就是谁,没有点就是window