关于上下文的问题this的问题

最新推荐文章于 2022-11-18 09:56:53 发布

会飞的蜗牛_

最新推荐文章于 2022-11-18 09:56:53 发布

阅读量551

点赞数

分类专栏：大前端 java 文章标签： p2p 蓝桥杯网络协议

本文链接：https://blog.csdn.net/huifeidewoniu_/article/details/122380091

版权

java 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

大前端

1 篇文章 0 订阅

订阅专栏

1.关于Java中的this上下文

package com.jiang.entity;

/**
 * Description:
 * Author: jiang Administrator
 * Version: 1.0
 * Create Date Time: 2021/11/14 20:07.
 * Update Date Time:
 *
 * @see
 */
public class UserVo {

    private String nickname;
    private Integer age;

    public void say(){
        System.out.println(this.nickname);
        System.out.println(this.age);
    }

    public static void main(String[] args) {
        UserVo uservo = new UserVo();
        uservo.nickname="yykk";
        uservo.age = 35;
        uservo.say();
    }

}

通过上面我们很清楚知道。say方法中的的this指向的uservo的实例。也就告诉你一个道理，谁执行的方法，this就指向谁。如果指向父类的属性属性和成员的用什么？super

2.关于JS中的this上下文

在js中是同理的

!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

        <div id="app">
            <button id="clickbtn">点击</button>
        </div>

        <script>


             document.getElementById("clickbtn").addEventListener("click",function(){
                // 把按钮的上下文传递给下面的作用域
                 var that = this;
                window.setTimeout(function(){
                    console.log(that.tagName);
                },1000);
            })
        </script>    
    </body>
</html>

箭头函数解决上下文this指向问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

        <div id="app">
            <button id="clickbtn">点击</button>
        </div>

        <script>
             document.getElementById("clickbtn").addEventListener("click",function(){
                setTimeout(()=>{
                    setTimeout(()=>{
                        console.log(this.tagName);
                    },1000)
                },1000);
            })
        </script>    
    </body>
</html>

使用箭头函数，可以把this指向拉到最顶层去。就解决this指向的问题

3.在开发中为什么要用上下文呢？

var KssCourse = {
    pageNo: 1,
    pageSize: 10,
    load: function() {
        console.log(this.pageNo); //1
        console.log(this.pageSize); //10
    }
}

// 对象执行方法
KssCourse.load();

通过上面可以得出一个结论，KssCourse对象执行的方法，自然load方法中的this指向就是KssCourse。

好处是什么?

this 的上下文的编写，并不因为对象的名字而发生偏移

5.关于Vue的上下文问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <div id="bigapp">


            <div class="app">
                <h1>{ {title} }</h1>
                <button @click="loadMore">加载更多</button>
            </div>
        </div>


        <script src="js/vue.min.js"></script>
        <script src="js/axios.min.js"></script>
        <script>

            // vue生命周期beforeCreated---进行继承加工

            var obj1;
            var obj2;

            var vue = new Vue({
                el:"#bigapp",
                data:{
                    title:"Vue的上下文问题"
                },


                methods:{ 
                    loadMore:function(){
                        this.title = "ok";
                        console.log(this);
                        console.log("加载更多")
                    }
                }
            })




        </script>

    </body>
</html>

通过上面的图例可以看出来，vue在实例化的时候，会把里面所有的子对象：filters,methods,data等这些子对象的方法和属性，全部会复制一份放一份在顶层的对象中。vue对象

好处：

方便我们开发中统一执行和调用。

6.关于异步处理上下文问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <div id="bigapp">

            <h1>{ {title} }</h1>
            <button @click="loadMore">加载更多</button>

        </div>


        <script src="js/vue.min.js"></script>
        <script src="js/axios.min.js"></script>
        <script>

            // vue生命周期beforeCreated---进行继承加工
            var vue = new Vue({
                el:"#bigapp",
                data:{
                    title:"Vue的上下文问题"
                },

                created(){
                    this.loadMore();
                },

                methods:{ 
                    loadMore:function(){
                        var that = this;
                        that.title = "ok";
                        console.log("加载更多")
                        var promise = axios.post("/api/then");// 我想结婚,承诺很多很多
                        promise.then(function(){
                            console.log(that);//兑现承诺就这里执行
                        }).catch(function(){
                            console.log(that);//兑现承诺就这里执行
                        })
                    }

                }
            })




        </script>

    </body>
</html>

其实通过箭头函数，就可以很好解决我们上下文this的问题，在上面的代码中，我们已经得知箭头函数可以把this拉到最顶层上下文。

那为什么在开发中，有时候不适用这种机制呢？因为很多低版本浏览器是不支持箭头函数，不支持es6很多新语法，所以飞哥没用。

7.总结

如果未来你小程序开发或者基于vue-cli脚手架开发，你就大量去使用这些箭头函数或者新的语法，因为这个脚手架中都内置的编译器：webpack

这个编译器会把代码的新语法转换成功低版本的浏览器的识别的代码。

会飞的蜗牛_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于上下文的问题this的问题

1.关于Java中的this上下文package com.jiang.entity;/** * Description: * Author: jiang Administrator * Version: 1.0 * Create Date Time: 2021/11/14 20:07. * Update Date Time: * * @see */public class UserVo { private String nickname; private I..
复制链接

扫一扫