【JavaScript-BOM】this指向,同步异步问题

简介: 【JavaScript-BOM】this指向,同步异步问题

前言


1.函数直接调用this指向widow; 2.this指向是在函数执行的时候绑定的,而不是在函数创建的时候绑定的,所以是谁调用就指向谁;


1.JavaScript this指向问题  


下面用几个例子来切实的感受一下

<body>
    <button></button>
    <script>
        //this指向问题一般情况下this的最终指向的是那个调用它的对象
        //1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
        console.log(this);
        function fn() {
            console.log(this);
        }
        window.fn();
        //2.方法调用中谁调用this指向谁
        var q = {
            say: function () {
                console.log(this);
            }
        }
        q.say();
        var btn = document.querySelector('button');
        btn.onclick = function () {
            console.log(this);
        }
        btn.addEventListener('click', function () {
            console.log(this);
        })
        //3.构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this);
        }
        var fun = new Fun();
    </script>
</body>


2.同步异步问题


2.1什么是同步异步

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对一个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。 单线程就意味着,所有任务需要排队,前一个任务结束后才会执行后个任务。 这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。



同步任务 同步任务都在主线程上执行,形成个执行栈。


异步任务. JS的异步是通过回调函数实现的。 一般而言,异步任务有以下三种类型: 1、普通事件,如click、 resize等 2、资源加载,如load、error等 3、定时器,包括setInterval、setTimeout等 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。


1.先执行执行栈中的同步任务。


2.异步任务(回调函数)放入任务队列中。


3.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。



2.2location常见属性

window对象给我们提供了一个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。


什么是url?


统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。



页面跳转


<body>
    <form action="index.html">
        用户名:<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

 

<script>
        // 利用substr把?去掉   substr用法:substrate(起始位置,截取几个字符)
        var params = location.search.substr(1);
        console.log(params);
        var na = params.split('=');
        var div = document.querySelector('div');
        div.innerHTML = '欢迎' + na[1] + '来到山鱼团队';
    </script>


location常见方法



<body>
    <button class="first">点击我可以后退哦</button>
    <button class="last">点击我不能后退呢</button>
    <button class="reload">点击我不能后退呢</button>
    <script>
        var btn = document.querySelector('.first');
        btn.addEventListener('click', function () {
            // 记录浏览历史可以进行后退
            location.assign('http://www.baidu.com');
        })
        var btn1 = document.querySelector('.last');
        btn1.addEventListener('click', function () {
            // 不记录浏览历史,不能进行后退
            location.replace('http://www.baidu.com');
        })
        var btn2 = document.querySelector('.reload');
        btn2.addEventListener('click', function () {
            // 强制刷新
            location.reload(true);
        })
    </script>
</body>
目录
相关文章
|
1月前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
2月前
|
前端开发 JavaScript 开发者
JS 异步解决方案的发展历程以及优缺点
本文介绍了JS异步解决方案的发展历程,从回调函数到Promise,再到Async/Await,每种方案的优缺点及应用场景,帮助开发者更好地理解和选择合适的异步处理方式。
|
2月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
24 1
|
3月前
|
JavaScript 前端开发
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
|
3月前
|
JSON 前端开发 JavaScript
一文看懂 JavaScript 异步相关知识
一文看懂 JavaScript 异步相关知识
40 4
|
4月前
|
存储 JavaScript API
Node.js中的异步API
【8月更文挑战第16天】
40 1
|
4月前
|
JavaScript 前端开发 API
【前端开发】JS同步与异步调用,Vue2基础知识
本文简要介绍了JavaScript中的同步与异步调用以及Vue2的基础知识。 ### JS同步与异步调用 - **同步调用**:代码按顺序执行,每个任务完成后才执行下一个。 - **异步调用**:允许代码并发执行,不必等待前一个任务完成。 - **回调函数**:传统异步模式,如`setTimeout`。 - **Promise**:解决回调地狱问题,链式调用 `.then()`。 - **async/await**:基于Promise,使异步代码看起来像同步代码。 ### Vue2基础知识 - **核心概念**:指令、实例、组件、模板、数据绑定和生命周期钩子。 - **指令**
80 5
|
5月前
|
数据采集 JavaScript Python
【JS逆向课件:第十三课:异步爬虫】
回调函数就是回头调用的函数
|
4月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
4月前
|
前端开发 JavaScript
JavaScript——promise 是解决异步问题的方法嘛
JavaScript——promise 是解决异步问题的方法嘛
50 0