网站导航
> 文档中心 > 从零开始学前端：函数 --- 今天你学习了吗？（JS：Day8）

从零开始学前端：函数 --- 今天你学习了吗？（JS：Day8）

网友: 文档中心 2022-04-13 22:24:43

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：九九乘法表、全选反选全不选 — 今天你学习了吗？（JS：Day7）

文章目录

  • 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
    • 前言
    • 第八节课：函数
      • 一、实参、形参、不定参
      • 二、返回值
      • 三、函数表达式种类
      • 四、获取内部样式
      • 五、封装

前言

补的有点简陋了，大家见谅，等我毕设搞完，再好好整理一下。

第八节课：函数

一、实参、形参、不定参

  1. 实参与形参
  • 实参：函数自执行时，括号里面的内容；
  • 形参：函数定义/声明，原括号里面的内容；
 // 参数：根据我们不同的指令，输出不同的内容。 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参与运算的话会报NaN fn(3, 1);

效果：
在这里插入图片描述

  1. 不定参

argument不定参：
会根据每个参数执行意义不同一一对应上参数。
argument：ES6就被废除了

 function fn() {     console.log(arguments);     /*  不定参(argument),是一个结构看起来非常类似数组的对象；      类数组对象都有一些跟数组相似的特性；   1. 取值用[下标]：下标从0开始;   2. 拥有length属性；     */ } fn(2, 4, 6, 8);

效果：
从零开始学前端：函数 --- 今天你学习了吗？（JS：Day8）

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。
从零开始学前端：函数 --- 今天你学习了吗？（JS：Day8）

三、函数表达式种类

一共有7种函数表达式的写法：

  1. var a = function(){console.log(1)}
  2. (function(){console.log('2');})()
  3. (function(){console.log('3');}())
  4. +function(){console.log('4');}()
  5. -function(){console.log('5');}()
  6. ~function(){console.log('6');}()
  7. !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，如果

改为

则可以显示，说明this.style.width获取的是行内样式。
从零开始学前端：函数 --- 今天你学习了吗？（JS：Day8）

如果要获取内部样式，需要使用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报undefined     var 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报undefined     var 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报undefined     return ele.currentStyle || getComputedStyle(ele); } getStyle(mybox) console.log(getStyle(mybox))    </script></body></html>

预习：从零开始学前端：作用域、执行顺序 — 今天你学习了吗？（JS：Day9）

小吃零食网

网络标签：

相关问题