函数的上下文

最新推荐文章于 2022-03-24 15:34:48 发布

端脑

最新推荐文章于 2022-03-24 15:34:48 发布

阅读量212

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43776742/article/details/103556907

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

函数的上下文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: pink;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        /* 函数上下文 this代表谁？
        一 函数假如是圆括号执行 函数的上下文就是window
        var a = 100;
        function fn(a,b,c,d,e,f) {
            console.log(this===window);// true
            var a = 200;
            console.log(this.a); // window.a
        }
        fn(1,3,5,7,9,11); // window.fn() 
        console.log(window);
        */
        /* 二 函数作为事件处理函数 函数上下文就是这个事件触发的对象
        function changeColor() {
            this.style.background = "green";
        }

        var divs = document.querySelectorAll("div");
        for(var i=0; i<divs.length; i++) {
            divs[i].onclick = changeColor;
        }
        */
        
        /* 三 函数作为对象的方法 对象打点调用 那么函数上下文是这个对象
        function say() {
            console.log(this.name);//
        }

        var obj = {
            name: "xiaowei",
            age: 19,
            sex: "M",
            say:say
        }

        //say();
        obj.say();
        */
        
        /*//   四 定时器函数上下文是window
        var divs = document.querySelectorAll("div");

        divs[0].onmouseover = function() {
            setInterval(function() {
                console.log(this);
                this.style.background = "red";
            }, 1000);
        }
        改进：
        divs[0].onmouseover = function() {
            var _this = this; // this就是事件源
            setInterval(function() {
                //console.log(this);
                _this.style.background = "red";
            }, 1000);
        }
        */


        /* 5 函数作为数组元素 被索引出来执行 函数上下文是这个数组
        function fn() {
            console.log(this);
            console.log(this.length);
        }

        var arr = [fn,1,2,3,4];
        arr[0]();
        */
    </script>
</body>
</html>

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数的上下文

函数的上下文<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫