这段代码哪里有问题?

咸鱼程序员
  • 61
 <script>
        $(document).ready(function () {
            var box = $("#box1");

            function changeColor(color) {
                this.color = color;
            }

            changeColor.prototype.chanCol = function (obj) {
                var color = this.color; //新增
                obj.on("click",function () {
                    $(this).css("background-color",color);
                });
            }

            var ch = new changeColor("red");
            ch.chanCol(box);
        });
    </script>

当我在$(this).css("background-color",this.color)这条语句中background-color属性值直接引用this.color时box的颜色并没有改变,但是把this.color赋值给color后在css()中写上color,box值就可以改变了,为什么不能直接写上this.color?

刚才想了一下,难道是作用域链的关系?

回复
阅读 645
3 个回答
✓ 已被采纳

这是this的作用域问题,在事件处理函数里的this不再指向ch这个对象,而是指向当前的事件对象,所以需要在事件处理函数外面定义一个全局的变量先缓存this

在这个函数中的this指的是这个dom元素(obj)

obj.on("click",function () {
    $(this).css("background-color",color);
});

你这样$(this).css("background-color",this.color)写指的是把dom元素color属性赋值。当然是undefined的了。

var color = this.color; //新增

这个this指向的是函数changeColor也就是对象ch

$(document).ready(function () {
    var box = $("#box1");

    function changeColor(color) {
        this.color = color;
    }

    changeColor.prototype.chanCol = function (obj) {
        var that = this;
        var color = that.color; //新增
        obj.on("click",function () {
            $(that).css("background-color",color);
        });
    }

    var ch = new changeColor("red");
    ch.chanCol(box);
});
你知道吗?

宣传栏