js——this详解

最新推荐文章于 2023-02-19 11:56:43 发布
最新推荐文章于 2023-02-19 11:56:43 发布
阅读量49 收藏
点赞数
分类专栏： JavaScript 文章标签： js 面向对象编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuehaocyuyan/article/details/119738026
版权

认识上下文：函数上下文this指待啥由函数调用方式决定

认识上下文之上下文规则1

上下文规则：1.对象打点其方法函数，则函数的上下文就是这个打点的对象 对象.方法()
四个小例题

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文规则</title>
</head>

<body>
    <script>
        // 上下文规则1：对象打点调用其方法函数，则函数上下文就是打点的对象
        // 习题1
        function fn() {
            console.log(this.a + this.b); //this-obj
        }
        var obj = {
            a: 1,
            b: 2,
            fn: fn
        }
        obj.fn()

        // 习题2
        var obj1 = {
            a: 1,
            b: 2,
            fn: function () {
                console.log(this.a + this.b); //this-obj2
            }
        }
        var obj2 = {
            a: 3,
            b: 4,
            fn: obj1.fn
        }
        obj2.fn()

        // 3.
        function outer() {
            var a = 1
            var b = 2
            return {
                a: 3,
                b: 4,
                fn: function () {
                    console.log(this.a + this.b); //this——outer执行结果
                }
            }
        }
        outer().fn()

        // 4.
        function fun() {
            console.log(this.a + this.b); //this-{a:3,b:4,c:fun}
        }
        var obj3 = {
            a: 1,
            b: 2,
            c: [{
                a: 3,
                b: 4,
                c: fun
            }]
        }
        var a = 5;
        obj3.c[0].c()
    </script>
</body>

</html>

上下文使用规则2

2.圆括号直接调用，则函数上下文就是window对象 方法()
例题1

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文规则2</title>
</head>

<body>
    <script>
        // 使用规则2：圆括号直接使用，函数上下文this是window对象
        // 习题1
        var obj1 = {
            a: 1,
            b: 1,
            fn: function () {
                console.log(this.a + this.b); //this-window
            }
        }
        var a = 3
        var b = 4
        var fn = obj1.fn
        fn(); //圆括号直接调用，this-window
    </script>
</body>

</html>

例题2

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=sc, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 习题2：好题
        function fun() {
            return (this.a + this.b);
        }
        var a = 1
        var b = 2
        var obj2 = {
            a: 3,
            b: fun(), //b=3 因为fun()符合规则2，然后fun()执行结果：a+b=3
            fun: fun
        }
        console.log(obj2.fun());
    </script>
</body>

</html>

3上下文规则三

3.数组（类数组对象）枚举出函数进行调用，则上下文就是数组（类数组对象） 数组名index

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文规则3</title>
</head>

<body>
    <script>
        // 上下文规则3：数组（类数组对象）枚举出函数进行调用，上下文对象就是该数组（类数组对象）
        // 类数组对象:所有键名从0开始,且待length属性的对象
        // 比如:arguments对象,它是函数的实参列表

        // 习题1
        var arr = [1, 2, 3, function () {
            console.log(this[0]); //this-arr
        }]
        arr[3](); //数组名[index]()

        // 习题2:好题
        function fun() {
            arguments[3]()
        }
        fun(1, 2, 3, function () {
            console.log(this[2]); //this-arguments
        })
    </script>
</body>

</html>

上下文规则四

4.IIFE中的函数，上下文是window对象 IIFE：立即可执行函数：(function(){})()

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文规则4</title>
</head>

<body>
    <script>
        // 上下文规则4:IIFE的函数,上下文是window对象
        // IIFE:立即可执行函数 (function(){})()

        // 习题1:好题
        var a = 1
        var obj = {
            a: 2,
            fun: (function () {
                var a = this.a //规则四: this-window
                return function () {
                    console.log(a + this.a); //规则1:this-obj
                    //1+2
                }
            })()
        }
        obj.fun() //规则1
    </script>
</body>

</html>

上下文规则五

5.定时器、延时器调用函数，上下文是window对象 setInterval(函数，时间) setTimeout(函数，时间)

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文规则5</title>
</head>

<body>
    <script>
        // 上下文规则5:使用定时器\延时器调用函数,上下文是window对象 setInterval(函数,时间) setTimeout(函数,时间)

        // 习题1
        var obj = {
            a: 1,
            b: 2,
            fun: function () {
                console.log(this.a + this.b); //this-window
            }
        }
        var a = 3
        var b = 4
        setTimeout(obj.fun, 2000) //规则5
        // 习题2
        setTimeout(function () {
            obj.fun() //规则1
        }, 2000)
    </script>
</body>

</html>

上下文规则6

6.事件处理函数的上下文是绑定事件的DOM元素 DOM元素.绑定事件=fuction(){}

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文规则6</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 10px;
        }
    </style>
</head>

<body>
    <!-- 上下文规则6:事件处理函数的上下文就是事件绑定的DOM元素 DOM元素.绑定事件=处理函数 -->
    <!-- DOM元素.绑定事件=function(){} -->

    <!-- 习题1:点击哪个盒子哪个盒子就变红,要求使用同一个事件处理函数 -->

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <script>
        var boxs = document.getElementsByClassName('box')
        // 习题1:点击哪个盒子哪个盒子就变红,要求使用同一个事件处理函
        // for (var i = 0; i < boxs.length; i++) {
        //     boxs[i].onclick = fun

        //     function fun() {
        //         this.style.backgroundColor = 'red' //this-boxs[i]
        //     }

        // }

        // 习题2;点击哪个盒子哪个盒子就在1000ms后变红,要求使用同一个事件处理函数 好题
        for (var i = 0; i < boxs.length; i++) {
            boxs[i].onclick = fun

            function fun() {
                // 备份上下文 重点
                var _this = this //boxs[i]点击后this是boxs[i],将这个this备份起来
                setTimeout(function () {
                    _this.style.backgroundColor = 'green' //_this---boxs[i]
                }, 1000)
            }
        }
    </script>
</body>

</html>

call 和apply可以指定上下文

call和apply能指定函数的上下文 函数.call(上下文，参数) 函数.apply(上下文，参数) 区别：函数带参时，call用逗号罗列参数，apply以数组的形式传入零散值

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>call 和apply可以指定上下文</title>
</head>

<body>
    <!-- 函数.call(上下文)  函数.apply(上下文)-->
    <script>
        function fun1() {
            fun2.apply(this, arguments) //函数.apply(上下文) this-33,44
        }

        function fun2(a, b) {
            console.log(a + b);
        }
        fun1(33, 44); //圆括号直接调用，this-window对象
    </script>
</body>

</html>

上下文规则总结

Sarnwan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js入门（3）——详解组件通信
11-27
本文介绍vue.js组件，具体如下： 5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改...
JS中的this
红叶落水的博客
04-19 355
红叶何时落水 谁调用就指向谁 当一个对象调用时，this指向这个对象的首地址 var obj = { name: "obj_name", obj2: { name: "obj2_name", func: function() { console.log(this.name) } }, func: function() {
JS中函数的this大解析【笔记】
qq_42533666的博客
02-19 77
理解 this 指向和箭头函数里面的 this 指向。
JS深入/this详解
zhumizhumi的博客
05-22 223
this指向
JavaScript中的this详解
EmotionComputer
09-15 2747
箭头函数和普通函数的区别如下。 普通函数：根据调用我的人（谁调用我，我的this就指向谁） 箭头函数：根据定义时所在的对象，而不是使用时所在的对象。（我在哪个环境中，this就指向谁） 例如： function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; fo...
如何理解js中的this
weixin_69830171的博客
07-13 1787
this的值取决于它所在的函数如何被调用。下面是this可以获得新值的6种不同方式：下面我们一起来看看this是如何在每个环境中被改变的。当this在任何函数外面被调用时，也就是说在全局环境中被调用，在浏览器中。它默认指向window对象。 一般在全局环境中，我们很少用this关键字 ，所以我们对它也没有那么在意，继续看下一个环境。当我们使用new关键字创建一个对象的新的实例时，this关键字指向这个实例。 通过上面的代码，我们会发现，greg是Human的一个实例，现在无论何时调用greg，thi
JavaScript闭包实例详解
11-23
2、函数是一种对象，但是函数却不像数组一样——你可以说数组是对象的一种，因为数组就像是对象的一个子集一样。但是函数与对象之间，却不仅仅是一种包含和被包含的关系，函数和对象之间的关系比较复杂，甚至有一点...
javascript表达式和运算符详解
12-04
 ——js《权威指南》 1.原始表达式。 常量/直接量： 3.14/ “test” 等 关键字： null，this，true，false 等 变量： i，k，j 等 复合表达式：原始表达式和原始表达式之间用运算符连接可以组成一个复合表达式。 ...
JavaScript详解(第2版)
04-25
第1章　JavaScript简介　1 1.1　JavaScript是什么　1 1.2　JavaScript不是什么　2 1.3　JavaScript的用处　3 1.4　JavaScript及其在Web页面中的位置　3 1.5　Ajax是什么　5 1.6　JavaScript是什么样子的　6 1.7　...
03-javaWeb-js.7z
07-02
扩展——this使用 案例2-表单校验plus 了解阻止事件 逻辑运算符  列表操作  案例3-隔行换色 dom(文档对象模型)——节点操作  案例4-全选或者全不选 html dom的操作 案例5-左右选中 数组 案例6-省市...
解析JavaScript--关键字this
郊眠寺
10-13 546
它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位
JS中的this详解
weixin_30980795的博客
07-19 6369
一、this原理 this是JavaScript的一个关键字，函数调用时才会出现； 因为函数是在一定的环境中运行的，调用函数时肯定需要知道是[谁调用的]？就用到了this进行指向； 那么this到底指向的是什么？ this 既不指向函数自身，也不指函数的词法作用域，而是调用函数时的对象！ 二、使用场景 （一）普通函数的调用，this指向的是Window var name = '卡卡'; function cat(){ var name = '有鱼'; console.log(this.name);/
JS中的this指向
热门推荐
m0_55990909的博客
05-13 3万+
this的概念： 在js中，this的意思为“这个;当前”，是一个指针型变量，它动态指向当前函数的运行环境。 在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象window。 普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。 箭头函数：箭头函数的this指向于函数作用域所用的对象。 一、全局环境下的this指向 在全局作用域下，this始终指向全局对象window，无论是否是严格
JavaScript中的_this
zzzzzheike的博客
12-03 102
给大家举一个js中最常用的例子来说明_this的作用： $("#btn").click(function(){ var _this = this;//这里this和_this都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍历到的".tr"对象 _this;//仍代表"#btn"对象 }) }) 这种情况就是再JavaScr...
全面理解JS中的this
txun123的博客
04-17 2628
JavaScript开发中，我们经常会用到this，也经常会因为this头疼，为什么呢，因为有时候我们不知道this到底指的是什么？怎么用？ 其实this是执行上下文对象的一个属性，执行上下文中有三个重要的属性，作用域链(scopeChain)、变量对象(VO)和this。 this是在进入执行上下文时确定的，也就是在函数执行时才确定，并且在运行期间不允许修改并且是永久不变的。 我们分各种执行上下文情况来详细解读下this： 一、在全局代码中的this 在全局代码中this 是不变的，this始终
js中的this指向
weixin_45775536的博客
10-16 2260
由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值,所以箭头函数的this一经捕获就不再发生变化,1.this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj。箭头函数的this就是继承该普通函数的this；简单来说：箭头函数的this指向，通过定义箭头函数的地方向上寻找，找到第一个嵌套该箭头函数的。没有自己的this,从自己的作用域链的上一层继承this（跟随上一层的this变而变）。
vue 之var _this=this作用
qq_41555278的博客
10-03 2924
mounted: function () { var _this = this; } _this只是一个变量名，this代表父函数，如果在子函数还用this，this的指向就变成子函数了，_this就是用来存储指向的 https://blog.csdn.net/cataclysm2012/article/details/80350403 普通函数中的this表示调用此函数时的...
JS中的this是什么，this的四种用法
坐看云起时_雨宣
05-08 1万+
在Javascript中，this这个关键字可以说是用的非常多，说他简单呢也很简单，说他难呢也很难，有的人开发两三年了，自己好像也说不清this到底是什么。下面我们来看看： 1、在一般函数方法中使用 this 指代全局对象 function hello(){ this.x = 1; console.log(this.x) } hello(); //此时控制台打印1 2....
关于js中this的详解
Ximerr的博客
01-15 912
js的this分两种，动态绑定和静态绑定，并且只能在函数内出现，node模块和es模块中也能直接使用this，此时的this指向模块自身。 在函数中使用时，除非函数是通过箭头函数定义，其余形式皆为动态绑定。本质上，node模块和基于模块系统构建的浏览器环境模块都是利用js闭包实现，所以也是函数。 静态绑定的this指向词法作用域上一级的对象。比如，在一个Plain Object中定义的浅层箭头...
Serializers 序列化组件——ModelSerializer详解
最新发布
05-19
在 Django 中，ModelSerializer 是 Django REST Framework 中最常用的序列化器之一。它是一个自动化序列化组件，可以帮助我们快速地将一个 Django 模型转换成一个 RESTful API 的响应格式。 具体来说，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值