今天遇到两道JavaScript试题,都是与作用域有关,鄙人不才,两题皆负。
第一道大概是这样:
var Pet=function(){
this.msg="Please show me delicious food...";
this.shout=function(){
console.log(this.msg);
}
this.waitAndShout=function(){
//隔一段时间调用一次shout方法。
}
}
以下是我给出的‘答案’(错误的,也是最上不了台面的)。
var Pet=function(){
this.msg="Please show me delicious food...";
this.shout=function(){
console.log(this.msg);
}
this.waitAndShout=function(){
var owner=this;
setInterval(function(){
this.shout();
},5000);
}
}
new Pet().waitAndShout();
经测试发现setInterval方法下的function作用域指向发生了变化。于是改成一下代码(仍然是错误的)。
var Pet=function(){
this.msg="Please show me delicious food...";
this.shout=function(){
console.log(this.msg);
}
this.waitAndShout=function(){
var owner=this;
setInterval(function(){
owner.shout();
},5000);
}
}
new Dog().waitAndShout();
测试发现依旧存在问题:this.shout()方法中的this指针发生了变化,最终改成以下代码,终于运行正常。
var Pet=function(){
this.msg="Please show me delicious food...";
this.shout=function(){
console.log(this.msg);
}
this.waitAndShout=function(){
var owner=this;
setInterval(function(){
owner.shout.call(owner);
},5000);
}
}
new Pet().waitAndShout();
第二道题就比较诡异了
题目是写出输出结果:
var status="outer";
function showStatus(){
var outerStatus=status;
var status="inner";
var innerStatus=status;
alert('outerStatus: '+outerStatus);
alert('innerStatus: '+innerStatus);
}
showStatus();
本以为第一个会输出outer,但是结果却是undefined。于是猜测JavaScript的变量声明都会被提前,并写下两个代码片段做验证:
片段1:
var status="outer";
function showStatus(){
var outerStatus=status;
var status="inner";
var innerStatus=status;
function status(){
}
alert('outerStatus: '+outerStatus);
alert('innerStatus: '+innerStatus);
}
showStatus();
分解代码:
var outerStatus;
var status;
var innerStatus;
function status(){
}
outerStatus=status; //is a function
status="inner";
innerStatus=status; //innerStatus=="inner"
alert('outerStatus: '+outerStatus); //outerStatus: function(){}
alert('innerStatus: '+innerStatus); //innerStatus: inner
片段2:
var status="outer";
function showStatus(){
var outerStatus=status;
var status="inner";
var innerStatus=status;
var status=function(){
}
alert(outerStatus);
alert(innerStatus);
alert(status)
}
showStatus();
分解代码:
var outerStatus;
var status;
var innerStatus;
var status;
outerStatus=status; //undefined
status="inner";
innerStatus=status; //innerStatus=="inner"
status=function(){}
alert('outerStatus: '+outerStatus); //undefined
alert('innerStatus: '+innerStatus); //innerStatus: inner
alert('status: '+status); //status: function(){}
分享到:
相关推荐
这700道JavaScript习题及面试题集合涵盖了JavaScript的基础语法、高级特性、DOM操作、BOM处理、Ajax、事件处理、函数、对象、闭包、原型链等多个方面,旨在帮助开发者深入理解和掌握JavaScript的精髓。 1. **基础...
JavaScript面试题及答案-共60道.docx JavaScript面试题及答案-共60道.docx JavaScript面试题及答案-共60道.docx JavaScript面试题及答案-共60道.docx JavaScript面试题及答案-共60道.docx JavaScript面试题及答案-共...
这154页的文档包含了14万字的详尽内容和400多道面试题,旨在帮助开发者全面掌握JavaScript的基础与进阶知识,提升自己的技能水平。这份资料由CSDN博主海拥原创,具有很高的学习价值。 JavaScript的基础部分包括但不...
JavaScript 基础知识点总结 本文档总结了 JavaScript 的基础知识点,涵盖 JavaScript 的组成、基本数据类型、内置对象、编写规范、性能优化、浏览器渲染过程、DOM 树和渲染树的区别、重绘和回流的区别和关系等方面...
javascript JavaScript面试题及答案-共50道.docx
javascript JavaScript面试题及答案-共80道.docx
JavaScript是前端开发中不可或缺的一部分,本资料包含了700道JavaScript相关的练习题和面试题,涵盖了从基础到高级的各种主题,特别关注了原生JavaScript、ES6新特性以及JavaScript的异步处理。其中,Vue组件通信和...
java面试题
在本文档中,我们将探讨43道JavaScript面试题的答案和解释。这些问题涵盖了JavaScript的各种方面,包括变量提升、作用域、事件执行机制、函数声明、对象和原型链等。 1. 变量提升 在第一个问题中,我们看到一个...
JavaScript 前端工程师面试题和训练题 本文档包含了 JavaScript 训练题以及各大公司的面试题, 附答案。涵盖了 JavaScript 的多方面知识点,包括 ES6 新特性、数组操作、DOM 操作等。 ES6 新特性 在 JavaScript ...
以下是对这些面试题的详细解释: 1. **JavaScript的基本数据类型**:JavaScript有七种基本数据类型,包括Undefined、Null、Boolean、Number、String、Symbol(ES6新增)和BigInt(ES2020新增)。其中,Undefined...
JavaScript 60道面试题和答案.docx
JavaScript 50道面试题和答案.docx
JavaScript 60道面试题及答案.docx