• 周蓬安.blog的博客—强国博客—人民网 2019-05-10
  • 紫光阁中共中央国家机关工作委员会 2019-05-10
  • 感触名家笔下的端午文化吃香粽原来可以这样文艺 2019-05-09
  • 追梦夺冠游行嘲讽詹皇 百万人面前穿订制T恤羞辱他 2019-04-27
  • 《瘟疫传说》:黑死病恐怖 姐弟在绝望中求生 2019-04-10
  • 陕西国防工业职业技术学院百名大学生志愿者敬老院慰问孤寡老人陕西国防工业职业技术学院百名大学生志愿者敬老院慰问-陕西教育新闻 2019-04-08
  • 西藏拉萨:新家园 新生活 2019-04-08
  • 尊重和保障宗教信仰自由的中国实践 2019-04-06
  • 一敬泯恩仇 俄罗斯队主帅这个动作太暖了 2019-03-20
  • 四大名著剧组首次同台忆往事 经典影视剧如何铸就? 2018-12-07
  • “天眼”凝望 探秘宇宙 2018-12-07
  • 0

    谈一谈JavaScript中的动态this值

    Posted by 撒得一地 on 2016年5月1日 in 杂谈
    国外稳定加速器推荐    Express | Vypr

    对于大部分的JavaScript初学者而言,该语言中的this臭名狼籍。JavaScript中的this 值取决于它被调用的时机。本文,我们就来讨论一下这个奇怪的特性。

    令人烦恼的动态this

    在JavaScript中,this的动态特性总是令人烦恼。对于新手而言,总是不知道如何去判断当前的this值。

    事实是,规则非常的简单。 我们先看一个例子:

    "use strict";
    
    const polyglot = {
        name : "Weiwei SUN",
        languages : ["Chinese", "English", "Italian", "German", "Polish"],
        introduce : function () {
            // this.name is "Weiwei SUN"
            const self = this;
            this.languages.forEach(function(language) {
                // this.name is undefined, so we have to use our saved "self" variable 
                console.log("My name is " + self.name + ", and I speak " + language + ".");
            });
        }
    }
    polyglot.introduce();
    

    在introduce中,this.name的值为undefined。在回调函数的外部, 在我们的forEach循环中,它指向polyglot对象。在多数情况下,我们的直觉会告诉我们, 回调函数中的this和回调函数外部的this应该是指向同一个对象,然而事实缺并非如此。

    在JavaScript中,this始终指向当前函数的调用者。所有的回调函数在事件循环中被调用。

    还有一个相似的例子是构造了一个高阶函数的情况,此时内函数与外函数的this指向也会不同。 例如,下面这个例子:

    var BindingMixin = {
    
        handleChange: function (key) {   
    
            // 此时this值会被解释器重新设置,从而丢失原来的this值
            var that = this;   
    
            return function (event) {
              var newState = {};
              that.setState(newState);
            }
       }
    }
    

    问题在于,在JavaScript中,函数中的this总是取决于它们的实际调用者, 大体上可以包括四个规则。 这个机制就是所谓的动态this。

    这意味着,当JavaScript解释器寻找this的值的时候,它将会找到其中的一个, 但对于回调函数的而言,其内部的this和外部的this却并非同一个。一般有两种解决方案:

    1.将this作为外部函数的局部变量进行保存,通常命名为this,正如上面的例子中展示的那样, 然后在内函数中。

    2.在内函数中调用bind()方法,用于设定this的值。

    这些方法虽然有效,但却有点晦涩。

    或者,我们换一种思路,哪函数不再设置它们的this值,JavaScript将会寻找this的值。 就像寻找其他变量的值那样:逐层返回到上一层作用域中寻找,直到发现同名变量。这样的话, 我们就可以正确的使用到this变量的值,也就是所谓的 词法的this。

    使用箭头函数来实现 词法的this

    从ES2015开始,我们可以这么做了。箭头函数并不会绑定this值,从而允许我们利用this关键字的词法绑定。 我们可以对上面的代码进行重构:

    "use strict";
    
    let polyglot = {
        name : "Weiwei SUN",
        languages : ["Chinese", "English", "Italian", "German", "Polish"],
        introduce : function () {
            this.languages.forEach((language) => {
                console.log("My name is " + this.name + ", and I speak " + language + ".");
            });
        }
    }
    

    现在,代码的运行结果正如我们所期望的那样。

    箭头函数的使用大概有以下几种类型:

    "use strict";
    
    let languages = ["Spanish", "French", "Italian", "German", "Polish"];
    
    // 在多行箭头函数中,你必须使用花括号,
    //  并且你必须包含一个return语句
    let languages_lower = languages.map((language) => {
        return language.toLowerCase()
    });
    
    // 如果是单行的箭头函数,那么花括号则是可选的
    //  并且函数会隐式的返回表达式,
    //  你可以显示的提供return语句
    let languages_lower = languages.map((language) => language.toLowerCase());
    
    // 如果你的箭头函数只爆款一个参数,
    //  此时,你可以不使用小括号去包裹参数
    let languages_lower = languages.map(language => language.toLowerCase());
    
    // 如果你的函数接收多个参数,你必须使用小括号包裹住它们
    let languages_lower = languages.map((language, unused_param) => language.toLowerCase());
    
    console.log(languages_lower); // ["spanish", "french", "italian", "german", "polish"]
    
    // 最后,如果你的函数不接收参数,你也必须使用一个空括号
    (() => alert("Hello!"))();
    

    更详细单内容,我推荐你参考MDN的文档。

    References
    Better Node with ES6, Pt. I
    this All Makes Sense Now!

    原文地址://wwsun.github.io/posts/quirks-of-dynamic-this.html

    上一篇:

    下一篇:

    相关推荐

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    1 + 4 = ?

    网站地图|广东快乐10分开奖直播

    Copyright © 2015-2019 广东快乐10分开奖直播 All rights reserved.
    闽ICP备15015576号-1,版权所有?psz.

  • 周蓬安.blog的博客—强国博客—人民网 2019-05-10
  • 紫光阁中共中央国家机关工作委员会 2019-05-10
  • 感触名家笔下的端午文化吃香粽原来可以这样文艺 2019-05-09
  • 追梦夺冠游行嘲讽詹皇 百万人面前穿订制T恤羞辱他 2019-04-27
  • 《瘟疫传说》:黑死病恐怖 姐弟在绝望中求生 2019-04-10
  • 陕西国防工业职业技术学院百名大学生志愿者敬老院慰问孤寡老人陕西国防工业职业技术学院百名大学生志愿者敬老院慰问-陕西教育新闻 2019-04-08
  • 西藏拉萨:新家园 新生活 2019-04-08
  • 尊重和保障宗教信仰自由的中国实践 2019-04-06
  • 一敬泯恩仇 俄罗斯队主帅这个动作太暖了 2019-03-20
  • 四大名著剧组首次同台忆往事 经典影视剧如何铸就? 2018-12-07
  • “天眼”凝望 探秘宇宙 2018-12-07
  • 2017O46期福彩中奖 体彩大乐透预测大师 p3开机号牛彩网今天 okooo澳客网北京赛车 快乐8开奖结果查询 上海时时乐开奖公告 喜乐彩包围中奖规则 中国福利彩票双色球开奖结果110期 bet365百家乐 北京pk10直播网 五分彩计划银狐娱乐 靠谱的3d北京赛车qq群 平刷王北京赛车 重庆时时彩角投模式 三分彩时时彩 新疆时时彩开奖号码