前端 - javascript中.和[]的区别

Question

写了一个动画函数，发现如果将elm.style[attr]改为elm.style.attr后；函数就失去作用了，why？

function animation(elm,attr,from,to){
    var distance = Math.abs(to - from);
    var attr = attr;
    //假设动画50ms一次
    var stepLength = distance / 50;
    var sign = (to - from) / distance;
    var offset = 0;
    function step(){
        offset = offset + stepLength;
        if(offset < distance){
            elm.style[attr] = from +  offset * sign + 'px'; 
        } else {
            elm.style[attr] = to + 'px';
            clearInterval(Interval);
        }
    }
    var Interval = setInterval(step, 20);
}

Answer 1

这个问题是这样的，原本elm.style是一个对象，你想知道两种调用方式有什么不同。
JavaScript中对象属性有两种调用方式，一种是点"."一种是"[]"。
一般情况下我们使用点调用属性的方式，但是当obj的某个属性是一个变量时(你的attr在这里是一个字符串)，这种点调用的方式就行不通了，想想看obj.'property'这样的方式不对；
所以，如果对象内的属性是一个变量，只能使用[]调用。

Answer 2

elm.style.attr相当于elm.style["attr"]，这个和elm.style[attr]是有差别的，自己体会下

Answer 3

attr 是变量名，或者说是函数参数，最终生效的是传进来的字符串，比如 'width'，那么会被替换成 style['width']相当于style.width
但style.attr则不会把attr 当作变量处理，style 没有 attr 这个属性当然会出错。