javascript - 在定义对象内部的新方法时,如何使用箭头函数?
PHP中文网
PHP中文网 2017-04-11 12:51:35
[JavaScript讨论组]

定义这样一个方法:

Element.prototype.hide = function() {
    this.style.display = 'none'    
}

这样做的话,在使用Element的实例调用该该方法时,可以正常绑定this的值。
但是,如果改成这样:

Element.prototype.hide = () => { this.style.display = 'none' }

就会报错,查看babel解析后的代码,发现this没有绑定上:

Element.prototype.hide = function() {
    undefined.style.display = 'none'    
}

查看了MDN以后,MDN告诉我说箭头函数是自动寻找上下文中的this值给自己赋值。对此我感到不解:

  1. 我这段代码是写在最外层的,那么this的值不应该是window吗?也就是说,即使执行不了,这个函数转化后不应该是如下这样吗:

    Element.prototype.hide = function() {
        window.style.display = 'none'    
    }
  2. 尝试了一下,在外面包裹一层function,将里面的箭头函数做成IIFE,由于获得了上下文,箭头函数可以正常使用了:

    Element.prototype.show = function() {(() => { this.style.display = 'block' })()}

    但是这么写就太二了,我本意是想用箭头函数让代码简洁点,这样还不如用一开始的function写法。
    所以有什么方法能够让箭头函数正常获取到this值呢,或者说定义方法时不能用箭头函数?求各位高手解惑。

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号