简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 函数嵌套中，this指向对象会发生怎么样的变化？
習慣沉默
習慣沉默 2017-05-19 10:10:31
0
5
625

我写了一个demo，其功能是鼠标移入时长方形块长度变长，然后高度变高，遇到如下问题：

在执行下面这段函数嵌套时

    op[0].onmouseover = function(){
        that = this;
        changeStyle(that,'width',400,function(){
            changeStyle(that,'height',300);
        });
    }

必须使用that=this传参，否则浏览器会报如下错误

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

我在最后贴出了整套代码，我想知道为什么用that=this传参能解决问题？不传参的话this两次分别指向了谁？chrome和firefox有没有什么好的调试方法能监视每一次this值的变化并显示出来？

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <link rel="stylesheet" href="animation.css" />
</head>
<body>
    <p class="wrap"></p>
    <script src="animation.js"></script>
</body>
</html>

css代码：

.wrap{
    width: 200px;
    height: 100px;
    margin: 10px;
    background-color: #f00;
    border: 4px solid black;
}

js代码：

window.onload = function(){
    var op = document.getElementsByTagName('p');
    op[0].timer = null;
    op[0].onmouseover = function(){
        that = this;
        changeStyle(that,'width',400,function(){
            changeStyle(that,'height',300);
        });
    }
}
function changeStyle(obj,attr,iTarget,fn){
    clearInterval(obj.timer);
    var curValue = 0;
    obj.timer = setInterval(function(){
        curValue = parseInt(getStyle(obj,attr));
        var speed = (iTarget - curValue) / 20;
        speed = (speed > 0) ?　Math.ceil(speed) : Math.floor(speed);
        if (curValue == iTarget) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
        else{
            obj.style[attr] = curValue + speed + 'px';    
        }
    },30);
}
function getStyle(obj,attr){
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj,null)[attr];
    }
}
習慣沉默
習慣沉默

全部回复(5)
黄舟
黄舟2017-05-19 10:12:31 5 楼

通过事件调用的函数的this指向触发该事件的元素,所以op[0].onmouseover事件调用函数的this指向的是op[0]；

changeStyle函数传入的回调函数的this指向的是window，因为 if (fn) { fn();}相当于window调用了该函数

如果想跟踪代码的执行情况可以采用断点调试，能看到各个变量在运行中的赋值情况

点赞 +0
添加回复
我想大声告诉你
我想大声告诉你2017-05-19 10:12:31 4 楼

this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

我想你可以看看阮一峰的这篇：http://www.ruanyifeng.com/blo...

点赞 +0
添加回复
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-19 10:12:31 3 楼

忘掉this指向的烦恼吧，(es6)请使用箭头函数

点赞 +0
添加回复
Ty80
Ty802017-05-19 10:12:31 2 楼

如果不传that，你的change函数，改变的是谁的样式，你知道吗？如果直接用this，this是指向window的，如一楼所说，断点，一断就知道

点赞 +0
添加回复
给我你的怀抱
给我你的怀抱2017-05-19 10:12:31 1 楼

若不用that=this将this绑定到当前词法作用域，那么this指向的是全局对象window，这属于this的默认绑定。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！