当前位置: 首页 > news >正文

体验javascript之美-第五课 匿名函数自执行和闭包是一回事儿吗?

通过本节课你将学到:

1.什么是函数表达式和函数声明

2.first-class function

3.引用和复制的区别

4.函数传参是怎么回事儿

5.关于函数的this和arguments

6.什么是匿名函数自执行并如何在实际库中应用

7.闭包是怎么回事儿?

8.闭包的原理和在jquery中的应用

9.从一到面试题彻底理解闭包和垃圾回收机制

10.回调函数是什么?

概述

在javascript中,有些看起来很复杂却又很好理解的东西,但是理解他们需要一定的技巧同时理解他们又非常的重要,了解了他们就给你打开了一扇门,让你知其然还能够知其所以然。因为他们紧密结合,自成一体。今天我们来说说这些既简单有重要的东西。

1.什么是函数表达式和函数声明

​ 大家已经知道函数就是特殊的对象,然后大家也了解函数声明和函数表达式了。

      //函数声明
        function show(){
            console.log(12);
        }
        
     //函数表达式
        var show = function(){
            console.log(5);
        };   

2.看到函数表达式也没啥奇怪的,因为函数是对象,那把一个对象赋值给一个变量或者当成参数传递都是可以的。

     //函数表达式
        var show = function(){
            console.log(5);
        };  
        
        function Simple(show){
              show();
        }
        //或者更直接
        function Simple(){
              
        }
        simple(function(){});

函数能像数字一样赋值给变量传递给参数的现象就叫做 first-class function,没啥难的吧。

3.说到了对象我们就说下引用和复制的区别。

var a = 12;
var b = a;
b+=5;
alert(a);//12

这个没啥好解释的,b复制一份儿啊,b怎么改跟a无关。

var arr1 = [12,5,8];
var arr2 = arr1;
arr2.pop();
alert(arr1);//12,5

我擦嘞,发生了什么?

记住一句话,基本类型的复制是直接拷贝一份儿跟原来的无关,而对象复制仅仅是把地址指向复制了一份儿。

我有一个馒头,基本类型复制就相当于照着我的馒头又给你做一个,吃了你的馒头我手里的没影响。

我有一把钥匙,能开一个合租房的门,对象复制是引用,就是复制了一把钥匙,你把厕所给拆了,我也嘚憋着。理解了不?

4.函数传参这个我只是说一句,这个是很多开发者犯错的地方,这里不解释我一解释你上下都不明白了只是告诉你就行。

访问变量有按值和按引用两种方式,但是参数只能是按值传递。
参数类型是基本类型时,被传递的值被复制给一个局部变量,而复合类型复制的是地址。

好吧,直接上一个例子吧。可以慢慢领悟吧。

function setName(obj){
  obj.name = "尼古拉斯·屌·大彬哥"
  //重点
  obj = new Object();
  obj.name = "帅彬"
}
var Person = new Object();
setName(Person);
alert(Person.name);

5.关于函数的this和arguments

js里面最恶心的东西,没有之一。下面我说说this.这里我只说函数里面的this.

function show(){console.log(this);}//window
var show = function{console.log(this);}//window

注意了,

var person = {
        name:"leo",
        show:function(){
             this.name = 'leolau'; 
             console.log(this);//person对象 object
        }
};

但是这里有个奇怪的事情,很多人认为是bug,面试也经常考。

var person = {
        name:"leo",
        show:function(){
             this.name = 'leolau'; 
             console.log(this);//person对象 object
              var bug = function(){
              console.log(this);//window
            }
            bug();
        }   
};

如何解决?

var person = {
        name:"leo",
        show:function(){
            var that = this;
             this.name = 'leolau'; 
             console.log(this);//person对象 object
              var bug = function(){
              console.log(that);//person
            }
            bug();
        }   
};

至于arguments给大家一个实际应用。未知参数个数不定求和。大家想想怎么做?

6.什么是匿名函数自执行并如何在实际库中应用

匿名函数自执行,注意,注意,只有这个名字和iife没有其它名字,比如封闭空间,这个是为了让大家好理解自己造的词语。他的一个重要用途就是防止命名冲突,另外是组织和架构库,比如jquery.

命名冲突

a.js

var a = 12;

b.js

var a = 5;

同时引用a,b后面覆盖前面了就。怎么防止命名冲突前后覆盖。

var a = 12;
(function(){
      var a = 5;
})();

这里iifes里面的a并不会干扰外面的a,那么问题来了,万一我就想改外面的a,呢?

这也是很多jquery库的做法,这么搞:


(function(global,$){
    $.a = 12;
    global.a = 5;
  
})(window,jquery);

既满足了外面的修改,又做到了防止变量污染。闭包下节课再说困了。

下节课单独说闭包,垃圾回收,回调函数和定时器。

相关文章:

  • 3550配置DHCP中继代理工程实例
  • 基础单臂路由基本实验
  • 利用|,amp;,^,~,lt;lt;,gt;gt;gt;写出高效艺术的代码
  • 外观模式
  • MAC 通过brew安装软件
  • java中IO详细解释
  • jquery同步调用ajax
  • 分数拆分
  • XenDesktop学习笔记3之架构
  • jbpm 流程设计(BPMN2 Modeler)
  • aar
  • 这样记单词最有效
  • hdu 5348 MZL#39;s endless loop
  • 对不起,我不再愛你了
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • JavaScript 如何正确处理 Unicode 编码问题!
  • Angular数据绑定机制
  • Docker: 容器互访的三种方式
  • ES6之路之模块详解
  • iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
  • Java 内存分配及垃圾回收机制初探
  • magento2项目上线注意事项
  • MySQL主从复制读写分离及奇怪的问题
  • oschina
  • puppeteer stop redirect 的正确姿势及 net::ERR_FAILED 的解决
  • python docx文档转html页面
  • spring boot下thymeleaf全局静态变量配置
  • SpringBoot 实战 (三) | 配置文件详解
  • Theano - 导数
  • vuex 笔记整理
  • 从@property说起(二)当我们写下@property (nonatomic, weak) id obj时,我们究竟写了什么...
  • 从零开始学习部署
  • 动态魔术使用DBMS_SQL
  • 码农张的Bug人生 - 见面之礼
  • 数据科学 第 3 章 11 字符串处理
  • 智能合约Solidity教程-事件和日志(一)
  • d²y/dx²; 偏导数问题 请问f1 f2是什么意思
  • 阿里云服务器如何修改远程端口?
  • #NOIP 2014# day.2 T2 寻找道路
  • (1)(1.8) MSP(MultiWii 串行协议)(4.1 版)
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (七)Knockout 创建自定义绑定
  • (十二)springboot实战——SSE服务推送事件案例实现
  • (十三)Maven插件解析运行机制
  • (十一)手动添加用户和文件的特殊权限
  • (一)Spring Cloud 直击微服务作用、架构应用、hystrix降级
  • (一)使用IDEA创建Maven项目和Maven使用入门(配图详解)
  • (转)http协议
  • ****** 二十三 ******、软设笔记【数据库】-数据操作-常用关系操作、关系运算
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .NET Core WebAPI中使用Log4net 日志级别分类并记录到数据库
  • .net core 依赖注入的基本用发
  • .NET Framework杂记
  • .Net FrameWork总结
  • .NET Micro Framework初体验(二)