JavaScript函数的this属性

一、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>

 

你可能感兴趣的:(JavaScript)