博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
作用域和闭包
阅读量:6787 次
发布时间:2019-06-26

本文共 1679 字,大约阅读时间需要 5 分钟。

问题:

  • 对变量提升的理解
  • 说明this几种不同的使用场景
  • 创建10个<a>标签,点击的时候弹出对应的序号
  • 如何理解作用域
  • 实际开发中闭包的应用

知识点:

  • 执行上下文
  1. 范围:一段<script>或者一个函数
  2. 全局:变量定义、函数声明 一段<script>  执行前
  3. 函数:变量定义、函数声明、this、arguments   函数   执行前

            注意“函数声明” function fn(){...}[会被前置] 和“函数表达式”的区别   var fn= function {...}

  • this
  1. this要在执行时才能确认值,定义时无法确认
var a = {      name:'A',      fn:function(){          console.log(this.name)     }}//定义,什么时候执行,什么时候报错a.fn()  //this===a  执行结构 Aa.fn.call({name:'B'})  //this==={name:'B'} 执行结果 Bvar fn1 = a.fnfn1()  //this===window  执行结果undefined/*this的执行场景*/1.作为构造函数执行 function Foo(name){//this={};this.name = name;//return this};var f = new Foo('zhangsan')2.作为对象属性执行 var obj = {name:'A',printName:function(){console.log(this.name)}};obj.printName()3.作为普通函数执行  window function fn(){console.log(this)};fn()4.call apply bind function fn1(name,age){alert(name);console.log(this)};fn1.call({x:100},'zhangsan')      //alert zhangsan, this==={x:100}   apply 传递参数的方式不同   var fn2 = function(name,age){alert(name);console.log(this)}.bind({y:200});fn2('zhangsan',20)     //alert zhangsan,this==={y:200} 
  • 作用域
  1. JS没有块级作用域
  2. 只有函数和全局作用域
  • 作用域链

         

            函数在哪里定义,父级作用域就在哪里

  • 闭包   
function F1(){     var a=100     //返回一个函数(函数作为返回值)     return function(){         console.log(a)     }}//f1得到一个函数var f1=F1()var a=200f1()    //100

 闭包的使用场景

  1. 函数作为返回值(demo)
  2. 函数作为参数传递  

         定义时的父级作用域     

function F1(){    var a=100    return function(){       console.log(a)    }}var f1 = F1()function F2(fn){    var a=200    fn()}F2(f1)      //100

  

问题:

  • 对变量提升的理解

          变量定义

          函数声明(注意和函数表达式的区别)

  • 说明this几种不同的使用场景

          作为构造函数执行

          作为对象属性执行

          作为普通函数执行

          call apply  bind

  • 创建10个<a>标签,点击的时候弹出对应的序号

          

          自执行函数,就是不用调用,只要定义完成,立即执行的函数

          i 在函数作用域内  

  • 如何理解作用域

           自由变量

           作用域链,即自由变量的查找

           闭包的两个场景

  • 实际开发中闭包的应用

           

            

 

转载于:https://www.cnblogs.com/xwnlh/p/7117974.html

你可能感兴趣的文章
升职还需犹豫?
查看>>
我的友情链接
查看>>
CMD框变小字体显示乱码
查看>>
正则总结:JavaScript中的正则表达式
查看>>
HAProxy 详解
查看>>
7.1文件查找之find命令详解
查看>>
Linux系统管理-(11)-网络配置ifcfg家族
查看>>
memset()
查看>>
Jquery Ajax二次封装(部分转载)
查看>>
android studio3 logcat无日志的问题
查看>>
我的友情链接
查看>>
tinyxml使用
查看>>
mariadb
查看>>
iOS 时间与日期处理
查看>>
Linux中yum网络服务器与本地服务器的安装
查看>>
[2013.12.28更新:构建教程,支持CB2、CT] 构建自己的Debian Linux
查看>>
flume+kafka+storm运行实例
查看>>
mysql show processlist分析
查看>>
Juniper NetScreen MIP转换
查看>>
巧妙安装各种Windows操作系统
查看>>