• javascript 自执行匿名函数


    1、函数声明和函数表达式

    1 function func(){ //函数声明
    2             ...
    3  }

    函数表达式又分为两种

    第一种是命名函数表达式

    1 var func = function box(){
    2             ...
    3 }

    注意:上述表达式,func可以在全局范围内找到,而box只能再函数体内使用

    第二种是匿名函数表达式

    1 var func = function (){ //把一个匿名函数赋值给一个变量
    2             ...
    3         }

    2、自执行的匿名函数

    在全局作用域内定义的所有东西,在任何地方都能找到

    1 var func = function(){
    2         console.log('Hello world!')
    3 }
    4 func()    //Hello world!

    为了不让自己的变量和函数暴露在全局作用域中,我们可以封装在函数内部

    1 var func = function(){
    2         var greeting = 'Hello world!'
    3 }
    4 console.log(greeting)   //Uncaught ReferenceError: greeting is not defined

    上面是显示的调用,更简洁的写法就是像下面这样

    1 (function(){
    2     var greeting = 'Hello world!'
    3 }())
    4 console.log( greeting ) //Uncaught ReferenceError: greeting is not defined

    这就是自执行匿名函数,向自执行的匿名函数传递参数

    1 (function(myVar){
    2     alert(myVar)
    3 }("Hello world")) //Hello world

    例子1:

     1 var person = (function(){
     2     var name = 'Nelsen',
     3           age = 30;
     4     return {
     5         name : name + '-' + age,
     6         age : age
     7             }
     8 })()
     9 person.age = 60;
    10 console.log( person.age )
    11 console.log( person.name ) //Nelsen-30
    12 console.log( person.age )     //30
    13 console.log( person.name ) //Nelsen-30

    此例中,匿名函数返回了一个对象,此对象有两个属性!当我们要重新设置内部属性时,无法覆盖

     1     var person = (function(){
     2             var name = 'Nelsen',
     3             age = 30;
     4             return {
     5                 name : function(){
     6                     return name + '-' + age;
     7                 },
     8                 setAge : function( newAge ){
     9                     age = newAge;
    10                 }
    11                 
    12             }
    13         })()
    14         console.log( person.name() ) //Nelsen-30
    15         person.setAge(80);     //30
    16         console.log( person.name() ) //Nelsen-80

    像上例这样改写就能更新了

    例子2:

    1     var person = (function(){
    2             var name = 'Nelsen';
    3             return { name : name } //将变量保存为对象上名字相同的属性,然后由模块模式返回该对象
    4         })()
    5     console.log(person.name)  //Nelsen

    闭包是阻止垃圾回收器将变量从内存中移除的方法,使得在创建变量的执行环境外面能访问到该变量

    1     var person = (function(){
    2             var name = 'Nelsen222';
    3             return { name : function(){
    4                 return name
    5             } } 
    6      })()
    7     console.log(person.name())  //Nelsen

    3、对象中的this,this指向当前的对象

    1 var person = {
    2             name : 'Nelsen',
    3             getName : function(){
    4                 console.log( this.name )
    5             }
    6         }
    7 person.getName()  //Nelsen

    此时的this指向全局window,找不到name值

    1 var person = {
    2      name : 'Nelsen',
    3      getName : function(){
    4           return function(){
    5               console.log( this.name )
    6                 }
    7             }
    8  }
    9 person.getName()() //无法打印

    稍加矫正

     1 var person = {
     2             name : 'Nelsen',
     3             getName : function(){
     4                 var that = this;
     5                 return function(){
     6                     console.log( that.name )
     7                 }
     8             }
     9         }
    10 person.getName()() //Nelsen
  • 相关阅读:
    dubbo总结
    搞懂分布式技术28:微服务(Microservice)那点事
    搞懂分布式技术21:浅谈分布式消息技术 Kafka
    搞懂分布式技术20:消息队列因何而生
    搞懂分布式技术19:使用RocketMQ事务消息解决分布式事务
    搞懂分布式技术17,18:分布式事务总结
    热敏电阻
    eagle学习汇总
    CSS浮动通俗讲解
    总结一下CSS定位
  • 原文地址:https://www.cnblogs.com/Nelsen8/p/7081410.html
Copyright © 2020-2023  润新知