高程读后感（四）— 关于BOM本人容易忽略的知识点总结

目录

• window对象
  • window对象上属性及方法
  • 超时调用setTimeout和间歇调用setInterval
• BOM
  • location对象及其位置操作
  • history对象

window对象

window对象上属性及方法

1. 全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。

原因：使用var声明的变量有一个[[Configurable]]的特性，值为false,因此不可以通过delete操作符删除。

var age = 18;
window.color = "red";

// 在IE < 9时抛出错误，在其他所有测览器中都返回 false
delete window.age;  // false
// 在IE < 9时抛出错误，在其他所有测览器中都返回 true
delete window.color; // true
console.log(window.age); // 18
console.log(window.color); // undefined

1. 访问未声明的变量会抛错，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

// oldValue未定义会抛错
var newValue = oldvalue
// 属性查询  不会抛错
var newValue = window.oldValue  // newValue 的值是undefined

1. alert 方法要接收字符串格式的数据为参数，引用类型会默认调用toString()方法，toLocaleString，toString，valueOf

   • 数组类型默认都会以逗号分隔，而valueOf方法在console.log时，稍微有点不同。打印的是该引用的类型的值，并非字符串，
   • 对象类型alert则返回[object Object]，console.log打印对应的对象的值

2. 窗口关系及框架：如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在这个集合中，可以通过数值索引(从0开始，从左至右，从上到下)或者框架名称来访问相应的window对象。

window.frames[0];
window.frames["FrameName"];
top.frames[0];
top.frames["FrameName"]
frames[0];
frames["FrameName"];

超时调用setTimeout和间歇调用setInterval

JavaScrip是单线程语言。但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

setTimeout()方法：在指定的时间过后执行代码。接受两个参数：要执行的代码和以毫秒表示的时间。

• 第一个参数可以是一个包含JavaScript代码的字符串，也可以是一代函数。虽然这两种调用方式都没有问题，但由于传递字符串可能导致性能损失。因此不建议以字符串作为第一个参数。
• 第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。 JavaScript是一个单线程的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。
• 第二个参数就是告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行;如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。
• 调用setTimeout之后，该方法会返回一个数值ID，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用 clearTimeout()方法并将相应的超时调用作为参数传递给它。
• 只要是在第二个参数指定的时间尚未过去之前调用clearTimeout()，就可以完全取消超时调用。
• 在使用超时调用时，没有必要跟踪超时调用，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。
• 超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向 window对象，在严格模式下是undefined。

==setInterval()方法：每隔指定的时间就执行一次代码，直至间歇调用被取消或者页面被卸载。接受的参数与setTimeout()相同。

• 调用setInterval之后，同样会返回一个间歇调用ID，可用于在将来某个时刻取消问歌询用。要取消尚未执行的间歌调用计划，可以调用 clearInterval()方法并将相应的间歌调用作为参数传递给它。
• 取消间歌调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。
• 一般认为、使用超时调用来模拟间歇调用的是一种最住模式，在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而使用超时调用，则完全可以避免因此最好不要使用间歌调用。

BOM

location对象及其位置操作

1. 是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。同事将URL解析为独立的片段。它既是window对象的属性也是 document对象的属性，window.location == document.location，引用的是同一个对象。

2. 使用location对象可以通过很多方式来改变浏览器的位置。

// assign()：传递一个URL,立即打开新URL并在浏览器的历史记录中生成一条记录
location.assign("http://www.baidu.com")

// 也会以该值调用assign()方法。与显式调用assign()方法的效果完全一样。
window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";   // 最常用

// 修改location对象的其他属性 改变当前加载的页面
// hash、search、hostname、pathname、port 设置为新值来改变URL

location.search = '#section1'; 

// 每次修改1ocation的属性(hash除外)，页面都会以新URL重新加载。
location.search = '?id=1';
location.hostname = 'www.baidu.com';
location.pathname = 'game';
location.port = '8080';

1. 通过上述任何一种方式修改URL后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。

2. 要禁用这种行为，可以使用replace()方法。只接受一个参数，即要导航到的URL;结果就是虽然会导致浏览器位置改变，但不会在历史记录中生成新记灵。用户不能回到前一个页面。

3. 与位置有关的最后一个方法是reload()，作用是重新加载当前显示的页面。如果调用时不传递参数，页面就会以最有效的方式重新加载（如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载）。如果要强制从服务器重新加载，则需要为该方法传递参数true。

// 重新加载(有可能从缓存中加载)
location.reload();

// 重新加载(从服务器重新加载)
location.reload(true);

位于reload()调用之后的代码会不会执行，这要取决于网络延迟或系统资源等因素，为此最好将reload()放在代码的最后一行。

history对象

该对象保存着用户上网的历史记录，每个浏览器窗口、每个标签页、每个框架，都有自己的history对象与特定的 window对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的URL。不过，借由用户访过的页面列表，可以在不知实际URL的情况下实现后退和前进。

• go()方法可以在用户的历史记录中任意跳转。接受一个参数表示前进后退的页面数的一个整数值。负数表示“后退”，正数表示“前进” 。

• 也可以传递一个字符串参数。浏览器会跳转到历史记录中包含字符串的第一个位置--可能后退，可能前进，具体要看哪个位置最近。若历史记录中不包含该字符串，那么这个方法什么也不做 。

• 可以使用两个简写方法back()和forward()来代替go()。可模仿浏览器的“后退”和“前进”按钮。

• history对象还有一个length属性，保存着所有历史记录的数量。

// 一个整数值
history.go(-1);  // 后退一页
history.go(1);   // 前进一页

// 一个字符串参数
history.go("baidu.com");  // 跳转到最近的baidu.com页面

history.back();    // 后退一页
history.forward(); // 前进一页

if(history.length === 0){
   	// 用户打开窗口后的第一个页面
   }