javascript window.name是什么?

本文详细解析了JavaScript中全局变量的创建方式及其作用域,指出`this`总是指向当前调用者,并纠正了创建全局变量的常见误解。通过三个代码示例,解释了如何在函数内外正确使用`this`和变量名,以及它们如何影响作用域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在写js 全局变量作用域的时候,碰到了一个纳闷的问题

首先根据定义:全局变量有两种方式创建:

1 方法外部声明的变量,2 方法内部没有使用var关键字声明的变量

  第一次代码

 

function Person(str){
  this.name=str;
}
			
var p1=new Person('z3');
console.log(p1.name);  //结果 z3  
console.log(name);  //结果 z3

 

 

一开始对于这两个结果,我认为是理所当然的;

第一个结果 p1.name 返回z3。首先函数内的this代表着指向当前调用者。通过Person对象创建了一个p1实例。再调用p1.name,此时的this指向就是这个对象实例。

第二个结果 name 返回 z3。 当时没有深究,认为this.name执行完之后创建的是一个全局变量(这里一下错了两个地方,后续说明)。

所以当时得出的总结是 1, this总是指向当前调用者,2,使用this.field可以创建全局变量。

 

在上面的代码再添加行代码

第二次代码

function Person(str){
  this.name=str;
  this.age=25;
}
			
var p1=new Person('z3');
console.log(p1.name);  //结果 z3  
console.log(name);  //结果 z3

console.log(p1.age); //结果25
console.log(age);  // age is not defined

   对这个结果一开始很不可思议,怎么name没问题,age 就变成了没有定义。

   想了一会想不通之后, 打开firebug, 运行之后查看window这个对象有没有age这个变量(如果有就是全局变量)。一看果然没有



 

 只有一个Person对象及这个对象的实例 p1。 那这个name是怎么回事? 继续看了下window相关的属性,居然看到了这么个东东

 居然还有window.name这个属性,而且值默认是空字符""; 也就是说下面这样的代码完全可以执行,没有undefined, 也没有 xx is not defined

<script type=text/javascript>

     alert(name);

</script>

 

把上面代码再做一个修改

第三次代码

function Person(str){
  this.name=str;
  age=25;
}
			
var p1=new Person('z3');
console.log(p1.name);  //结果 z3  
console.log(name);  //结果 z3

console.log(p1.age); //结果  undefined
console.log(age);  // 25

   

   这一下就了然了,首先this只是代表指向当前调用者,this.field 不会创建全局变量。

 

   第二个打印结果是正确的 是因为 name这个全局变量不是通过this.name创建的 而是window自带了一个name这个属性,并且默认值为""。通过this.name赋值,只是把window.name的默认值覆盖了。

  

  第三个打印结果为undefined 原因很简单,age=25  是全局变量要调用只能是window.age或age。通过p1.age,只能是声明了一个变量但是未赋值,所以打印出来就是undefined



 

 目前只是知道window对象中有name这个属性,而且它的作用很广,其中有个重要的作用是可以解决js中同源策略的问题。

 

 

### Vue 页面刷新后 `window.name` 值的变化分析 在 Vue 项目中,当页面发生刷新时,`window.name` 的值不会自动重置为初始状态。这是因为 `window.name` 是一个全局属性,它的值会在同源环境下保持不变,即使页面被刷新也不会丢失[^1]。 #### 测试与验证 为了进一步说明这一现象,可以在 Vue 组件的生命周期钩子函数中打印 `window.name` 的值来进行测试: ```javascript export default { mounted() { console.log('当前 window.name:', window.name); if (!window.name || window.name !== 'isRefresh') { console.log('这是页面首次加载'); window.name = 'isRefresh'; // 设置标志位表示已加载过一次 } else { console.log('这是页面刷新后的加载'); } } }; ``` 通过上述代码可以看出,在页面初次加载时设置了一个特定字符串给 `window.name` 属性;而在随后的每次刷新过程中,只要未手动更改这个值或者清除浏览器缓存/切换不同域名环境的话,那么读取到的结果始终是一致的[^2]。 因此可以得出结论:**在同一个源(origin)之内,并且没有特别处理的情况下,Vue 页面刷新之后 `window.name` 不会发生变化**。 --- ### 实际应用场景注意事项 尽管如此,在实际开发当中还需要注意一些特殊情况可能会引起异常表现: - **跨域请求**: 如果涉及到多个不同的服务器地址之间相互跳转,则每个新的站点都会拥有独立的一套 global state 包括但不限于 document.cookie 和 window.name 等。 - **强制清空缓存(F5 vs Ctrl+F5)**: 当用户按下组合键强行忽略本地缓存重新获取资源文件时候也可能影响某些预设好的默认参数恢复成空白状态。 - **第三方插件或框架的影响**: 某些安全防护措施较高的前端库也许会对这些隐藏字段加以限制甚至完全屏蔽掉它们的功能以防止潜在风险比如XSS攻击等问题的发生[^4]。 综上所述,在正常情况下 Vue 页面刷新并不会改变 `window.name` 的值,但在复杂的应用场景下需谨慎对待可能出现的各种例外情形。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值