JavaScript函数的this属性

浏览数：25 / 时间：2015年06月08日

一、this详解：

　　1、函数内部另一个特殊对象是 this，其行为与 Java 和 C#中的 this 大致相似。

　　2、换句话说，this 引用的是函数据以执行操作的对象，或者说函数调用语句所处的那个作用域。

　　3、当在全局作用域中调用函数时，this 对象引用的就是 window（是一个对象，而且是js里面最大的对象，是最外围的对象）。

alert(window);//结果[object Window]   是object类型
    
alert(this);//结果[object Window]   是object类型    因为在window范围下   所以this就是window

　　window.color = ‘红色的‘;         //全局的，或者 var color = ‘红色的‘;也行
 　　alert(this.color);                 //打印全局的 color
    
    var box = {
        color : ‘蓝色的‘,                 //局部的 color
        sayColor : function () {
            alert(this.color);             //此时的 this 只能 box 里的 color
    　　}
    };
    box.sayColor();
    
    alert(this.color);        //还是全局的

　　window.color = ‘红色的‘;         //全局的，或者 var color = ‘红色的‘;也行
    
    function sayColor(){
        alert(this.color);             
    }
    sayColor();         //这里调用sayColor，其实还是在window范围下的
    
    var box={
        color:‘蓝色‘
    }
    box.sayColor = sayColor;
    box.sayColor();//蓝色

二、this应用：

<script type="text/javascript">
    window.onload = function(){
        var aBtn = document.getElementsByTagName(‘input‘);
        var that = null;            // 空
        
        for(var i=0; i<aBtn.length; i++){
            aBtn[i].onclick = function (){
                this.style.background = ‘yellow‘;    //这里this表示的是aBtn[i],而不是window
            }
        }
    }
</script>
<body>
    <input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />
</body>

<script type="text/javascript">
    window.onload = function(){
        var aBtn = document.getElementsByTagName(‘input‘);
        var that = null;            // 空
        
        for(var i=0; i<aBtn.length; i++){
                aBtn[i].onclick = fn1;
        }
        
        
        function fn1(){
            this.style.background = ‘yellow‘;  //这里this同样表示的是aBtn[i]
        }
    }
</script>
<body>
    <input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />
</body>

<script type="text/javascript">
    window.onload = function(){
        var aBtn = document.getElementsByTagName(‘input‘);
        var that = null;            // 空
        
        for(var i=0; i<aBtn.length; i++){
            aBtn[i].onclick = function (){
                
                fn1();         //如果这样调用的话，fn1函数里面的this代表的是window
            }
        }
        
        
        function fn1(){
            this.style.background = ‘yellow‘;  //这里this同样表示的是aBtn[i]
        }
    }
</script>
<body>
    <input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />
</body>

<script type="text/javascript">
    window.onload = function(){
        var aBtn = document.getElementsByTagName(‘input‘);
        var that = null;            // 空
        
        for(var i=0; i<aBtn.length; i++){
            aBtn[i].onclick = function (){
                that = this;
                fn1();      //这里this就表示aBtn[i]
            }
        }
        
        
        function fn1(){
            that.style.background = ‘yellow‘;  //这里this同样表示的是aBtn[i]
        }
    }
</script>
<body>
    <input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />
</body>

</head>
<script type="text/javascript">
    window.onload = function (){
        var aLi  = document.getElementsByTagName(‘li‘);
        var that = null;
        
        for( var i=0; i<aLi.length; i++ ){
            aLi[i].onmouseover = function (){
                //this.getElementsByTagName(‘div‘)[0].style.display = ‘block‘;     //这里this代表的是aLi[i]
                
                //如果这里要调用外部的方法，将this这个属性赋值给一个变量，然后调用这个函数，那么函数里的this就表示的是aLi[i]它了
                that = this;
                fn1();
            };
            aLi[i].onmouseout = function (){
                this.getElementsByTagName(‘div‘)[0].style.display = ‘none‘;
            };
        }
        
        function fn1(){
            that.getElementsByTagName(‘div‘)[0].style.display = ‘block‘;
        }
    };
</script>
<style>
li { width:100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; }
div { width:80px; height:200px; background:red; position:absolute; top:75px; left:10px; display:none; }
</style>
<body>
    <ul>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
    </ul>
</body>