Vue 中addEventListener事件回调函数this的指向

代号95+27

已于 2022-01-22 11:09:28 修改

阅读量4.8k

点赞数 1

分类专栏： Vue Javascript 文章标签： vue.js javascript 前端

于 2022-01-22 11:05:43 首次发布

本文链接：https://blog.csdn.net/XIAIBIANCHENG/article/details/122634114

版权

Vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Javascript

4 篇文章 0 订阅

订阅专栏

在Vue中调用document.addEventListener添加事件回调函数时,在回调函数中调用this对象时，通过调试发现，this指向的是之前调用document.addEventListener的Vue对象或者Vue组件示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div style="width: 100px;height: 100px;background-color: #4CAF50" @mousedown="mouseDown($event)"></div>
</div>

</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            mouseDown(event) {
                document.addEventListener("mousemove", this.onmousemove);
            },
            onmousemove(event) {
                console.log(this);

            }
        }
    });
</script>
</html>

通过调试打印的日志:
在这里插入图片描述
但是如果将onmousemove写在全局作用域呢?示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div style="width: 100px;height: 100px;background-color: #4CAF50" @mousedown="mouseDown($event)"></div>
</div>

</body>
<script>
    function  onmousemove(event) {
        console.log(this);

    }
    new Vue({
        el: "#app",
        methods: {
            mouseDown(event) {
                document.addEventListener("mousemove", onmousemove);
            },
        }
    });
</script>
</html>

打印结果如下:
在这里插入图片描述
发现this指向变成了doucument，即调用addEventListener的对象。
为什么addEventListener绑定的回调方法是Vue对象内部的methods方法时，this指向的对象就是当前Vue对象呢，通过查看源码发现Vue在初始化methods对象时，会将methods里面的每个函数绑定到当前的Vue对象，代码如下:

function initMethods (vm, methods) {
    var props = vm.$options.props;
    for (var key in methods) {
      {
        if (typeof methods[key] !== 'function') {
          warn(
              "Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " +
              "Did you reference the function correctly?",
              vm
          );
        }
        if (props && hasOwn(props, key)) {
          warn(
              ("Method \"" + key + "\" has already been defined as a prop."),
              vm
          );
        }
        if ((key in vm) && isReserved(key)) {
          warn(
              "Method \"" + key + "\" conflicts with an existing Vue instance method. " +
              "Avoid defining component methods that start with _ or $."
          );
        }
      }
      vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
    }
  }

上面最后一行的代码中调用的bind函数就是实现此功能的，代码如下:

var bind = Function.prototype.bind
      ? nativeBind
      : polyfillBind;

如果当前在Function的prototype上存在bind属性，也就是函数支持bind方法绑定新的作用域，就直接调用bind将当前vue对象绑定到函数的作用域上，如果不支持就用apply和call来代替实现，通过bind创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind 的第一个参数，即传递的Vue对象，其中nativeBind和polyfillBind代码如下:

function nativeBind(fn, ctx) {
        return fn.bind(ctx)
}
function polyfillBind(fn, ctx) {
        function boundFn(a) {
            var l = arguments.length;
            return l
                ? l > 1
                    ? fn.apply(ctx, arguments)
                    : fn.call(ctx, a)
                : fn.call(ctx)
        }

        boundFn._length = fn.length;
        return boundFn
}

上面的效果和下面一样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div style="width: 100px;height: 100px;background-color: #4CAF50" @mousedown="mouseDown($event)"></div>
</div>

</body>
<script>
    function onmousemove(event) {
        console.log(this);

    }

    let v=new Vue({
        el: "#app",
        methods: {
            mouseDown(event) {
                document.addEventListener("mousemove", onmousemove.bind(v));
            },
        }
    });


</script>
</html>

在这里插入图片描述

代号95+27

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue 中addEventListener事件回调函数this的指向

在Vue中调用document.addEventListener添加事件回调函数,在回调函数中调用this对象时，通过调试发现，this指向的是之前调用document.addEventListener的Vue对象或者Vue组件示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &l
复制链接

扫一扫

专栏目录