JS初学——this的学习及简单运用

时间：2016-07-01 01:17:41 阅读：186 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function (){
                var obtn = document.getElementById("btn");
                function fn(){
                    alert(this);
                }
                fn();
                obtn.onclick = fn;
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="按钮" />
    </body>
</html>

view code

this指的是调用当前方法（函数）的对象，也可以理解为谁让函数运行，谁就是这个this.

var obtn = document.getElementById("btn");
obtn.onclick = function(){
                    this;
                }

　　很明显，调用当前匿名函数的对象为obtn

window.onload = function (){
                var obtn = document.getElementById("btn");
                function fn(){
                    this;
                }
                fn();
                obtn.onclick = function(){
                    fn();
                }
            }

　　而当obtn里面调用了另外一个函数，那么fn的对象仍然为window.

　　理解：

<script type="text/javascript">
            window.onload = function (){
                var abtn = document.getElementsByTagName("input");
                for(var i = 0; i<abtn.length;i++){
                    abtn[i].onclick = function(){
                    this.style.backgroundColor = "yellow";
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="按钮" />
        <input type="button" name="btn2" id="btn2" value="按钮" />
        <input type="button" name="btn3" id="btn3" value="按钮" />
    </body>

View Code

　　this指的是obtn对应的input标签

<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;
                    fn();
                    }
                }
                function fn(){
                    that.style.backgroundColor = "yellow";
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="按钮" />
        <input type="button" name="btn2" id="btn2" value="按钮" />
        <input type="button" name="btn3" id="btn3" value="按钮" />
    </body>

View Code

　　可以先定义一个空元素，通过把当前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 = fn;
                }
                function fn(){
                    this.style.backgroundColor = "yellow";
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="按钮" />
        <input type="button" name="btn2" id="btn2" value="按钮" />
        <input type="button" name="btn3" id="btn3" value="按钮" />
    </body>

View Code

　　这是另外一种用法。

JS初学——this的学习及简单运用

标签：

原文地址：http://www.cnblogs.com/running-wsnail/p/5631559.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行