博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
中级web前端面试题1
阅读量:5327 次
发布时间:2019-06-14

本文共 6927 字,大约阅读时间需要 23 分钟。

1.改变this所指的方法:

也可说成改变函数内部运行时的上下文;

1)有对象就指向调用对象;2)没对象就指向全局对象;3)用new构造就指向新对象;4)通过apply、call或bind改变this所指。  

(1)bind()只是“引用”,而不是“调用”

var aHello = {    name : "hello",    showName : function(){        alert(this.name);    }}document.onclick = aHello.showName.bind(aHello); //只有在点击的时候才执行,换成call会立即执行  

(2)一段代码看懂call()

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()的区别

都表示调用某个对象的方法,以另一个对象(即括号中的第一个参数所指)替换当前对象。

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  dog.showName();  //Black Dog age is 13

apply的优势是可以直接将当前函数的arguments对象作为apply的第二个参数传进去。

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.闭包

解释一:当在函数内部定义了其他函数,就创建了闭包。在后台执行环境中,闭包的作用域包含它自己的作用域、包含函数的作用域和全局作用域。
解释二:一个函数的局部变量在函数调用完成后,居然还没有死掉,它以某种形式顽强地活了下来,这种形式就是闭包。 
解释三:闭包就是能够读取其他函数内部变量的函数。由于在js语言中,只有函数内部的子函数才能读取局部变量(即嵌套的函数可以访问到其外层作用域中声明的变量),因此可以把闭包简单的理解成“定义在函数内部的函数”。
解释四:下面例子中myFunc是一个闭包。闭包是一种特殊的对象。有两部分组成:函数、以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
    即myFunc是一个闭包。由child函数和闭包创建时存在"Mozilla"字符串组成。
用处一:可以访问函数内部的变量。
用处二:让变量的值始终保存在内存中。
 
实用性: 
例子:
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.易误解日期函数

var d = new Date(); //假如今天实际日期是2016/07/18,周一d.getYear(); //116d.getMonth(); //6d.getDate();  //18d.getFullYear(); //2016d.getDay(); //1 d.getTime();  //1470209474290new 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种弹出式消息提醒(警告窗口,确认窗口,信息输入窗口)的命令式什么?

alert("警告"); // 显示“确定”,返回undefinedconfirm("确定要清空数据吗?"); //显示“取消”和“确定”,返回false或者trueprompt('请输入数字',''); //显示输入框和空白输如框,有“取消”和“确定”按钮,返回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 
我们都是
中国
var box = document.getElementById('box'); 2 获取: 3 box.innerHTML //我们都是中国人 4 box.outerHTML //
我们都是
中国
5 box.innerText //我们都是中国人 6 box.outerText //我们都是中国人 7 8 设置: 9 innerText //设置标签内文本10 outerText //设置包含标签的文本

11.flex布局,可替代float、position,参见 

12.程序中捕获异常的方法

try{

..可能错误的语句..}
catch(error){
..错误发生后的处理..}
finally{
..完成后执行的语句块..}  //finally不是必须的
  

error对象的属性:

name: 错误名
number: 错误号
description: 描述
message: 错误信息,多同description 

13.浏览器对象模型:

window对象,全局变量是window对象的属性,全局函数是window对象的方法。

1 var w=window.innerWidth2 || document.documentElement.clientWidth 3 || document.body.clientWidth;  4 5 var h=window.innerHeight6 || 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.新添加的元素还会之前的事件。
  • aaaaaaaa
  • bbbbbbbb
  • cccccccc
window.onload = function(){ var oUl = document.getElementById("ul");/*这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。ie:window.event.srcElement标准下:event.targetnodeName:找到元素的标签名*/ 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:GDTVM56:3 age:28VM56:3 University:GDUTVM56: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的用法和区别()

 

 

 

转载于:https://www.cnblogs.com/lixuemin/p/5459543.html

你可能感兴趣的文章
KEGG数据库的使用方法与介绍
查看>>
django处理静态文件
查看>>
云游戏流媒体整体架构设计(云游戏流媒体技术前瞻,最近云游戏概念很火,加之对流媒体技术略有研究,简单写一些)...
查看>>
JQuery里面的下啦菜单
查看>>
图像处理基础(4):高斯滤波器详解
查看>>
Palindromes&nbsp;_easy&nbsp;version
查看>>
Mac上使用brew安装nvm来支持多版本的Nodejs
查看>>
vuejs数据双向绑定原理(get & set)
查看>>
LAMP、LNMP实战之四搭建mysql(持续更新)
查看>>
iOS 开发者必知的 75 个工具(译文)
查看>>
rabbitmq
查看>>
原型学习
查看>>
编程数学-中括号
查看>>
缓存-System.Web.Caching.Cache
查看>>
关于迭代器
查看>>
c++命名空间
查看>>
Excel文件按照指定模板导入数据(用jxl.jar包)
查看>>
Hive基本操作与案例
查看>>
React的使用与JSX的转换
查看>>
HDU 5056 Boring count
查看>>