JS基础知识4--作用域和自由变量

题目

  • 一. this的不同应用场景，如何取值？
// 作为普通函数调用 this是window对象
// 作为对象函数调用 this是对象本身
// 使用call,apply,bind时，this是这三个方法的第一个参数
// 在class方法中调用 this是实例
// 箭头函数中  this是箭头函数上级作用域的this
// 还有原型中的this,其实是属于第二种情况
  • 二. 手写bind函数(bind是改变函数this指向的方法之一)
// bind()方法的使用
function fn1(a,b,c){
    console.log('this',this)  // this {x: 100}
    console.log(a,b,c)   // 10 20 30
    return 'this is fn1'    // this is fn1
}

const fn2 = fn1.bind({x:100},10,20,30)
const res = fn2()
console.log(res)




// 手写bind()
Function.prototype.bind1 = function(){
    // arguments 是一个 传递给函数的参数的类数组对象，通过它可以拿到所有传递给函数的参数
    // Array.prototype.slice.call 可以把一个类数组对象，变为数组
    // bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

    // 第一步要做的，就是将参数拆解为数组
    const args = Array.prototype.slice.call(arguments)

    // 获取this (数组的第一项)
    const t = args.shift()

    // fn1.bind(...)中的 fn1
    const self = this

    return function (){
        // apply()方法第一个参数是this对象，第二个参数是参数数组
        // call()方法第一个参数跟apply一样，第二个参数是参数列表
        return self.apply(t,args)
    }
}

function fn1(a, b, c) {
    console.log('this', this)  // this {x: 100}
    console.log(a, b, c)   // 10 20 30
    return 'this is fn1'    // this is fn1
}

const fn2 = fn1.bind1({ x: 100 }, 10, 20, 30)
const res = fn2()
console.log(res)
  • 三. 实际开发中闭包的应用场景，举例说明
// 隐藏数据,只提供API
// 如做一个简单的cache工具
function createCache(){
  const data = {}  //被隐藏数据
  return {
    set:function(key,val){
      data[key] = val
    },
    get:function(key){
      return data[key]
    }
  }
}

const c = createCache()
c.set('a',100)
c.get('a')  // 100

//之所以说能隐藏数据，就是因为data是在createCache函数作用域内定义的
// 如果想要在createCache函数外部，直接通过 data.xx 访问值或修改值，是会报错的，说data未被定义
// 而set和get方法是在createCache作用域内定义的，是可以访问到data的，所以可以用来修改和访问被隐藏的data数据
  • 四. 场景题：创建10个<a>标签，点击的时候，弹出对应的序号
let a,i 
for( i=0; i < 10 ; i++){
    a = document.createElement('a');
    a.innerHTML = i + '<br>'
    a.addEventListener('click',function(){
        alert(i)
    })
    document.body.appendChild(a)
}

// 每个a标签被点击的时候，都会弹出10 ，
// 因为变量i是全局变量，生成10个a标签的循环会在很短时间内执行完。
// 当点击任意一个a标签的时候，全局变量i早就经过循环后变为了10。而每个for循环里弹出的i就是取的全局的i,所以是弹出10
// 如果想要输出每个a标签的数字，可以改为把i定义在for的块级作用域里，这么每次for循环执行的时候，都会形成不同的块，每个i就会不一样，循环到几，i就保存的是几，弹出的就是几


let a 
for( let i=0; i < 10 ; i++){
    a = document.createElement('a');
    a.innerHTML = i + '<br>'
    a.addEventListener('click',function(){
        alert(i)
    })
    document.body.appendChild(a)
}

知识点

  • 一. 作用域和自由变量
先看作用域

作用域可以简单的理解为变量的合法使用范围，作用域分为以下几种：

1.全局作用域
直接编写在script标签之中的JS代码，或者是一个单独的JS文件中的，都是全局作用域;
全局作用域在页面打开时创建，页面关闭时销毁
全局作用域中，有一个全局对象window(代表的是一个浏览器的窗口)，可以直接使用,还有document对象
在全局作用域中，所创建的变量和函数，都会成为window对象的属性和方法

2.函数作用域
在函数内部就是函数作用域，变量只在函数的内部起作用
调用函数时，创建函数作用域，函数执行完毕之后，函数作用域销毁
每调用一次函数，就会创建一个新的函数作用域，它们之间相互独立
3.块级作用域(ES6新增)
在if,for,while之类的花括号范围内的，都是块级作用域

if (true) {
    let b = 100
}
console.log(b)   // b is not defined
再看自由变量

一个变量在当前的作用域，没有定义，但是被使用了
向上级作用域，一层通一层依次寻找，直到找到为止
如果到全局作用域都没有找到，则报错 xxx is not defined

image.png

  • 二. 闭包(闭包就是能够读取其他函数内部变量的函数)
闭包其实就是作用域应用的特殊情况，它有两种表现
  • 函数作为参数被传递
function print(fn){
    let a = 100
    fn()
}

let a = 200
function fn(){
    console.log(a)
}
print(fn)  //200
// 当执行print的时候，会把fn函数作为参数传入，而fn内部的输出自由变量a，a的查找不是在fn执行的作用域进行的，而是在fn定义的作用域进行的
  • 函数作为返回值被返回
function create(){
    let a = 100
    return function(){
        console.log(a)
    }
}
let fn  = create()
let a = 200
fn()  // 100

闭包的影响：变量会常驻内存，得不到释放，闭包不要乱用；

  • 注意，闭包不一定会造成内存泄漏，因为在闭包中的变量，我们无法判断未来是否会去用它，所以不去释放它。而内存泄漏一般是BUG造成的内存未释放或无法释放。
所有的自由变量的查找，都是在函数定义的地方，向上级作用域查找，不是在函数执行的地方
  • 三. this
    记住：this取什么值，是在函数执行的时候确认的，不是在函数定义的时候确认的
  1. 作为普通函数调用
function fn1(){
    console.log(this)
}
fn1()  // window
  1. 使用call apply bind
fn1.call({x:100})   // {x:100}   call apply 是一调用就直接执行了

const fn2 = fn1.bind({x:200})  // 注意bind会返回一个新的函数，然后再去执行这个新的函数
fn2()  //{x:200}
  1. 作为对象方法被调用
const zhangsan = {
    name:'张三',
    sayHi(){
        // 作为对象方法被调用 this就是当前对象
        console.log(this)
    },
    wait(){
        console.log(this)  // 直接打印this,就跟上边一样，this就是当前对象
        setTimeout(function(){
            // this === window
            console.log(this)
        });
    }
}
zhangsan.sayHi()  // {name: "张三", sayHi: ƒ, wait: ƒ}
zhangsan.wait()  // window
// 这里之所以为window，是因为function(){console.log(this)}的执行是setTimeout触发的
// 它是作为一个普通函数被执行的，而不是像上边zhangsan.sayHi()那样作为一个对象的方法被直接执行的
  1. 在class方法中调用
// class中this指向的就是实例
class People {
    constructor(name){
        this.name = name
    }
    sayHi(){
        console.log(this)
    }
}

const zhangsan = new People('zhangsan')
zhangsan.sayHi()  // People {name: "zhangsan"}
  1. 箭头函数
// 换种方式
const zhangsan = {
    name:'张三',
    sayHi(){
        console.log(this)
    },
    waitAgain(){
        setTimeout(()=>{
            console.log(this)
        });
    }
}
zhangsan.waitAgain()  // {name: "张三", sayHi: ƒ, wait: ƒ}
// 这里原来的普通函数变为了箭头函数，this就变成了当前对象，具体原因是什么呢？
// 因为，箭头函数虽然是被setTimeout触发的，但是箭头函数里的this永远是取它上级作用域的this,箭头函数没有自己的this值
  1. 原型中的this
class People {
    constructor(name,age){
        this.name = name
        this.age = age
    }
    sayHi(){
        console.log(`hello ${this.name}`)
    }
}

class Student extends People {
    constructor(name,number){
        super(name)
        this.number = number
    }
    study(){
        console.log(`${this.name} study hard`)
    }
}
const xiaoming = new Student('xiaoming',100)
xiaoming.sayHi()  // 此时this.name 就是小明,因为sayHi是作为对象的函数调用的，这个这个对象就是xiaoming
xiaoming.__proto__.sayHi()  // 此时this.name 就是 undefined,因为sayHi是作为xiaoming.__proto__ 这个原型对象的函数执行的，而原型对象的name就是undefined
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,194评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,058评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,780评论 0赞 346
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,388评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,430评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,764评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,907评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,679评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,122评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,270评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,867评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2赞 348