JavaScript系列 |
您所在的位置：网站首页 › window对象的作用 › JavaScript系列 |
JavaScript系列
| 前言
前端开发过程中，经常用到window、this，还有Window，这三个老是搞不清楚，这里作一下记录（菜鸡的挣扎~）。参考文章 JavaScript之this和window 和结合 JavaScript 参考手册 window 对象 window 对象所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。 另外，（HTML DOM 的）document 对象也是 window 对象属性。平常用到的 history 也是 window 的子对象 值得注意的是：要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 window.alert()。 另外无论是在全局作用域还是在函数作用域，直接a = 999不会报错Uncaught ReferenceError: a is not defined，原因是其实a = 999本质上是window.a = 999，所以是在给window对象添加属性，不会报错 因为浏览器会认为当前标签页的操作就是在引用当前标签页，就是在给这个标签页的 window 对象访问属性（window.document）/ 增加属性（window.a = 999），所以可以缩写成给 window 对象访问属性（document）/ 增加属性（a = 999） window 甚至包含自己（window.window），我们平时用的 window 就是这个 windoe.localstorage document 页面每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问 History 对象包含用户(在浏览器窗口中)访问过的 URL。 history.back()：加载历史列表中的前一个 URL（如果存在）。 history.forward()：加载历史列表中的下一个 URL。 history.go(0)：可以刷新当前网页Location 对象包含有关当前 URL(统一资源定位符) 的信息。（Uniform Resource Location），可通过 window.location 属性来访问。常见的一个操作是： location.href 返回完整的 URL。 location.assgin() 使窗口载入并显示指定URL中的文档，保留浏览历史；Screen 对象包含有关客户端显示屏幕的信息。 screen.height 返回显示屏幕的高度。 width 返回显示器屏幕的宽度。 screen.availHeight 显示屏幕的可用高度 (除 Windows 任务栏之外)。 screen.availWidth 显示屏幕的可用宽度 (除 Windows 任务栏之外)以上只列举了其中一些属性/方法，详细见 JavaScript 参考手册 window 和 Window 的区别对window、Window二者一直搞不清楚，在网上搜了一下，大概有点思路： 我们先在控制台输出这两者： 可以看到： Window 是一个函数，我理解其为一个浏览器自带的构造函数 window 是一个对象，是构造函数 Window 创建出来的一个实例对象验证一下： 其余的 history 和 History、document 和 Document、location 和 Location 等等也都是这样的关系，即后者是前者对应的构造函数，前者是后者构造出来的实例对象。前者的属性/方法来源于后者的prototype对象里面。 this 关键字 函数数执行时，this总是指向调用该函数的对象（即：判断this所在的函数属于谁） function fun(){ console.log(this.n); } var obj = {}; obj.n = "在这里"; obj.m = fun; obj.m(); //执行结果为：在这里 函数没有所属对象时，就指向全局对象（window） var n = "指我"; function fun(){ console.log(this); } console.log(window.n);//指我 console.log(this.n); //指我 fun();//执行结果：
其中函数里面的this就指向对象 例子： var x = 11; function fn(){ console.log(this.x) } var obj = {fn:fn,x:"22"} var obj2 = {x:"33"} obj.fn.apply(); // 11 ,apply()参数为空时，默认调用的是全局对象，this当前指全局对象 obj.fn.apply(obj); // 22 obj.fn.apply(obj2); // 33 function fun(){ console.log(this); } fun(); // window{...} var obj={a: "haha"}; fun.bind(obj); obj.fun=fun; obj.fun(); // obj {a: "haha", fun: ƒ}这里只是简单的说一下this指向，更多详细内容可以参考 JavaScript系列 -- 普通函数、箭头函数、构造函数的区别及其对应 this 指向 另外补充我的一些理解： this就像一根指针，从调用函数那一刻起就决定了要指谁，跟当前处于哪个执行上下文环境无关。而 window 是 JavaScript 自带的 Window 构造函数创建出来的实例对象，包含了我们开放过程中需要用到关于浏览器的很多属性/方法 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |