JavaScript基础视频教程总结（051-060章）

<!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>

所有基础课程链接：

1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）

5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）

9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）

13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）

另外，欢迎关注我的新浪微博

JavaScript基础视频教程总结（051-060章）的更多相关文章

JavaScript基础视频教程总结（131-140章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（121-130章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（111-120章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（101-110章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（091-100章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
JavaScript基础视频教程总结（081-090章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（071-080章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（061-070章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（001-010章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

getPos,offsetTop
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
将事件绑定在html标签中和js动态绑定的区别
一:绑定在标签中: 能够一眼看出那些元素绑定了什么事件. 只能将元素和事件逐一实现绑定. 二js动态绑定: 可以一次动态的给多个元素绑定事件,批量绑定事件. html标签绑定的缺点: ①:可能有时间差 ...
javascript第四节其它引用对象
单体对象 Global对象(全局)这个对象不存在,无形的对象其内部定义了一些方法和属性:encodeURL.encodeURIComponent.decodeURI.decodeURICompone ...
字符设备 register&lowbar;chrdev&lowbar;region()、alloc&lowbar;chrdev&lowbar;region() 和 register&lowbar;chrdev() （转载）
1. 字符设备结构体内核中所有已分配的字符设备编号都记录在一个名为 chrdevs 散列表里.该散列表中的每一个元素是一个 char_device_struct 结构,它的定义如下: static ...
Mysql 正则获取字段的交集【转】
问题描述比如table1中有两条记录 name no a 2,9 b 8,10 然后有一串字符串,是0,1,2,3,4 然后通过一条sql,找出no为2,9的记录来``` 因为字符串中有 ...
读取生产环境go语言的最佳实践展示
近期看了一篇关于go产品开发最佳实践的文章,go-in-procution.作者总结了他们在用go开发过程中的非常多实际经验,我们非常多事实上也用到了.鉴于此,这里就简单的写写读后感,兴许我也争取能将 ...
Day15 jss整体结构梳理
JS DOM--- 两个步骤: 1 查找标签 (1)直接查找 document.getElementById("idname") // dom对象 document.getElem ...
MySQL 基础查询
别名查询数据时,如果表名很长,使用起来不方便,此时,就可以为表取一个别名,用这个别名来代替表的名称 .同时为了更好的显示所查询出来的字段,也可以给字段取别名. 一,表作为别名: mysql> ...
Windows MySQL测试数据库employees的导入
一: 首先下载employees测试数据库 https://launchpad.net/test-db/ 二:用文本编辑器打开其中的employees.sql文件,将第38行的set storage_ ...
windwos安装RabbitMQ
目录 windows 安装RabbitMQ 安装erlang 安装rabbitmq 添加windows环境变量检测rabbitmq状态启动web管理插件 rabbitmq服务 windows 安装 ...