javaScript-内置对象和bom对象

最新推荐文章于 2021-07-09 20:08:03 发布
最新推荐文章于 2021-07-09 20:08:03 发布
阅读量394 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45436241/article/details/109495394
版权

文章目录

1.对象

一组属性和方法的集合

1.1.定义方式
  • 使用new关键字定义
		<script type="text/javascript">
            let obj = new Object();
            console.log(obj) //{} 空对象
        </script>
  • 使用字面量定义
		<script type="text/javascript">
            let obj = {};
            console.log(obj) //{} 空对象
        </script>
1.2.初始化对象
  • 使用new关键字初始化
		<script type="text/javascript">
            let person = new Object();
                person.name="zs";
                person.age = "18";
                person.play = function(sportName) {
                    console.log("play..."+sportName)
                }
            console.log(person.name);
            console.log(person.age);
            person.play("football");
        </script>
  • 使用字面量初始化
		<script type="text/javascript">
            let person = {
                name : "zs",
                age : "18",
                play : function(sportName) {
                    console.log("play..."+sportName)
                }
                //es6的写法
                play(sportName){
                    console.log("play..."+sportName)
                }
            };
            console.log(person.name);
            console.log(person.age);
            person.play("football");
        </script>

访问方式：

访问对象： 对象名

访问属性： 对象.属性名 或者 对象[‘属性名’]

访问方法： 对象.方法名();

1.3.this

this指代当前对象，B对象去调用A方法, A方法中的this代表B对象

		<script type="text/javascript">
            let person = new Object();
                person.name = '梅西';
                person.play = function(sportName) {
                    console.log("this指代的是："+this)//[object Object]
                    console.log(this.name);//梅西
                    console.log("play..."+sportName)
                }
            person.play("football");
        </script>
2.内置对象
2.1.String对象

JS中字符串可以是基本数据类型，也可以是引用数据类型，

具体是哪一种根据我们创建的方式而定；

基本数据类型：

let str = 'abc'

引用数据类型：

let str = new String("abc")

1、基本类型字符串 和 引用类型字符串本质上是有区别( 类型不同、存储的位置不同 )
2、JS中的基本数据类型可以当成对应的引用类型来使用

字符串中的属性和方法：

  • str.length 获取字符串的长度
 		<script type="text/javascript">
            let str = "abc";
            console.log(str.length);//3
        </script>
  • str.charAt 返回指定索引的值
		<script type="text/javascript">
            let str = "abc";
            console.log(str.charAt(2));//c
            console.log(str.charAt(10));//不存在的索引位置 "" 空字符串
        </script>
  • str.indexOf() 返回指定字符在母串中第一次出现的索引值(从左到右),没有返回-1,与lastIndexOf相反 === 从右向左
		<script type="text/javascript">
            let str = "abcabc";
            console.log(str.indexOf("abc"));//0
            console.log(str.indexOf("d"));//-1
        </script>
  • str.replace() 替换字符串 replace(A, B) B替换A
		<script type="text/javascript">
            let str = "abcabc";
            str = str.replace("abc","cba");
            console.log(str);//cbaabc 只替换第一次出现
            str = str.replace(/abc/g,"cba");
            console.log(str);//cbacba 全局替换
        </script>
  • str.substr() 截取字符串
		<script type="text/javascript">
            let str = "abcdefghijkl";
            console.log(str.substr(4)); //efghijkl 只有一个参数，从给定索引位置开始截取到末尾
            console.log(str.substr(5,7));//fghijkl 有两个参数，第一个参数表示截取的位置，第二个参数表示截取的个数
        </script>
  • str.substring() 截取字符串
		<script type="text/javascript">
            let str = "abcdefghijkl";
            str = str.substring(3);
            console.log(str);//defghijkl 只有一个参数，表示从给定索引位置截取到末尾
            str = str.substring(3,6);
            console.log(str);//ghi 第一个参数表示截取的起始位置，第二个参数表示截取的终止位置，遵循左闭右开规则
        </script>
  • str.toLowerCase() 转为小写
	<script type="text/javascript">
            let str = "HELLO H5";
            str = str.toLowerCase();
            console.log(str);//hello h5
        </script>
  • str.toUpperCase() 转为大写
		<script type="text/javascript">
            let str = "abcdefghijkl";
            str = str.toUpperCase();
            console.log(str);//ABCDEFGHIJKL
        </script>
2.2.Number对象
  • num.toFixed() 将数值转为指定位数的字符串
		<script type="text/javascript">
            let num = 3.14159;
            num = num.toFixed(2);
            console.log(num);//3.14
        </script>
2.3.Math对象
  • PI属性代表圆周率
		<script type="text/javascript">
            console.log(Math.PI);//3.141592653589793
        </script>
  • Math.abs(x) 返回数x的绝对值
		<script type="text/javascript">
            console.log(Math.abs(-250));//250
        </script>
  • Math.ceil(x) 对一个数x进行向上舍入
		<script type="text/javascript">
            console.log(Math.ceil(-23.233));//-23
            console.log(Math.ceil(12.789))//13
            console.log(Math.ceil(8.123))//9
        </script>
  • Math.floor(x) 对一个数x进行向下舍入
		<script type="text/javascript">
            console.log(Math.floor(-23.233));//-24
            console.log(Math.floor(12.789))//12
            console.log(Math.floor(8.123))//8
        </script>
  • Math.round(x) 把数x舍为最接近的整数（四舍五入）
		<script type="text/javascript">
            console.log(Math.round(-23.233));//-23
            console.log(Math.round(12.789))//13
            console.log(Math.round(8.123))//8
        </script>
  • Math.max(x) 返回指定数中最大的一个，可以传递无限个数
		<script type="text/javascript">
            console.log(Math.max(23,12,99,67,0,-23,-56));//99
        </script>
  • Math.min(x,y) 返回指定数中最小的一个，可以传递无限个数
		<script type="text/javascript">
            console.log(Math.min(23,12,99,67,0,-23,-56));//-56
        </script>
  • Math.random() 返回介于0~1之间的一个随机数，包含0但不包含1
		<script type="text/javascript">
            console.log(Math.random());//-0.21912269692545228
        </script>
  • 获取指定范围的随机数
		<script type="text/javascript">
            console.log(randomInt(10,20));//15

            function randomInt(min, max) {
                return Math.floor( Math.random() * (max - min + 1) ) + min;
            }
        </script>
  • Math.pow(x,y) 返回数x的y次幂的值
		<script type="text/javascript">
            console.log(Math.pow(2,3));//2的3次方 8
            console.log(Math.pow(3,2))//3的2次方 9
        </script>
2.4.Date对象
  • 创建Date对象
		<script type="text/javascript">
            let date = new Date();
            console.log(date);//9 Mon Nov 02 2020 11:38:43 GMT+0800 (中国标准时间)
        </script>
  • 创建指定日期对象
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20");
            console.log(d1);//Thu Feb 20 2020 20:20:20 GMT+0800 (中国标准时间)
        </script>
  • getFullYear() 返回一个表示年份的四位数字
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20");
            console.log(d1.getFullYear());//2020
        </script>
  • getMonth() 返回表示月份的数字,返回值是0-11之间的一个整数
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20");
            console.log(d1.getMonth());//1
        </script>
  • getDate() 返回某一天，返回值是1-31之间的一个整数
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20");
            console.log(d1.getDate());//20
        </script>
  • getDay() 返回表示星期的某一天数字，返回值是0（周日）-6（周六）之间的一个整数
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20");
            console.log(d1.getDay());//4
        </script>
  • getHours() 返回时间的小时字段，返回值是0到23之间的一个整数
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20");
            console.log(d1.getHours());//20
        </script>
  • getMinutes() 返回时间的分钟字段，返回值是0-59之间的一个整数
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20");
            console.log(d1.getMinutes());//20
        </script>
  • getSeconds() 返回时间的秒值，返回值是0-59之间的一个整数
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20:200");
            console.log(d1.getSeconds());//20
        </script>
  • getMilliseconds() 返回时间的毫秒值，返回值是0-999之间的一个整数
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20:200");
            console.log(d1.getMilliseconds());//200
        </script>
  • getTime() 返回据1970-1-1之间的毫秒值
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20:200");
            console.log(d1.getTime());//1582201220200
        </script>
  • toLocaleString() 把date对象转换为字符串
		<script type="text/javascript">
            let d1 = new Date("2020-02-20 20:20:20:200");
            console.log(d1.toLocaleString());//2020/2/20 下午8:20:20
        </script>
3.BOM对象

BOM对象（浏览器对象）由以下组成

  1. window是BOM中顶层对象
  2. window对象有六大属性、这六大属性又是一个对象
  3. History：访问浏览器的浏览历史记录
  4. Location：访问地址栏
  5. Navigator：访问浏览器的各种信息
  6. Screen：访问显示器屏幕相关的一些信息
  7. Frames[]： 框架集
  8. Document：DOM最顶层对象， 也代表网页文档
3.1.Window对象

Window对象是BOM与DOM的顶层对象，Window对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。

例如：

window.alert(); 简写方式 alert();

window.document.write(); 简写方式 document.write()

window对象中的方法:

alert()
显示带有一段消息和一个确认按钮的警告框。
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()
显示可提示用户输入的对话框。
setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()
在指定的毫秒数后调用函数或计算表达式。
clearInterval()
取消由 setInterval() 设置的 timeID。
clearTimeout()
取消由 setTimeout() 方法设置的 timeID

3.2.定时器函数调用

  • 间歇调用

    含义：每隔多少毫秒执行一次函数-周期性

    设置间歇调用: setInterval(“函数或者代码串”,时间);

    清除间歇调用: clearInterval( 计时器Id )

    语法：

1. setInterval(function(){}, 时间-毫秒);

2. setInterval(foo, 时间);
    function foo(){
   }

需求：每隔1s输出1-10之间的数字

	<script type="text/javascript">
            let num = 0;
            let task = setInterval(function(){
                num++;
                console.log(num);
                //停止任务
                if(num===10) clearInterval(task);
            },1000);
        </script>

  • 超时调用

    理解：多少毫秒后执行一次函数-只执行一次

    设置超时调用: setTimeout(“函数名或者代码串”,时间)

    清除超时调用: clearTimeout( 计时器Id )

    语法：

    1. setTimeout(function(){}, 时间-毫秒);

2. setTimeout(foo, 时间);
    function foo(){
   }

需求：使用超时调用模拟间歇调用，每隔1s输出1-10之间的数字

	 <script type="text/javascript">
            let num = 0;
            let syncTask = setTimeout(task,1000);//同步
            function task(){
                num++;
                console.log(num);
                let asyncTask = setTimeout(task,1000);//异步任务
                if(num===10) clearTimeout(asyncTask);
            }
        </script>
3.2.screen对象
availWidth显示器屏幕可用宽度，除任务栏外
availHeight显示器屏幕可用高度，除任务栏外
Width实际宽
Height实际高
		<script type="text/javascript">
            console.log(screen.availWidth);//1549
            console.log(screen.availHeight);//831
            console.log(screen.height);//872
            console.log(screen.width);//1549
        </script>
3.3.history对象

该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。

length整数值，表示浏览器历史列表中的URL的个数
back()返回到浏览器列表中当前页面之前的页面，与浏览器的“返回”功能相同
forward()前进到浏览器中当前页面之后的页面，与浏览器的“前进”按钮功能相同
go(1)访问浏览器列表中指定的页面，该方法接受一个参数。参数可正可负。
3.4.location对象
属性描述
hash表示URL地址中的锚点部分，包括前导符“#”。可读可写
host表示URL中的主机名和端口，即IP地址或者域名端口，可读可写
hostname表示URL中的主机名部分。可读可写
href表示当前页面完整的URL地址，可读可写。
pathname表示URL中的页面路径部分，包含页面文件名称，可读可写
port表示URL地址中的端口部分，可读可写
protocol表示URL中的协议部分，包括尾部的“：”符号，可读可写。如http:
search表示URL中的参数部分，可读可写。如：?name=mary
3.5.navigator对象
userAgent返回由客户机发送服务器的 user-agent 头部的值。 (用户代理)
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值。
		<script type="text/javascript">
            console.log(navigator.cookieEnabled);//true
            console.log(navigator.userAgent);//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36
        </script>
CODE IN JULY
关注
专栏目录
JavaScript高级程序设计 第12章---BOM浏览器对象模型
weixin_40794404的博客
08-26 998
第12章 BOM 本章内容： 理解BOM的核心——window 对象 控制窗口及弹窗 通过location 对象获取页面信息 使用navigator 对象了解浏览器 通过history 对象操作浏览器历史 BOM是使用JavaScript 开发Web 应用程序的核心，提供了与网页无关的浏览器功能对象。
JavaScript(5)-内置对象
zy_lalala的博客
09-04 362
一、JavaScript 对象分类 对象只是一种特殊的数据。对象拥有属性和方法。 JavaScript 中的所有事物都是对象：字符串、数值、数组、函数… JavaScript 中的对象分类： 自定义对象 内置对象 DOM对象 BOM对象 二、自定义对象 JavaScript 自身提供的对象，不能满足我们所有需求，当我们需要一种对象，可是javascript没有提供的时候，我们就需要自己动手定义我们需要的对象，自己创建的对象就是自定义对象。 自定义对象有2种创建方式： 1. 使用 字面量{} 创建对象 使
javaScript之内置对象与BOM(游览器对象模型)
qq_1243443888的博客
06-24 173
面向对象 ​ 在java中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。 类的定义和使用 定义格式 class 类名{ //构造方法 constructor(变量1,变量2...){ 变量赋值 } //定义方法 方法名(参数列表) { 方法体; return 返回值; } } 注意：javaScript中在创建类的时候不需要提前指定属性。 使用格式 /
用this来完成对对象内部成员的调用
aog84220的博客
07-22 268
<?php class Person { // 下面是人的成员属性 var $name; //人的名子 var $sex; //人的性别 var $age; //人的年龄 // 下面是人的成员方法 function say() { // 这个人可以说话的方法 ...
JavaScript BOM 概述与内置对象
shenzhongkang的博客
05-29 712
一、BOM概述BOM（Browser Object Model）即浏览器对象模型，是一套用来管理控制浏览器的规则。（1）BOM和DOM很像，都是一套管理抽象对象的规则。（2）BOM主要负责页面与页面之间的通讯。（3）BOM的核心对象是window对象，通常情况下说BOM一般都是说的window对象。（4）BOM因为是对浏览器进行管理的规则，因此并没有统一的标准。二、BOM与DOM的关系DOM通过d...
TypeScript基础篇 --- 内置对象
qq_41914181的博客
10-14 511
内置对象 JavaScript中有很多内置对象，他们可以直接在 TypeScript中当做定义好了的类型。 内置对象是指根据标准在全局作用域(Global)上存在的对象。这里的标准是指ECMAScript和其他环节(比如DOM)的标准。 ECMAScript的内置对象 ECMAScript标准提供的内置对象有： Boolean、Error、Date、RegExp等。 我们可以是 TypeScript中将变量定义为这些类型： let b:Boolean = new Boolean(1); le
JAVA对象及属性的内存堆栈管理（通过小程序简单说明）
weixin_34130389的博客
10-29 95
JAVA在执行过程中会划分4个内存区域(heap、stack、data segment、code segment)代码区（codesegment）:java开始执行会把代码加载到code segment区域然后找到main方法开始执行静态区（datasegment）: 是存放静态变量字符串常量堆区（heapsegment）: 一般由程序员分配释放，存放由new创建的对象和数组，jvm不定时查看...
JavaScript 浏览器对象模型BOM使用介绍
12-01
JavaScript 浏览器对象模型（BOM）是Web开发中不可或缺的一部分，它允许开发者与用户的浏览器进行交互，访问和操作浏览器的各种特性。由于BOM没有统一的规范，不同浏览器提供商可能会有不同的实现，但一些核心的对象...
wangmuzhi#Web#24-BOM的常见内置方法和内置对象1
07-25
1、打开窗口： 3、新窗口相关： 1、历史记录管理 2、后退： 3、前进：
HTML-JavaScript操作BOM对象
南劲竹的博客
09-15 723
  BOM模型 BOM：浏览器对象模型（Browser Object Model） BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构 BOM可实现功能              1.弹出新的浏览器窗口              2.移动、关闭浏览器窗口以及调整窗口的大小              3.页面的前进、后退 window对象 1.常用的属性 语法：...
JS 9大内置对象和BOM/DOM外置对象总结
鸟人的博客
10-07 658
在js里，一切皆为或者皆可以被用作对象。可通过new一个对象或者直接以字面量形式创建变量（如var i=“aaa”)，所有变量都有对象的性质。注意：通过字面量创建的对象在调用属性和方法时会被对象包装器暂时包装成一个对象，具有对象的性质。如 var str="我不是一个真的对象"; alert(str.length); //str被暂时包装成一个String对象，可调用该对象的属性和方法 不过这并不意味着它就是一个对象了，typeof(i)的值为仍String。 而通过new的对象，如
JavaScript中的BOM对象
webbc的博客
08-15 516
百度百科 BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 我的理解 博主是这么理解的，BOM对象指的是window对象，而window对象并不是JavaSc
关于类与对象调用和内部类小记
weixin_44313035的博客
07-09 176
一.对象内存图之间关系 1一个对象调用一个方法 通过上图，我们可以理解，在栈内存中运⾏的⽅法，遵循"先进后出，后进先出"的原则。变 量p指向堆内存中的空间，寻找⽅法信息，去执⾏该⽅法。 但是，这⾥依然有问题存在。创建多个对象时，如果每个对象内部都保存⼀份⽅法信息，这 就⾮常浪费内存了，因为所有对象的⽅法信息都是⼀样的。 2两个对象，调⽤同⼀⽅法内存图 对象调⽤⽅法时，根据对象中⽅法标记（地址值），去类中寻找⽅法信息。这样哪怕是多个 对象，⽅法信息只保存⼀份，节约内存空间。 3⼀个引⽤，..
JavaSE学习笔记1：一段小代码理清对象和引用
weixin_42582081的博客
11-20 93
围绕这段代码 public class ObjectTest { public void changeName(Person person,Person person2) { person.name = &amp;quot;xiaohong&amp;quot;; person2.name = &amp;quot;xiaogang&amp;quot;; } public static void main(String[] args) {
Spring AOP无法拦截对象的内部方法调用问题
luojinbai的专栏
01-19 4274
参考： http://fyting.iteye.com/blog/109236
初学者如何开发出一个高质量的J2EE系统
一杯咖啡
07-10 1727
J2EE学习者越来越多，J2EE本身技术不断在发展，涌现出各种概念，本文章试图从一种容易理解的角度对这些概念向初学者进行解释，以便掌握学习J2EE学习方向。　　首先我们需要知道Java和J2EE是两个不同概念，Java不只是指一种语言，已经代表与微软不同的另外一个巨大阵营，所以Java有时是指一种软件系统的流派，当然目前主要是.NET和Java两大主流体系。　　J2EE可以说指Java在数据库信息
java 引用是在栈还是堆_Java引用传递和JVM堆栈的关系说明
weixin_39584549的博客
02-25 658
通过代码说明 Java 引用传递在堆栈上的关系。可以从JVM的内存空间存放上说明，值传递 和引用传递。堆(线程共享)：对象、对象的全局变量、数组栈(线程私有)：声明为局部变量的 基本数据类型、对象引用(是引用，不是对象本身)、方法参数public class JavaParam {public Bean bean1 = new Bean("1");public Bean bean2 = new B...
类和对象的内存图解（堆，栈，方法区）
li237的博客
07-18 492
https://pan.baidu.com/s/1rYmzQ0wNfxv_LY7hKM3PbQ，提取码6666
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值