javascript运行上下文问题-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript运行上下文问题

PHP中文网 2017-04-10 15:48:42

[JavaScript讨论组]

871

var element = document.getElementById('element');
 
var user = {
 firstname: 'Wilson',
 greeting: function(){
   alert('My name is ' + this.firstname);
 }
};
 
// Attach user.greeting as a callback
element.addEventListener('click', user.greeting);
// alert => 'My name is undefined'

为什么运行的时候，拿不到上下文的值firstname的值

PHP中文网

认证0级讲师

全部回复(2)

天蓬老师2017-04-10 15:50:42 2楼

这不是上下文件的问题，是 this 的问题。

像下面这么改下就对了：

element.addEventListener('click', user.greeting.bind(user));

赞 +0

添加回复

阿神2017-04-10 15:50:42 1楼

@边城狂人已经把问题解释清楚了，只是做点补充说明。

问题是怎么出现的

JS中的this只与函数调用方式有关，与定义时的上下文，函数作用域，都无关。有如下情况：

user.greeting()      // this --> user

var handler = user.greeting;
handler()            // this --> window

当程序执行到

element.addEventListener('click', user.greeting);

user.greeting作为addEventListener的第二个参数，假设这个参数就叫handler。可以想象，在addEventListener的内部，进行了类似

var handler = user.greeting;   // 这步在传递参数时完成
handler()            // this --> window

的过程，this的指向就发生了改变。

如何修复

this的指向只与函数调用方式有关，函数调用方式一共四种：

func();

obj.func();

func.apply/call();

new func();

要修复这个问题，需要用到apply/call这种调用方式。我们可以想象bind是这样一个函数：

function bind ( func, target ) {
    return function () {
        func.apply( target, arguments )；
    }
}

Function.prototype['bind'] = function ( target ) {
    return bind( this, target );
}

这样，就可以使用element.addEventListener('click', user.greeting.bind(user));来解决这个问题了。当然，这里的bind是非常简化、不可用的，比如可以看到bindreturn的函数已经不是原函数了，为了保持一致性应该绑定原型链。这一系列完整的操作在MDN文档中都可以看到。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>