JS 作用域,闭包,箭头函数,普通函数中this指向问题

文章序

本文就标题的问题,小结一下本人的观点与想法,如有错误欢迎指正交流.

作用域

在ES6之前只有两个作用域,全局作用域和函数内的局部作用域,for循环内部,对象,{}等内部是没有作用域,使用var定义的变量都是全局变量。在ES6之后,使用let定义的变量只能在大括号{}内部有效,比如循环内部,if内部,包括单独的{}内,是块级元素,{}内部作用域也就称为块级作用域,但是对象的{}内部仍然是没有作用域的.

闭包

闭包,通俗的讲就是可以在外部访问局部变量,通过函数可以根据链式作用域原则取到外层局部作用域的原理,将外层局部作用域的变量通过return返回出去,这样就可以在局部作用域外部使用局部作用域内部的变量了.
优点
可以在外部使用局部作用域的变量.

缺点
使局部作用域变量不能被内存释放,变量就会占用内存,内存消耗大,可能会导致内存泄露.

闭包的使用方法
简单来讲就是在局部作用域内通过函数将需要的局部作用域变量通过return返回出去,代码如下:

var hobby = 'football'
{
    let hobby = 'games';
    window.getHobby = function () {
        return hobby;
    }
}

let hpfHobby = window.getHobby();
console.log(hobby); //football
console.log(hpfHobby);  // games

可以看到,我们通过闭包的方式,在全局环境下拿到了{}内部局部作用域的games,这便是闭包。其实闭包没必要必须通过函数套函数的方式去使用,只是说函数内部创造了一个局部作用域,我们也可以通过其他方式创造局部作用域,比如我这里就是通过单纯的{}创造了局部作用域并通过设置window对象的getHobby方法,在外部拿到了局部作用域的变量.
如果通过函数嵌套的方式去调用的话,代码如下:

var hobby = 'football'
var getHobby = function () {
    let hobby = 'games'
    return function () {
        return hobby;
    };
}

console.log(hobby); //football
console.log(getHobby()());  // games

可以看到,这种写法就跟我们在网上能够找到的关于闭包的主流写法比较一致了,但我是不推荐谈及闭包就是函数套函数,return出去这种说法,这只是一种写法,而不应该一传十十传百好像只有这种写法才对一样.

箭头函数

对象内部函数
ES6新增箭头函数,funName () => {}
箭头函数内部的this指针是指向箭头函数被创建时外部作用域的this指向的对象,而不是调用时指定this指向,普通函数则是根据调用时外部作用域内的this的指向来确定函数内部this的指向。这样看起来比较晦涩难懂,请看如下代码:

var name = 'xx';

let obj1 = {
    name: 'hpf',
    normalGetName: function () {
        console.log('name: ', name);    // name:  xx
        console.log('this.name: ', this.name);  // this.name:  hpf
        console.log(this);  // {name: "hpf", normalGetName: ƒ, arrowGetName: ƒ}
    },
    arrowGetName: () => {
        console.log('name: ', name);    // name:  xx
        console.log('this.name: ', this.name);  // this.name:  xx
        console.log(this);  // Window {window: Window, self: Window, document: document, name: "xx", location: Location, …}
    }
};

obj1.normalGetName();
obj1.arrowGetName();

这里普通函数因为调用时是通过obj1.normalGetName()去调用,所以this是指向obj1,但是箭头函数的this是根据函数定义时的上下文作用域去确定,而定义时因为对象内部是没有作用域的,所以根据链式作用域原则,向上去找到全局window作为作用域.

函数内部函数
当函数外部有作用域时,比如放在函数内,代码和结果如下:

var name = 'xx';
let fun1 = function () {
    let name = 'lmm';
    console.log(this); // Window {window: Window, self: Window, document: document, name: "xx", location: Location, …}
    let normalGetName = function () {
        console.log('name: ', name);    // name:  lmm
        console.log('this.name: ', this.name);  // this.name:  xx
        console.log(this);  // Window {window: Window, self: Window, document: document, name: "xx", location: Location, …}
    }
    let arrowGetName = () => {
        console.log('name: ', name);    // name:  lmm
        console.log('this.name: ', this.name);  // this.name:  xx
        console.log(this);  // Window {window: Window, self: Window, document: document, name: "xx", location: Location, …}
    }
    normalGetName();
    arrowGetName();
};

fun1();

这里很显然,因为函数内部是有作用域的,所以name均取到了函数内部变量,所以显示lmm,this.name因为普通函数是在函数内部调用,箭头函数也是在函数内部定义,所以两者的this指向和函数fun1内部的this指向相同,而又因为fun1是在全局下调用,所以两种函数的this均为全局变量winodw了.

总结

那么我觉得,到现在为止,你应该已经很清晰JS中作用域,闭包,普通函数和箭头函数以及this指向的问题了.

JS中查找变量是按照链式作用域来查找,即先找自己的作用域是否有该变量,如无继续向父作用域找,直到全局作用域window,如果都没有则报错抛出异常.

闭包就是利用在函数内部可以访问到函数外部作用域的变量,通过return的形式返回出去,这样就可以在外部得到局部作用域内部的变量了.

箭头函数的this指向定义时外部作用域内的this指向,普通函数的this指向调用时根据上下文取确认.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容