JS-BOM----顶级对象window的操作(二)

news/2024/7/11 0:44:51 标签: javascript, 前端, es6

this指向问题

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。

  • 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)

  • 方法调用中谁调用this指向谁

  • 构造函数中this指向构造函数的实例


location对象

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

        console.log(location.href);
        console.log(location.host);
        console.log(location.port);
        console.log(location.pathname);
        console.log(location.search);
        console.log(location.hash);
location对象属性返回值
location.href获取或者设置整个URL
location.host返回主机(域名)
location.port返回端口号,如果未写返回 空字符串
location.pathname返回路径
location.search返回参数
location.hash返回片段 #后面内容 常见于链接 锚点

在这里插入图片描述

location.search获取到参数解析为对象形式:

        // 获取到参数
        let userData = location.search;
        // 去掉第一个字符(?)  以&分割
        userDataList = userData.substr(1).split('&');

        let newDict = new Object();
        // 遍历数组以=分割  赋值给对象内
        for (let i = 0; i < userDataList.length; i++) {
            var obj = userDataList[i].split('=');
            newDict[obj[0]] = obj[1];
        }
        console.log(newDict);

URLSearchParams方式获取参数解析为对象形式:

        // 创建URLSearchParams(参数为location.search的参数)的对象 
        let userData = new URLSearchParams(location.search);
        // 直接创建对象  URLSearchParams对象.get('键名')
        let newDict = {
            'username': userData.get('username'),
            'password': userData.get('password'),
        };
        console.log(newDict);

navigator对象

navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。

判断用户是用手机浏览页面还是电脑浏览页面:

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

history对象

window对象给我们提供了一个 history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。

history对象方法作用
back( )可以后退功能
forward( )可以前进功能
go( 参数 )参数为1前进一个页面 参数为-1后退一个页面

js是单线程

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Js这门脚本语言诞生的使命所致------Js是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

同步任务和异步任务

​ 单线程导致的问题就是后面的任务等待前面任务完成,如果前面任务很耗时(比如读取网络数据),后面任务不得不一直等待。

​ 为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任务异步任务

同步任务:

在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。

异步任务:

不进入主线程、而进入"任务队列"的任务,当主线程中的任务运行完了,才会从"任务队列"取出异步任务放入主线程执行

常见的异步任务:
  • 资源加载,例:load、error
  • 所有的事件操作
  • 定时器
    • (定时器的定义属于同步任务,而定时器的回调函数属于异步任务。)

http://www.niftyadmin.cn/n/740544.html

相关文章

JS-三大元素系列----offset、client和scroll

元素偏移量offset系列&#xff1a; offset就是偏移量&#xff0c;使用 offset系列相关属性可以动态的得到该元素的位置&#xff08;偏移&#xff09;、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小&#xff08;宽度高度&#xff09; 注意&#xff1a;返回…

JS---- mouseenter和mouseover的区别以及动画函数的封装

mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover&#xff0c;它们两者之间的差别是mouseover 鼠标经过自身盒子会触发&#xff0c;经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样&#xff0c;就是因为mouseenter不…

JS----轮播图案例

轮播图案例 分析&#xff1a; 点击左右箭头 滑动轮播图鼠标不在轮播图内时 每隔2秒自动滑动轮播图鼠标移入时 停止自动滑动轮播图点击小圆圈 显示对应的轮播图 鼠标移入、移出显示或隐藏左右箭头&#xff1a; // 获取左右箭头的元素let arrow_l this.document.querySelecto…

JS----触摸事件对象

触屏事件 移动端浏览器兼容性较好&#xff0c;我们不需要考虑以前 JS 的兼容性问题&#xff0c;可以放心的使用原生 JS 书写效果&#xff0c;但是移动端也有自己独特的地方。比如触屏事件 touch&#xff08;也称触摸事件&#xff09;&#xff0c;Android和 IOS 都有。 常见的触…

JS---使用swiper制作移动端轮播图

进入官网下载swiper插件 插件下载地址 加载插件&#xff0c;需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件 <!-- 引入swipercss文件 --><link rel"stylesheet" href"swiper/swiper-bundle.min.css"><!-- 引入swiper…

JS高级----面向对象

面向对象 面向对象是一种编程思想。 主要是把事物给对象化&#xff0c;包括其属性和行为。总体来说面向对象的底层还是面向过程&#xff0c;面向过程抽象成类&#xff0c;然后封装&#xff0c;方便使用就是面向对象。 构造函数&#xff1a; 构造函数是专门用于创建对象的函数&a…

JS高级----对象的继承

什么是继承&#xff1f; 一个对象继承另一个对象&#xff0c;可以使用父级对象的属性和方法&#xff0c;共享资源&#xff0c;避免大量浪费系统资源 prototype 属性的作用&#xff1a; 原型对象的所有属性和方法&#xff0c;都能被实例对象共享。 如果属性和方法定义在原型上&…

JS高级----this指向问题和动态修改this指向

普通函数内&#xff1a; function study() {console.log(this);}let study1 function() {console.log(this);}study(); // window 对象study1(); // window 对象let user {name: zs,age: 12,walk: function() {console.log(this);}}user.walk(); // this指向方法在的那个对象…