实践与提高：js匿名函数与this变量在不同作用域的追踪

JS匿名函数与this

最新推荐文章于 2023-02-09 12:54:59 发布

原创最新推荐文章于 2023-02-09 12:54:59 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #html #框架

JavaScript技术专栏收录该内容

4 篇文章

订阅专栏

本文介绍了JavaScript中的匿名函数及其与this变量的关系。通过实例演示了匿名函数的基本用法，包括如何传递对象作为参数、遍历对象属性及追踪不同作用域中的this变量。

JavaScript匿名函数，在开源软件、插件中大量存在，主要用于初始化对象、实现一个框架；对于习惯了函数常规写法，初次阅读这样的源代码，有点晕，其实，看到最简单的匿名函数原型后，感觉就这么简单。这个实例是对这一用法的小结，有以下几个知识点：

一个最简单的匿名函数原型，
带对象作参数的匿名函数，
使用for/in结构遍历对象属性或子对象，
对this变量在不同的作用域进行追踪。

<!--
胡开明
实践与提高：js匿名函数与this变量
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>js匿名函数与this变量</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript">
            //最简单的匿名函数
            (function(){
                var s="匿名函数";
                alert(s);
            })();//定义匿名函数并调用该匿名函数

        </script>

        <script type="text/javascript">
            //var record={id:"001",label:"javascript技术",price:89.50};
            //带参数的匿名函数
            (function(r){
                for(var i in r){alert(i+":"+r[i]);}//id:001、label:javascript技术、price:89.50
                var me=this;
                alert("this==me is : "+(this==me));//true
                var AboutThis={
                    f:function(){
                        alert("this==me is : "+(this==me));//false
                        alert("this==AboutThis is : "+(this==AboutThis));//true
                        alert("this==AboutThis.f is : "+(this==AboutThis.f));//false
                        AboutThis.f=this;
                        alert("this==AboutThis.f is : "+(this==AboutThis.f));//true
                    }
                };
                AboutThis.f();
                alert("this==me is : "+(this==me));//true
            })({id:"001",label:"javascript技术",price:89.50});
        </script>
    </head>
    <body>
        <h3>实践与提高：匿名函数与this变量</h3>
        <pre>
          匿名函数，在js第三方插件、开源软件中大量存在，主要用于初始化对象、实现一个框架；这个实例是对这一用法的小结。
        </pre>
    </body>
</html>