- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>051-060章总结</title>
- </head>
- <body>
- <pre>
- 051. 函数的简介
- - 函数也是一个对象
- - 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
- - 函数中可以保存一些代码在需要的时候调用
- - 使用typeof检查一个函数对象时,会返回function
- </pre>
- <script type="text/javascript">
- console.log("第051");
- //我们在实际开发中很少使用构造函数来创建一个函数对象
- //可以将要封装的代码以字符串的形式传递给构造函数
- var fun11 = new Function("console.log('this is a first code')")
- //函数中的代码会在函数调用的时候执行,调用函数 语法:函数对象()
- //当调用函数时,函数中封装的代码会按照顺序执行
- fun11();
- /*
- * 使用 函数声明 来创建一个函数
- * 语法:
- * function 函数名([形参1,形参2...形参N]){
- * 语句...
- * }
- */
- function fun12(){
- console.log("这是我的第二个函数~~~");
- document.write("~~~~(>_<)~~~~");
- }
- fun12();
- /*
- * 使用 函数表达式 来创建一个函数
- * var 函数名 = function([形参1,形参2...形参N]){
- * 语句....
- * }
- */
- var fun13 = function(){
- console.log("我是匿名函数中封装的代码");
- };
- fun13();
- </script>
- <pre>
- 052. 函数的参数
- 可以在函数的()中来指定一个或多个形参(形式参数)
- 多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
- 但是并不赋值
- </pre>
- <script type="text/javascript">
- console.log("第052");
- // 定义一个用来求两个数和的函数
- function sum21(a,b){
- console.log("a = "+a);
- console.log("b = "+b);
- console.log(a+b);
- }
- //在调用函数时,可以在()中指定实参(实际参数)
- //实参将会赋值给函数中对应的形参
- sum21(123,456);
- /*
- * 调用函数时解析器不会检查实参的类型,
- * 所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
- * 函数的实参可以是任意的数据类型
- */
- sum21(123,"hello");
- sum21(true , false);
- /*
- * 调用函数时,解析器也不会检查实参的数量
- * 多余实参不会被赋值
- * 如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
- *
- */
- //sum(123,456,"hello",true,null);
- sum21(123);
- </script>
- <pre>
- 053. 函数的返回值
- 可以使用 return 来设置函数的返回值
- 语法:return 值
- return后的值将会作为函数的执行结果返回,
- 可以定义一个变量,来接收该结果
- 在函数中return后的语句都不会执行
- 如果return语句后不跟任何值就相当于返回一个undefined,
- 如果函数中不写return,则也会返回undefined
- return后可以跟任意类型的值
- </pre>
- <script type="text/javascript">
- console.log("第053");
- // 定义一个用来求两个数和的函数
- function sum3(arg1,arg2){
- var sum = arg1 + arg2
- return sum
- }
- var result = sum3(5,3)
- console.log(result)
- </script>
- <pre>
- 054. 实参可以是任何值
- </pre>
- <script type="text/javascript">
- console.log("第054");
- // 定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false
- function isOu(num){
- return num%2 ==0
- }
- var result = isOu(15)
- console.log(result)
- // 实参可以是任意的数据类型,也可以是一个对象
- // 当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
- function sayhello(obj){
- var say = "我叫"+obj.name+"我今年"+obj.age
- return say
- }
- var person = {
- name:'小二',
- age: 18
- }
- var result = sayhello(person)
- console.log(result)
- // 实参可以是一个对象,也可以是一个函数
- function fun4(a){
- console.log("a ="+ a);
- }
- fun4(sayhello(person))
- /*
- * sayhello()
- * - 调用函数
- * - 相当于使用的函数的返回值
- *
- * sayhello
- * - 函数对象
- * - 相当于直接使用函数对象
- */
- </script>
- <pre>
- 055. 返回值的类型
- 返回值可以是任意的数据类型
- 也可以是一个对象,也可以是一个函数
- </pre>
- <script type="text/javascript">
- console.log("第055");
- function fun51(){
- alert("函数要执行了~~~~");
- for(var i=0 ; i<5 ; i++){
- if(i == 2){
- //使用break可以退出当前的循环
- //break;
- //continue用于跳过当次循环
- continue;
- //使用return可以结束整个函数
- //return;
- }
- console.log(i);
- }
- alert("函数执行完了~~~~");
- }
- fun51();
- function fun52(){
- //返回一个对象
- return {name:"沙和尚"};
- }
- var a = fun52();
- console.log("a = "+a);
- function fun53(){
- //在函数内部再声明一个函数
- function fun54(){
- console.log("我是fun54");
- }
- //将fun4函数对象作为返回值返回
- return fun54;
- }
- a = fun53();
- console.log(a);
- a();
- fun53()();
- </script>
- <pre>
- 056. 立即执行函数
- 函数定义完,立即被调用,这种函数叫做立即执行函数
- 立即执行函数往往只会执行一次
- </pre>
- <script type="text/javascript">
- console.log("第056");
- /*(function(){
- alert("我是一个匿名函数~~~");
- })();*/
- (function(a,b){
- console.log("a = "+a);
- console.log("b = "+b);
- })(123,456);
- </script>
- <pre>
- 057. 方法和枚举属性
- </pre>
- <script type="text/javascript">
- console.log("第057");
- var obj7 = {
- name:"孙悟空",
- age:18,
- gender:"男",
- address:"花果山"
- };
- //枚举对象中的属性
- //使用for ... in 语句
- /*
- * 语法:
- * for(var 变量 in 对象){
- *
- * }
- *
- * for...in语句 对象中有几个属性,循环体就会执行几次
- * 每次执行时,会将对象中的一个属性的名字赋值给变量
- */
- for (var n in obj7){
- console.log("属性名:"+n)
- console.log("属性值:"+obj7[n])
- }
- </script>
- <pre>
- 058. 全局作用域
- - 作用域指一个变量的作用的范围
- - 在JS中一共有两种作用域:
- 1.全局作用域
- - 直接编写在script标签中的JS代码,都在全局作用域
- - 全局作用域在页面打开时创建,在页面关闭时销毁
- - 在全局作用域中有一个全局对象window,
- 它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用
- - 在全局作用域中:
- 创建的变量都会作为window对象的属性保存
- 创建的函数都会作为window对象的方法保存
- - 全局作用域中的变量都是全局变量,
- 在页面的任意的部分都可以访问的到
- 变量声明提前
- - 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值),
- 但是如果声明变量时不适用var关键字,则变量不会被声明提前
- 函数的声明提前
- - 使用函数声明形式创建的函数 function 函数(){}
- 它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
- 使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用。
- </pre>
- <script type="text/javascript">
- console.log("第058");
- var a = 10;
- var c = "hello";
- console.log(window.c);
- function fun(){
- console.log("我是fun函数");
- }
- window.fun();
- //window.alert("hello");
- // 变量声明提前
- console.log("a2 = "+a2);
- var a2 = 123;
- fun81();
- //函数声明,会被提前创建
- function fun81(){
- console.log("我是一个fun函数");
- }
- //fun82();
- //函数表达式,不会被提前创建
- var fun82 = function(){
- console.log("我是fun2函数");
- };
- fun82();
- </script>
- <pre>
- 059. 函数作用域
- - 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
- - 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
- - 在函数作用域中可以访问到全局作用域的变量
- 在全局作用域中无法访问到函数作用域的变量
- - 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用
- 如果没有则向上一级作用域中寻找,直到找到全局作用域,
- 如果全局作用域中依然没有找到,则会报错 ReferenceError
- - 在函数中要访问全局变量可以使用window对象
- </pre>
- <script type="text/javascript">
- console.log("第059");
- var a01 = "全局a"
- function fun91(){
- var a01 = "我是fun91的a"
- var b01 = "我是fun91的b"
- console.log(a01)
- function fun92(){
- console.log(window.a01)
- }
- fun92()
- }
- fun91();
- //console.log(b01)
- /*
- * 在函数作用域也有声明提前的特性,
- * 使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
- * 函数声明也会在函数中所有的代码执行之前执行
- */
- function fun93(){
- fun94()
- function fun94(){
- console.log(a02)
- }
- var a02 = "我是a"
- }
- fun93()
- //在函数中,不适用var声明的变量都会成为全局变量
- function fun95(){
- d01 = "d01"
- }
- fun95()
- console.log(d01)
- //定义形参就相当于在函数作用域中声明了变量
- var e = 23
- function fun96(e){
- console.log(e)
- }
- fun96() //undefined
- </script>
- <pre>
- 060. debug(调试)
- </pre>
- <script type="text/javascript">
- console.log("第060");
- var a60 = 123
- function fun60(a60){
- console.log(a60)
- a60=456
- }
- fun60() //undefined
- console.log(a60) // 123
- //
- var a61 = 123
- function fun61(a61){
- console.log(a61)
- a61=456
- }
- fun61(789) //789
- console.log(a61) //123
- alert(d60)
- var a62 = 10
- var b60 = 20
- c60 = true
- function fun62(){
- console.log("hello")
- }
- var d60 = 30
- </script>
- </body>
- </html>
JavaScript基础视频教程总结(051-060章)
最新推荐文章于 2024-01-05 23:34:21 发布