中级web前端面试题1
1.改变this所指的方法:
也可说成改变函数内部运行时的上下文;
1 2 3 4 | 1)有对象就指向调用对象; 2)没对象就指向全局对象; 3)用 new 构造就指向新对象; 4)通过apply、call或bind改变 this 所指。 |
(1)bind()只是“引用”,而不是“调用”
1 2 3 4 5 6 7 8 | var aHello = { name : "hello" , showName : function(){ alert( this .name); } } document.onclick = aHello.showName.bind(aHello); //只有在点击的时候才执行,换成call会立即执行 |
(2)一段代码看懂call()
1 2 3 4 5 6 7 | var func= new function(){ this .a= "func" } var myfunc=function(x){ var a= "myfunc" ; alert( this .a); alert(x); } myfunc.call(func, "var" ); //弹出func和var |
call()和apply()的区别
都表示调用某个对象的方法,以另一个对象(即括号中的第一个参数所指)替换当前对象。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function Animal(name, age) { this .name = name; this .age = age; this .showName = function() { console.log( this .name+ ' age is ' +age); }; } function Cat(name, age) { Animal.call( this , name, age); } Cat.prototype = new Animal(); function Dog(name, age) { Animal.apply( this , [name, age]); } Dog.prototype = new Animal(); var cat = new Cat( "Black Cat" ,12); //call必须是object var dog = new Dog([ "Black Dog" ], [13]); //apply必须是array cat.showName(); //Black Cat age is 12<br> dog.showName(); //Black Dog age is 13 |
apply的优势是可以直接将当前函数的arguments对象作为apply的第二个参数传进去。
1 2 3 4 5 6 7 8 | function print(a,b,c,d){ alert(a+b+c+d); } function example(a,b,c,d){ print.call( this ,a,b,c,d); print.apply( this ,arguments); //或者写成print.apply(this,[a,b,c,d]); } example( "背" , "光" , "脚" , "本" ); |
2.闭包
1 2 3 4 5 6 7 8 9 10 | function parent() { var name = "Mozilla" ; function child() { alert(name); } return child; } var myFunc = parent(); myFunc(); |
3.setTimeout()和setInterval()
1 for (var i = 0; i < 5; i++) { 2 setTimeout(function () { 3 console.log(i); 4 }, 5); 5 } 6 //也可将var变成let,可以达到下面效果 7 //5个5 8 for (var i = 0; i < 5; i++){ 9 (function(i){ 10 setTimeout(function (){ 11 console.log(i); 12 },5) 13 })(i) 14 } 15 //0 1 2 3 4
关于定时器要记住的最重要的事情是,指定的时间间隔表示何时将定时器的代码添加到队列,而不是何时实际执行代码。
使用setInterval()时,仅当没有定时器的任何代码实例时,才将定时器添加到队列中。存在问题:(1)某些间隔被跳过;(2)多个定时器的代码执行之间的间隔可能比预期小;
解决方案,用setTimeout(),执行完后在创建一个。
例子:
前提:onclick事件里设定一个200’的重复定时器,onclick事件处理时间为300‘多一点,定时器代码处理时间同样为300’多一点;
(1)0’onclick事件开始执行;
(2)5‘时创建了第一个定时器;
(3)过了305‘才会处理第一个定时器,400’时添加第二个定时器代码到队列;
(4)605‘时,第一定时器在运行,第二个在队列,此时的第三个定时器会被跳过;
(5)同时导致600‘多时第一个定时器刚执行完,就执行第二个。
4.逗号语句,当有多个条件,之间用逗号隔开的时候,会返回最右侧的条件
for(i=0, j=0; i<10, j<6; i++, j++){ k = i + j; }//5+5,返回10
5.易误解日期函数
1 2 3 4 5 6 7 8 9 10 11 12 13 | var d = new Date(); //假如今天实际日期是2016/07/18,周一 d.getYear(); //116 d.getMonth(); //6 d.getDate(); //18 d.getFullYear(); //2016 d.getDay(); //1 d.getTime(); //1470209474290 new Date(); //可以接受传入参数 无参:返回当前时间 1个参数x:返回 1970 年 1 月 1 日 + x 毫秒时间。 new Date(1,1,1) :返回1901 年 2月 1日,第一个参数小于等于99时,显示1900 + (第一个参数),大于99时直接显示。 new Date(2017,1,1) :表示2017年1月1日 |
6.form中的input可以设置为readonly和disable,2者区别?
(1)readonly只针对input和textarea有效,disabled对所有表单元素;
(2)post或者get方式提交时,readonly会将值传出去,disabled不会。
7.js中的3种弹出式消息提醒(警告窗口,确认窗口,信息输入窗口)的命令式什么?
1 2 3 | alert("警告"); // 显示“确定”,返回undefined confirm("确定要清空数据吗?"); //显示“取消”和“确定”,返回false或者true prompt('请输入数字',''); //显示输入框和空白输如框,有“取消”和“确定”按钮,返回null或者输入的内容 |
8.javaScript的2种变量范围有什么不同?
全局变量:当前页面有效
局部变量:方法内有效
9.列举javaScript的3种主要数据类型,2种复合数据类型和2种特殊数据类型。
主要数据类型:string,number,boolean
复合数据类型:function,object
特殊数据类型:null,undefined
基本数据类型:string,number,boolean,null,undefined
10.innerHTML,innerText,outerHTML,innerText的区别?
1 <div id="box">我们都是<a href="www.china.cn">中国</a>人</div> var box = document.getElementById('box'); 2 获取: 3 box.innerHTML //我们都是<a href="www.china.cn">中国</a>人 4 box.outerHTML //<div id="box">我们都是<a href="www.china.cn">中国</a>人</div> 5 box.innerText //我们都是中国人 6 box.outerText //我们都是中国人 7 8 设置: 9 innerText //设置标签内文本 10 outerText //设置包含标签的文本
11.flex布局,可替代float、position,参见http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
12.程序中捕获异常的方法
try{
..可能错误的语句..}
catch(error){
..错误发生后的处理..}
finally{
..完成后执行的语句块..} //finally不是必须的
error对象的属性:
name: 错误名
number: 错误号
description: 描述
message: 错误信息,多同description
13.浏览器对象模型:
window对象,全局变量是window对象的属性,全局函数是window对象的方法。
1 var w=window.innerWidth 2 || document.documentElement.clientWidth 3 || document.body.clientWidth; 4 5 var h=window.innerHeight 6 || document.documentElement.clientHeight 7 || document.body.clientHeight; 8 //||后面是兼容ie5、6、7、8
window.open();打开当前窗口
window.close();关闭当前窗口
window.moveTo();移动当前窗口
window.resizeTo();调整当前窗口的尺寸
14.XMLHttpRequest对象用于在后台交换数据。
15.超链接的属性target的可选值:
_self:默认,载入在相同的窗口或者框架(指iframe)
_blank:新窗口
_parent:父窗口或父框架
_top:清除所有被包含的框架,载入当前的整个浏览器窗口
frameName:指定某个框架载入
16.如何阻止冒泡和默认事件
一般在冒泡阶段处理事件
function stopBubble(e){ if(e&e.stopPropagation){ //非IE e.stopPropagation(); }else{ //IE window.event.cancelBubble = true; } }
function stopDefault(e){ if(e&e.preventDefault){ //非IE e.preventDefault(); }else{ //IE window.event.returnValue = false; } return false; }
17.事件委托是什么
原理:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处:1.提升性能;2.新添加的元素还会之前的事件。 <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb</li> <li>cccccccc</li> </ul>
window.onload = function(){ var oUl = document.getElementById("ul");/* 这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。 ie:window.event.srcElement 标准下:event.target nodeName:找到元素的标签名 */ oUl.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == "li"){ target.style.background = "red"; } } }
18.ajax请求get和post区别
1.get请求(send(null))参数会在URL里显示出来,而post不会(send(data)); 2.get请求会缓存,而post不会; 3.当我们在get和post请求时,同时在url中、send方法的data中都放置了参数,为什么获取的总是url中的参数值呢? 答:在使用Request时,其会从QueryString,Form,ServerVariable中遍历一番,如果发现符合要求的数据,那么就会停止向后搜寻.所以,我们上例中获取的username实际上都是url中的username值. 4.场景: get请求的目的是给予服务器一些参数,只是获取或查询数据,以便从服务器获得列表,例如:list.aspx?page=1,表示获取第一页的数据 post请求的目的是向服务器发送一些参数,可以向服务器放送修改请求,例如form中的内容.
19.ajax请求时,如何解释json数据
1.JSON.parse():将json字符串转为json对象
语法JSON.parse(text,reviver); //reviver可选,表示一个处理转换结果的函数,将对每个成员调用此函数 var json = '{"name":"GDT","age":28,"University":"GDUT"}'; var info = JSON.parse(json,function(key,value){ console.log(key + ":" + value); });
输出: name:GDT VM56:3 age:28 VM56:3 University:GDUT VM56:3 :[object Object]
2.JSON.stringify():转换为json字符串
var info = {name:"GDT",age:60,University:"GDUT"}; var json = JSON.stringify(info); 输出json: "{"name":"GDT","age":60,"University":"GDUT"}"
3.JSON.eval():函数可计算某个字符串,并执行其中的JavaScript 代码。
使用eval()函数也可以将JSON字符串解析为对象,这个功能能完成JSON.parse()的功能,但是有不一样的地方 var json = '{"name":"GDT","age":,"University":"GDUT"}'; var info = eval('(' + json + ')');
原因:归结于eval本身的问题,由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
缺点:
eval()可以解析任何字符串,eval是不安全的,因为eval比较宽松,会有潜在的安全性问题。如下代码
var str = '{"a": (function(){alert("I can do something bad!");})()}'; eval('('+str+')'); //用来执行木马脚本 结果: 会弹出,同时返回Object {a: undefined}
推荐使用JSON.parse();
19.数组中slice()和splice()的区别(本博客)
20.substr和substring的用法和区别(本博客)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· DeepSeek处理自有业务的案例:让AI给你写一份小众编辑器(EverEdit)的语法着色文件