zoukankan      html  css  js  c++  java
  • Javascript 匿名函数与闭包

    请见如下一个闭包示例:

    复制代码
    color = "red";
    var obj = {
        color: "blue",
        getColor: function () {
            function displayColor() {
                return this.color;
            }
            return displayColor();
        }
    }
    console.log(obj.getColor());
    复制代码

    在getColor函数内部再定义了一个displayColor,再又定义了一个displayColor函数,从而形成闭包,最后将地上displayColor函数返回,这里发现这样定义其实作用不大,可以使用匿名函数替代直接返回:

    复制代码
    color = "red";
    var obj = {
        color:"blue",
        getColor: function () {
            return function() {
                 return this.color;
            }
        }
    }
    console.log(obj.getColor()());    //输出 red
    复制代码

    闭包中匿名函数和this对象

    在javascript 中this 对象是基于函数的执行环境绑定的:在全局函数中, this等于全局环境即 window (浏览器环境)或者globle(node中),而当函数作为某个对象的方法调用时this等于该对象。不过匿名函数的执行环境具有全局性,其this 通常指向window(浏览器)或者globle(node环境),因此上面例子中,输出的是全局对象的 color定义。

    为什么没有获得闭包外面定义的blue呢?

    如前文所述,函数被调用时,其活动对象会取得两个特殊的变量,arguments和this,因此在搜索的时候在作用域链的最前端即当前活动对象中就查找到了,不会进一步向上层查找。不过我们可以把外部作用域的this对象保存在一个闭包能够访问到的变量里,这样就能够访问外层对象了:

    复制代码
    color = "red";
    var obj = {
        color:"blue",
        getColor: function () {
            var self=this;
            return function() {
                 return self.color;
            }
        }
    }
    console.log(obj.getColor()());   //输出 blue
    复制代码

    最后,看一道百度2015年 前端开发南京站笔试题:

    复制代码
    var myObject = {
        foo: "bar",
        func: function() {
            var self = this;
            console.log("outer func:  this.foo = " + this.foo);    //输出 bar
            console.log("outer func:  self.foo = " + self.foo);    //输出 bar
            (function() {
                console.log("inner func:  this.foo = " + this.foo);   //输出 undefined
                console.log("inner func:  self.foo = " + self.foo);   //输出 bar
            }());
        }
    };
    myObject.func();
    复制代码

    问,输出结果是什么? 相信现在应该比较好理解了。

  • 相关阅读:
    11.SpringBoot学习(十一)——JDBC之 Spring Boot JdbcTemplate
    10.SpringBoot学习(十)——JDBC之 Spring Boot Jpa
    9.SpringBoot学习(九)——Spring Boot Admin使用
    8.SpringBoot学习(八)——Spring Boot Actuator监控
    7.SpringBoot学习(七)——Spring Boot Email发送邮件
    5.Gradle组件说明
    3.Gradle构建Java项目
    6.Gradle多模块项目
    flash解析json格式
    java窗体与Flash交互
  • 原文地址:https://www.cnblogs.com/jymz/p/4027309.html
Copyright © 2011-2022 走看看