JavaScript中window对象常用的属性、方法

发布网友 发布时间：2022-04-20 02:58

我来回答

共3个回答

懂视网 时间：2022-04-18 05:32

JavaScript 中的对象概念的确很容易让人困惑。看下面一个例子：

var strPrimitive = "I'm mamacat";
typeof strPrimitive; // "string"
strPrimitive instanceof String; // false

var strObject = new String("I'm mamacat");
typeof strObject; // "object"
strObject instanceof String; // true

strPrimitive.substr(8, 3); // "cat"

同样的字符串赋值到对象，一会儿是字符串类型一会儿是对象，而明明不是对象类型的变量还是可以使用对象属性，为什么会这样呢？

【相关课程推荐：JavaScript视频教程】

类型和内置对象

JavaScript 中一共有六种主要（语言）类型，即 string, number, boolean, null, undefined 和 object，其中前五个基本类型都不是对象（对 null 进行 typeof 得到的是 "object"，这是语言本身的 BUG）。而在此之外，则有许多特殊的对象子类型，例如数组、函数和内置对象等。

有些内置对象的名字看着和简单基本类型一样，就比如 String，Boolean，Object 之类。这些内置对象从表现形式看就和别的面向对象语言中的“类”概念差不多，而正如上篇文章所属，它们实际使只是一些能被用来构造一个对应子类型的内置函数而已（不要困惑，函数也是对象，这里并不矛盾）。于是就可以回到最初的例子，strObject 是由内置函数/内置对象 String 所构造的变量，对应 String 子类型，所以它是一个对象，而 strPrimitive 则是一个原始字面值而已。

当然，上面例子中最下面我们看上去对 strPrimitive 调用了 substr() 函数，这里则是因为，JavaScript 引擎会在需要时，把原始字面量转换成对应的对象，而转换之后我们自然就可以使用属性访问对应的方法了。

对象属性

那么，就上方的例子而言，String 对象实例就会有 substr() 函数可以用，但根据之前的文章可以知道，这些“函数”本身并不属于某个对象，而这些函数实质是对应对象的一个属性。当然，即便我们说某种类型的对象本身具备各种属性，实际上这些属性也多是各自独立存在的，只不过以引用的形式关联在了一起而已，这和之前了解的内容也并不矛盾。这些被关联起来的东西，被称为对象的 属性。

对象的复制

插播一条快报，尽管之前的文章提到过，上方也又一次反复强调过属性只是以引用的形式关联起来的独立存在，我们有时仍然会“理所应当”的认为属性是对象的一部分，而最容易因此踩坑的地方之一就是对象的复制了。仔细思考即可知道，当我们复制对象时，由于其属性本身只是引用关联，故“复制”得到的对象所包含的属性引用指向的和原本对象的属性引用其实还是同一个位置：

var ori = { a : 1};
var ori_copy = ori;
ori.a = 61;
ori_copy.a; // 61

显然这很可能和我们的期望不一样，而我们想要真正的拷贝对象则没有完美适用性的方案，很多时候的常规做法则是把对象序列化一下，然后再以此反序列化得到新的对象来实现对象的拷贝（比如使用 json）。ES6 中新增了 Object.assign() 来进行对象的浅拷贝，做法是把对象的所有可枚举属性等号赋值到新对象中。不过仍需注意的是，等号赋值并不会赋值属性的元信息（属性描述符，后述），在需要的情况下应当特别留意。

属性访问和数组

访问对象所关联的属性的方式即通过 . 或者 [] 操作符进行访问，obj.a 和 obj["a"] 访问的属性实质上是一样的，而这两种访问形式的区别也只有访问的属性名称里能不能有奇怪的符号而已。[] 操作符内扔的是个字符串，实际上属性名也永远都是字符串。当然，这个概念可能比较意外的就是，数组的下标访问其实并不是例外，数字还是被转换成了字符串才被使用的。

// 对象的属性访问：
var tejilang = {1 : "Teji Wolf"};
tejilang instanceof Array; // false
tejilang["1"]; // "Teji Wolf"
tejilang[1]; // "Teji Wolf"

// 这回保证它是 Array
var macat = ["codingcat"];
macat instanceof Array; // true
macat.length; // 1
macat[0]; // "codingcat"
macat["0"]; // "codingcat"
macat.length = 20;
macat; // (20) ["codingcat", empty × 19]

数组下标既然不属例外情况，那数组对象必然有其它属性控制数组本身的行为，例如上例中，macat 数组的长度就是 length 属性所体现的，通过修改它的值也就改变了对象本身对外的表现形式。当然，由于数组本身就是对象，所以我们还是可以把数组当键值对来用，只是这种做法通常是没有意义且会让人感到困惑的。JavaScript 引擎通常都根据对象的类型做了不同程度的优化，故除了代码逻辑可读性外，合理的使用也是多少可以改善性能的。

能够通过字符访问属性还是存在一些别的好处的，比如 ES6 的可计算属性名。当然 ES6 不在本文的关注范围内，所以这里就不再讨论了。

属性描述符

有时我们可能不希望某个属性被随意修改，有时候我们需要额外配置一些属性的信息，自 ES5 起，所有的属性就都具备了“属性描述符”（Property Descriptor）来控制属性本身的这些元信息。

数据描述符

来看这个例子：

var chris = {};
Object.defineProperty(chris, "IQ", {
 value: 228,
 writable: false,
 configurable: true,
 enumerable: true
});
chris.IQ = 61; // 静默失败了，如果是严格模式则会 TypeError
chris.IQ; // 228

通过 defineProperty 可以对一个对象的属性配置其对应的属性描述符（元信息），而属性描述符则包含访问描述符和数据描述符，上面的例子中，defineProperty 的第三个参数就定义了数据的若干数据描述符，其中 writable 表示可写，configurable 表示属性是否可配置（注意，修改成不可配置是单向操作），enumerable 则表示属性是否应当出现在枚举中，比如 for..in 中。

显然我们可以通过属性描述符实现对属性的保护，而同时也存在一些方便函数来做近似的事。如 Object.preventExtensions() 会保留原有属性但禁止添加新属性，Object.seal() 会密封对象，在禁止添加新属性的基础上把原有属性标记为不可配置，Object.freeze() 会冻结对象，即在密封的基础上把数据访问属性标记为不可写。

[[Get]], [[Put]] 和访问描述符

在我们访问和赋值一个对象的属性时，实际上是通过 [[Get]] 和 [[Put]] 操作进行的，例如属性访问时，[[Get]] 会先找有没有这个属性，如果没有则会遍历对象的 [[Prototype]] 链（原型链，这次不谈这个概念）来找，实在找不到则返回 undefined 。而这个行为实际是允许我们通过设置 getter （get()）和 setter （set()）函数来改变的，它们被称为 访问描述符。

当我们提供访问描述符时，对应的访问操作就不再受到 value 和 writable 属性的影响了，另外需要注意的是，尽管它们也是属性描述符，但定义 getter 和 setter 并不要求一定要通过 defineProperty 设置：

var obj = {
 get a() { // 给 a 属性定义 getter
 return this._a_;
 },
 set a(val) { // a 属性的 setter
 this._a_ = val * 2;
 }
}

obj.a = 2;
obj.a; // 4

属性存在性

因为属性的值也可能是 undefined，不存在的属性直接访问得到的也是 undefined，所以直接通过简单的属性访问是无法区分是否存在的，这时我们即可通过 in 或者 hasOwnProperty() 检查属性是否存在对象中了:

var obj = {a : 2};
"a" in obj; // true
obj.hasOwnProperty("a"); // true

尽管仍没有讲到原型链的概念，这里仍然应注意，in 操作符会检查原型链中是否存在属性，而 hasOwnProperty 则不会。另外在一些情况下，有的对象会没有 hasOwnProperty 这个属性（此处不提原因），这时可以用过 Object.prototype.hasOwnProperty.call(objName, propertyName) 来实现检查。

本文来自 js教程 栏目，欢迎学习！

热心网友 时间：2022-04-18 02:40

二、Window对象的属性和方法

Window对象共有七个属性：
● defauleStatus：指定窗口状态栏中的信息。
● status：指定当前窗口状态栏中的信息。
● frames：是一个数组，其中内容是窗口中所有的框架。
● parent：指当前窗口的父窗口。
● self：指当前窗口。
● top：代表当前所有窗口的最顶层窗口。
● window：代表当前窗口。
Window对象有五个方法：
● alert：显示带有一个“确定”按钮的对话框。
● confirm：显示带有“确定”与“取消”两个按钮的对话框。
● prompt：显示带有输入区的对话框。
● open：打开一个新窗口。
● close：关闭用户打开的窗口。
三、status属性例子，在窗口状态栏显示和清除文字

单击"写入文字"按钮，在状态栏显示'这是状态栏'。按"清除文字"按钮，清除状态栏的文字。
<html>
<head>
<script language="JavaScript">
function statbar(txt) {
window.status = txt; }
</script>
</head>
<body>
<form>
<input type="button" name="look" value="写入文字" onclick="statbar('这是状态栏');">
<input type="button" name="erase" value="清除文字" onclick="statbar('');">
</form>
</body>
</html>

四、alert方法例子：显示“大家来学习JavaScript脚本语言。”的对话框。

<html>
<body>
<script language="JavaScript">
alert("大家来学习JavaScript脚本语言。")
</script>
</body>
</html>

五、 Confirm方法例子：让用户选择是否进入下一页。

用confirm显示选择对话框，按“确定”进入next.htm，按“取消”不进入。
<html>
<body>
<script language="JavaScript">
if(confirm("你想进入下一页吗？"))
location="next.htm"
</script>
</body>
</html>

六、Prompt方法例子：让用户输入姓名，并将它显示出来。

用prompt显示输入对话框，让用户输入姓名，再用alert对话框显示出来。
<html>
<body>
<script language="JavaScript">
var name
name=prompt("请输入姓名","张国强")
alert("你好，"+name)
</script>
</body>
</html>

七、Window对象方法例子

当打开网页时，立即打开另一窗口，显示test.htm。
<html>
<body onload="javascript:window.open('test.htm')">
</body>
</html>
八、History对象的属性和方法

History对象只有一个length属性，它表示历史对象中的链接的数目。
History对象有以下方法：
● back：在浏览器中显示上一页。
● forward：在浏览器中显示上下页。
● go(int)：在浏览器中载入从当前算起的第int个页面。
九、History例子：具有“上一页”、“下一页”按钮的页面。

<html>
<body>
<form>
<input type="button" value="上一页" onClick="history.back()">
<input type="button" value="下一页" onClick="history.forward()">
</body>
</html>

热心网友 时间：2022-04-18 03:58

javascript中window对象的集合属性和方法
Window对象的集合
frames[] 取得Window对象中所有已命名的frame

Window对象的属性
closed 窗口是否关闭
defaultStatus 窗口状态栏的默认文本
document Document对象
history History对象
length Window对象的frame个数
location Location对象
name Window对象的名称
opener 打开当前Window的窗口的引用
parent 父窗口
self 返回当前窗口的引用
status 窗口状态栏文本
top 最顶层窗口

Window对象的方法
alert([Message]) 显示带有警告信息Message的窗口，并有“确定”按钮
blur() 移除本窗口的焦点
clearInterval(iIntervalID) 取消先前用setInterval方法开始的标识为iIntervalID的间隔事件
clearTimeout(iTimeoutID) 取消先前用setTimeout方法开始的标识为iTimeoutID的超时事件
close() 关闭当前窗口
confirm([message]) 显示带有确认信息message的窗口，有“确定”和“取消”按钮
createPopup() 创建弹出窗口，返回该窗口对象的引用
focus() 使本窗口获得焦点
moveBy(x,y) 将窗口的位置移动到指定的x和y偏移值
moveTo(x,y) 将窗口左上角的屏幕位置移动到指定的x和y位置
open() 打开新窗口，显示指定的页面
print() 打印与窗口关联的文档
prompt([message][,defaultValue]) 显示提示对话框，带有提示消息message和默认值defaultValue的

输入框，返回用户输入的字符串
resizeBy(x,y) 更改窗口的当前位置缩放指定的x和y偏移量
resizeTo(x,y) 将窗口的大小更改为指定的宽度值x和高度值y
scrollBy(x,y) 将窗口滚动x和y偏移量
scrollTo(x,y) 将窗口滚动到指定的x和y偏移量
setInterval(code,ms[,language]) 每经过ms毫秒后执行代码code,language指定语言属性。返回整形标

识,以便clearInterval方法取消该定时器
setTimeout(code,ms[,language]) 经过ms毫秒后执行代码code,language指定语言属性。返回整形标识
，以便clearTimeout方法取消该定时器