JavaScript基础视频教程总结(051-060章)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>051-060章总结</title>
  6. </head>
  7. <body>
  8. <pre>
  9. 051. 函数的简介
  10. - 函数也是一个对象
  11. - 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
  12. - 函数中可以保存一些代码在需要的时候调用
  13. - 使用typeof检查一个函数对象时,会返回function
  14. </pre>
  15. <script type="text/javascript">
  16. console.log("第051");
  17. //我们在实际开发中很少使用构造函数来创建一个函数对象
  18. //可以将要封装的代码以字符串的形式传递给构造函数
  19. var fun11 = new Function("console.log('this is a first code')")
  20. //函数中的代码会在函数调用的时候执行,调用函数 语法:函数对象()
  21. //当调用函数时,函数中封装的代码会按照顺序执行
  22. fun11();
  23. /*
  24. * 使用 函数声明 来创建一个函数
  25. * 语法:
  26. * function 函数名([形参1,形参2...形参N]){
  27. * 语句...
  28. * }
  29. */
  30. function fun12(){
  31. console.log("这是我的第二个函数~~~");
  32. document.write("~~~~(>_<)~~~~");
  33. }
  34. fun12();
  35. /*
  36. * 使用 函数表达式 来创建一个函数
  37. * var 函数名 = function([形参1,形参2...形参N]){
  38. * 语句....
  39. * }
  40. */
  41. var fun13 = function(){
  42. console.log("我是匿名函数中封装的代码");
  43. };
  44. fun13();
  45. </script>
  46. <pre>
  47. 052. 函数的参数
  48. 可以在函数的()中来指定一个或多个形参(形式参数)
  49. 多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
  50. 但是并不赋值
  51. </pre>
  52. <script type="text/javascript">
  53. console.log("第052");
  54. // 定义一个用来求两个数和的函数
  55. function sum21(a,b){
  56. console.log("a = "+a);
  57. console.log("b = "+b);
  58. console.log(a+b);
  59. }
  60. //在调用函数时,可以在()中指定实参(实际参数)
  61. //实参将会赋值给函数中对应的形参
  62. sum21(123,456);
  63. /*
  64. * 调用函数时解析器不会检查实参的类型,
  65. * 所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
  66. * 函数的实参可以是任意的数据类型
  67. */
  68. sum21(123,"hello");
  69. sum21(true , false);
  70. /*
  71. * 调用函数时,解析器也不会检查实参的数量
  72. * 多余实参不会被赋值
  73. * 如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
  74. *
  75. */
  76. //sum(123,456,"hello",true,null);
  77. sum21(123);
  78. </script>
  79. <pre>
  80. 053. 函数的返回值
  81. 可以使用 return 来设置函数的返回值
  82. 语法:return 值
  83. return后的值将会作为函数的执行结果返回,
  84. 可以定义一个变量,来接收该结果
  85. 在函数中return后的语句都不会执行
  86. 如果return语句后不跟任何值就相当于返回一个undefined,
  87. 如果函数中不写return,则也会返回undefined
  88. return后可以跟任意类型的值
  89. </pre>
  90. <script type="text/javascript">
  91. console.log("第053");
  92. // 定义一个用来求两个数和的函数
  93. function sum3(arg1,arg2){
  94. var sum = arg1 + arg2
  95. return sum
  96. }
  97. var result = sum3(5,3)
  98. console.log(result)
  99. </script>
  100. <pre>
  101. 054. 实参可以是任何值
  102. </pre>
  103. <script type="text/javascript">
  104. console.log("第054");
  105. // 定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false
  106. function isOu(num){
  107. return num%2 ==0
  108. }
  109. var result = isOu(15)
  110. console.log(result)
  111. // 实参可以是任意的数据类型,也可以是一个对象
  112. // 当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
  113. function sayhello(obj){
  114. var say = "我叫"+obj.name+"我今年"+obj.age
  115. return say
  116. }
  117. var person = {
  118. name:'小二',
  119. age: 18
  120. }
  121. var result = sayhello(person)
  122. console.log(result)
  123. // 实参可以是一个对象,也可以是一个函数
  124. function fun4(a){
  125. console.log("a ="+ a);
  126. }
  127. fun4(sayhello(person))
  128. /*
  129. * sayhello()
  130. * - 调用函数
  131. * - 相当于使用的函数的返回值
  132. *
  133. * sayhello
  134. * - 函数对象
  135. * - 相当于直接使用函数对象
  136. */
  137. </script>
  138. <pre>
  139. 055. 返回值的类型
  140. 返回值可以是任意的数据类型
  141. 也可以是一个对象,也可以是一个函数
  142. </pre>
  143. <script type="text/javascript">
  144. console.log("第055");
  145. function fun51(){
  146. alert("函数要执行了~~~~");
  147. for(var i=0 ; i<5 ; i++){
  148. if(i == 2){
  149. //使用break可以退出当前的循环
  150. //break;
  151. //continue用于跳过当次循环
  152. continue;
  153. //使用return可以结束整个函数
  154. //return;
  155. }
  156. console.log(i);
  157. }
  158. alert("函数执行完了~~~~");
  159. }
  160. fun51();
  161. function fun52(){
  162. //返回一个对象
  163. return {name:"沙和尚"};
  164. }
  165. var a = fun52();
  166. console.log("a = "+a);
  167. function fun53(){
  168. //在函数内部再声明一个函数
  169. function fun54(){
  170. console.log("我是fun54");
  171. }
  172. //将fun4函数对象作为返回值返回
  173. return fun54;
  174. }
  175. a = fun53();
  176. console.log(a);
  177. a();
  178. fun53()();
  179. </script>
  180. <pre>
  181. 056. 立即执行函数
  182. 函数定义完,立即被调用,这种函数叫做立即执行函数
  183. 立即执行函数往往只会执行一次
  184. </pre>
  185. <script type="text/javascript">
  186. console.log("第056");
  187. /*(function(){
  188. alert("我是一个匿名函数~~~");
  189. })();*/
  190. (function(a,b){
  191. console.log("a = "+a);
  192. console.log("b = "+b);
  193. })(123,456);
  194. </script>
  195. <pre>
  196. 057. 方法和枚举属性
  197. </pre>
  198. <script type="text/javascript">
  199. console.log("第057");
  200. var obj7 = {
  201. name:"孙悟空",
  202. age:18,
  203. gender:"男",
  204. address:"花果山"
  205. };
  206. //枚举对象中的属性
  207. //使用for ... in 语句
  208. /*
  209. * 语法:
  210. * for(var 变量 in 对象){
  211. *
  212. * }
  213. *
  214. * for...in语句 对象中有几个属性,循环体就会执行几次
  215. * 每次执行时,会将对象中的一个属性的名字赋值给变量
  216. */
  217. for (var n in obj7){
  218. console.log("属性名:"+n)
  219. console.log("属性值:"+obj7[n])
  220. }
  221. </script>
  222. <pre>
  223. 058. 全局作用域
  224. - 作用域指一个变量的作用的范围
  225. - 在JS中一共有两种作用域:
  226. 1.全局作用域
  227. - 直接编写在script标签中的JS代码,都在全局作用域
  228. - 全局作用域在页面打开时创建,在页面关闭时销毁
  229. - 在全局作用域中有一个全局对象window,
  230. 它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用
  231. - 在全局作用域中:
  232. 创建的变量都会作为window对象的属性保存
  233. 创建的函数都会作为window对象的方法保存
  234. - 全局作用域中的变量都是全局变量,
  235. 在页面的任意的部分都可以访问的到
  236. 变量声明提前
  237. - 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值),
  238. 但是如果声明变量时不适用var关键字,则变量不会被声明提前
  239. 函数的声明提前
  240. - 使用函数声明形式创建的函数 function 函数(){}
  241. 它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
  242. 使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用。
  243. </pre>
  244. <script type="text/javascript">
  245. console.log("第058");
  246. var a = 10;
  247. var c = "hello";
  248. console.log(window.c);
  249. function fun(){
  250. console.log("我是fun函数");
  251. }
  252. window.fun();
  253. //window.alert("hello");
  254. // 变量声明提前
  255. console.log("a2 = "+a2);
  256. var a2 = 123;
  257. fun81();
  258. //函数声明,会被提前创建
  259. function fun81(){
  260. console.log("我是一个fun函数");
  261. }
  262. //fun82();
  263. //函数表达式,不会被提前创建
  264. var fun82 = function(){
  265. console.log("我是fun2函数");
  266. };
  267. fun82();
  268. </script>
  269. <pre>
  270. 059. 函数作用域
  271. - 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
  272. - 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
  273. - 在函数作用域中可以访问到全局作用域的变量
  274. 在全局作用域中无法访问到函数作用域的变量
  275. - 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用
  276. 如果没有则向上一级作用域中寻找,直到找到全局作用域,
  277. 如果全局作用域中依然没有找到,则会报错 ReferenceError
  278. - 在函数中要访问全局变量可以使用window对象
  279. </pre>
  280. <script type="text/javascript">
  281. console.log("第059");
  282. var a01 = "全局a"
  283. function fun91(){
  284. var a01 = "我是fun91的a"
  285. var b01 = "我是fun91的b"
  286. console.log(a01)
  287. function fun92(){
  288. console.log(window.a01)
  289. }
  290. fun92()
  291. }
  292. fun91();
  293. //console.log(b01)
  294. /*
  295. * 在函数作用域也有声明提前的特性,
  296. * 使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
  297. * 函数声明也会在函数中所有的代码执行之前执行
  298. */
  299. function fun93(){
  300. fun94()
  301. function fun94(){
  302. console.log(a02)
  303. }
  304. var a02 = "我是a"
  305. }
  306. fun93()
  307. //在函数中,不适用var声明的变量都会成为全局变量
  308. function fun95(){
  309. d01 = "d01"
  310. }
  311. fun95()
  312. console.log(d01)
  313. //定义形参就相当于在函数作用域中声明了变量
  314. var e = 23
  315. function fun96(e){
  316. console.log(e)
  317. }
  318. fun96() //undefined
  319. </script>
  320. <pre>
  321. 060. debug(调试)
  322. </pre>
  323. <script type="text/javascript">
  324. console.log("第060");
  325. var a60 = 123
  326. function fun60(a60){
  327. console.log(a60)
  328. a60=456
  329. }
  330. fun60() //undefined
  331. console.log(a60) // 123
  332. //
  333. var a61 = 123
  334. function fun61(a61){
  335. console.log(a61)
  336. a61=456
  337. }
  338. fun61(789) //789
  339. console.log(a61) //123
  340. alert(d60)
  341. var a62 = 10
  342. var b60 = 20
  343. c60 = true
  344. function fun62(){
  345. console.log("hello")
  346. }
  347. var d60 = 30
  348. </script>
  349. </body>
  350. </html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值