从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
复习：从零开始学前端：九九乘法表、全选反选全不选 — 今天你学习了吗？（JS：Day7）
文章目录
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）前言第八节课：函数一、实参、形参、不定参二、返回值三、函数表达式种类四、获取内部样式五、封装前言
补的有点简陋了，大家见谅，等我毕设搞完，再好好整理一下。
第八节课：函数
一、实参、形参、不定参
实参与形参实参：函数自执行时，括号里面的内容；形参：函数定义/声明，原括号里面的内容；// 参数：根据我们不同的指令，输出不同的内容。function fn(a, b, c) {// 本行的fn(形参)，括号内的参数则为形参console.log(a);console.log(b);console.log(c);console.log(a + b + c);}// 下面是函数执行，fn(实参),括号内的参数为实参fn(1, 2, 3);// 当实参数量大于形参时，多余的参数会直接舍弃fn(2, 4, 6, 8);// 当实参数量小于形参时，由于参数不够，没有的参数则会显示undefined,undefined参与运算的话会报NaNfn(3, 1);
效果：
不定参
argument不定参：
会根据每个参数执行意义不同一一对应上参数。
argument：ES6就被废除了
function fn() {console.log(arguments);/*不定参(argument),是一个结构看起来非常类似数组的对象；类数组对象都有一些跟数组相似的特性；1. 取值用[下标]：下标从0开始;2. 拥有length属性；*/}fn(2, 4, 6, 8);
效果：
arguments不是数组，是类数组。
区别：
类数组不一定有数组的属性，例如foreach（数组遍历，之后会学到，arguments可进行for循环）
es5中有不定参，es6中无不定参。
二、返回值
return：接收值为undefined，用来设定函数的返回值；
var foo = function () {console.log(123)console.log(arguments)return 2}// fn接收到的是foo() 执行后返回的值，如果没有return的话，此值为undefined，有return时，return什么返回什么var fn = foo(1);console.log(fn);
效果：
如果没有return时，console.log(fn)输出为undefined。
三、函数表达式种类
一共有7种函数表达式的写法：
var a = function(){console.log(1)}(function(){console.log('2');})()(function(){console.log('3');}())+function(){console.log('4');}()-function(){console.log('5');}()~function(){console.log('6');}()!function(){console.log('7')}()
四、获取内部样式
优先级：行内样式>内部样式
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: #abc;margin: 100px auto;}</style></head><body><div class="box"></div><script>var mybox = document.getElementsByClassName("box")[0]mybox.onclick = function () {console.log(this.style.width)}</script></body></html>
结果：
结果发现并没有输出200px，如果
<div class="box"></div>改为<div class="box" style="width: 100px;"></div>则可以显示，说明this.style.width获取的是行内样式。
如果要获取内部样式，需要使用getComputedStyle(mybox).width(适用主浏以及高版本IE的用法)
浏览器的分界线
IE8以上
IE8及其以下
getComputedStyle这个属性IE8以下浏览器就无法使用，
若想获取需要使用mybox.currentStyle.width,但是主流浏览器不适用，
若想要两个都兼容，则需要进行封装。
五、封装
封装需要实现的需求：
在主流或好版本IE浏览器中能显示获取内部样式
高版本获取样式：getComputedStyle(对象)
低版本获取样式：对象.currentStyle
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: #abc;margin: 100px auto;}</style></head><body><div class="box"></div><script>var mybox = document.getElementsByClassName("box")[0]function getStyle(ele) {// 在主流浏览器中obj.currentStyle报undefinedvar obj;if (ele.currentStyle) {console.log('低版本IE浏览器')obj = ele.currentStyle} else {console.log('主流浏览器')obj = getComputedStyle(ele)}// console.log(obj.width)return obj}getStyle(mybox)console.log(getStyle(mybox))</script></body></html>
效果：
更改优化代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: #abc;margin: 100px auto;}</style></head><body><div class="box"></div><script>var mybox = document.getElementsByClassName("box")[0]function getStyle(ele) {// 在主流浏览器中obj.currentStyle报undefinedvar obj;obj = ele.currentStyle ? ele.currentStyle : getComputedStyle(ele);return obj;}getStyle(mybox)console.log(getStyle(mybox))</script></body></html>
再次优化：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: #abc;margin: 100px auto;}</style></head><body><div class="box"></div><script>var mybox = document.getElementsByClassName("box")[0]function getStyle(ele) {// 在主流浏览器中obj.currentStyle报undefinedreturn ele.currentStyle || getComputedStyle(ele);}getStyle(mybox)console.log(getStyle(mybox))</script></body></html>
预习：从零开始学前端：作用域、执行顺序 — 今天你学习了吗？（JS：Day9）
