前端的面试题
1.构造函数的返回值是什么?
new生成的实例
2.构造函数中如果存在return,那么new构造函数会发生什么?
return基本数据类型时无效, return引用类型,返回值是return的内容
3.构造函数中的this指什么?
new生成的实例
4.如何检测一个属性是否为对象的自身属性
对象.hasOwnProperty(“属性”)
5.构造函数和原型和实例的关系
new构造函数生成实例 实例的__proto__指向构造函数的原型
原型上的constructor属性是构造函数
6.new发生了什么?
创建了一个空对象
将函数中的this指向这个对象
空对象的__proto__指向函数的prototype
返回这个对象
7.对象访问属性的过程
先访问自身,如果没有则通过__proto__指向,向上一级对象中查找,存在则获取,不存在则继续向上查找,最终到Ojbect.prototype,不存在则为undefined
8.解释一下原型链
从自身开始,沿着__proto__指向,一直到Object.prototype,这样一条链式结构,终点是null
9.解释一下闭包
function abc(){ var n = 0; return function(){ console.log(n++); } } var x = abc(); x()
内存函数应用了外层函数的变量或参数,当内层函数在外层函数的外部调用时,就产生了闭包
10.用闭包可以解决什么问题
循环绑定事件中获取索引
无需全局变量实现变量值递增
11.argums是什么?用在哪里?
实参列表,只能用在函数里
12.callee和caller有什么区别?
callee返回一个正在执行的函数引用
caller返回一个调用该函数的函数引用,window调用该函数,返回null callee和caller都用在函数里 arguments.callee.caller == 正在执行的函数的函数名,,一般用于递归 funciont a(){ console.log(a.caller) } function b(){ a() } b() 函数a在函数b中调用 a() 函数在window中调用
13.Object.keys()能获取什么?
有数组索引组成的数组,或由对象属性组成的数组
14.说一说深拷贝的理解?
将值是基础类型的属性直接拷贝,将值是数组或者对象的属性进行重新遍历。直到不存在相同引用为止
15.如何进行对象合并?
Object.assign(obj1,obj2)
16.Object.assign的理解?
Object.assign(obj1,obj2) 将后面的对象像前面合并,相同的属性会被覆盖,返回值是第一个参数
17.对Object.create(obj)的理解?
Person.prototype=Object.create(Person.prototype) 返回一个对象的__proto__指向,指向参数 var xy=Object.create({a:1,b:2,c:3})
18.如何检测一个对象是否为构造函数的实例?
对象 instanceof 构造函数 返回值为true或false function A(){ } var a = new A() //instanceof A.protptype是否在a的原型链上 真实作用:检测构造函数额原型是否在对象的原型链上
19.如何判断一个对象是否为另一个对象的原型?
对象.isPrototypeOf(对象) 返回true或者false 真实作用:a是否在b的原型链上
20.如何设置一个对象的__proto__指向
var a = {x:1,y:2} var b = {z:3} Object.setPrototypeOf(a,b) //a的__proto__指向b
21.封装一个dom元素方法,实现ele.width(200),结果为ele宽为200px;
HtmlElement.prototype.width=function(w){ this.style.width=w+“px” }
22.封装一个数组方法,[1,2,3,4,5].shuffle()实现对数组进行随机排序
Array.prototype.shuffle=function(){ return this.sort(function(){ return 0.5-Math.random(); }) } 此方法更改原数组
23.检测str是否为字符串
String.isString=function(s){ return typeof s===“string” }
24.检测Object是否为对象
Object.isObject=function§{ return Object.prototype.toString.call(o)==="[object Object]" }
25.document.getElementsByTagName(“div”).toArray();将所有div列表转成数组
HTMlElement.prototype.toArray=function(){ return [].slice,call(this); }
26.Call,apple,bind的区别?
call第二个参数之后传序列,立即执行
apple第二个参数是数组,立即执行
bind第二个参数之后是传序列,不立即执行
27 jQuery中,dom加载完之后执行,如何实现?与window.onload的区别是什么?
$(function(){})
window.onload是在页面所有的元素都加载完成后才触发
$(function(){})是在页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成
28常用dom操作的实现:
在指定元素后面添加元素(外部)after()
在指定元素前面添加元素(外部)before()
在指定元素内部追加元素(内部)append()
将新元素添加到指定元素的首部(内部)prependTo ()
29jquery中each的用法?
$(dom).each(function(index,item){})
. e a c h ( .each( .each((dom).function(index,item){})
30eq、find、siblings分别代表什么意思?怎么用?
eq()等于 括号里写索引
find()查找子元素 括号里写选择器
siblings()兄弟 可以写选择器可以不写
31、如何匹配表格中的第四行以及第四行以后的行?
$(“tr.gt(2)”)
32、$(“p”).not(".num")是什么意思?还能怎么实现?
匹配class类名不是num的p
$(“p:not(.num)”)
33、next()是什么意思?括号里的参数指什么
下一个元素 选择器
34、$(“div”).has(".ips")匹配的内容是什么?
后代元素中有class ips的div
35、$(“div”).hasClass(".ips")是什么意思?
找div是否有class ips
36、jQuery有哪些动画,分别设置的是什么?
show hide 宽 高 透明度
fadeIn fadeOut 透明度
slideDown slideUp 高度
animate 除了颜色都可以设置
37、将#abc后面的所有p标签隐藏
$("#abc").nextAll(“p”).hide()
38、清空所有em标签里的内容
$(“em”).empty
39、jquery事件中的click和on(“click”)有哪些区别
on支持事件委托 支持多个事件
click 不支持事件委托 只能绑定一个事件
40、如何自定义事件?如何执行自定义事件
on trigger(事件名)
41、jquery事件中如何阻止事件冒泡,如何阻止默认行为
e.stopPropagation() e.preventDefault()
43、jquery中获取当前窗口宽度?
$(window).width
44、width,innerWidth,outerWidth有哪些区别?
width()方法用于获得元素宽度;
innerWidth()方法用于获得包括内边距(padding和边框(border)的元素宽度,
outerWidth()方法用于获得包括内边距(padding)和边框(border)的元素宽度,
如果outerWidth()方法的参数为true则外边距(margin)也会被包括进来,即获得包括外边距(margin)、内边距(padding)和边框(border)的元素宽度。
45、列举jquery的ajax请求,并说明作用
$(“div”).load() 加载文档
$.get() 获取数据
$.post()传递数据
$.getScript() 加载js文件
$.getJSON() 加载json数据
$.ajax() 全能 除了ajax,还包含jsonp
46、什么情况下会产生跨域?如何解决跨域?jquery解决跨域的方案?
域名协议端口不一样会产生跨域
jsonp cors 可以解决
$.ajax({dataType:“jsonp”,url:"",})//解决方案
47、$(“div”).get(0)还可以表示成?
与$(“div”).eq(0)有什么区别?
$(“div”)[0]
一个是dom元素一个是jquery元素
48、将当前点击元素的文字大小设置为20px,兄弟元素文字大小设置为16px,父元素增加class abc,将父元素的兄弟元素删除class abc ,父元素的兄弟元素中第一个子元素文字设置为红色,最后一个子元素文字设置为蓝色,父元素的下一个元素逐渐消失之后,在父元素后面增加一个class为newDom的div
$(this).click(function(){
$(this).css({fontSize:"20px"}).siblings().css({fontSize:"16px"}).end().parent().addClass("abc").siblings().removeClass("abc").children().first().css("color","red").end().last().css("color","blue").end().end().end().next().fadeOut(200,function(){
$(this).after("<div class='newDom'></div>")
})
})
49、jQuery链式调用的原理?
方法执行完毕之后返回jquery对象
50、ajax实现的步骤?
1.创建一个xhr对象 var xhr=new XMLHttpRequest();
2.创建xhr对象状态的监听函数 xhr.onreadystatechange=function
3.与服务器建立连接 xhr.open("get","url",true)
4.向服务器发送数据 xhr.send(null)
5.对xhr的请求状态做处理 xhr.onreadystate
51、ajax的状态值0-4分别是什么?
0.建立xhr对象,未调用open
1.建立了链接未发送数据,未调用send
2.发送数据,但数据未解析
3.服务器开始解析数据
4.数据解析完成,前端可以获取解析之后的数据
52、ajax的状态码200、304、404分别代表什么?
200:新请求成功
304:通过get请求但服务器文件没有变化,去本地缓存取数据
404:请求地址错误
28、jsonp的原理?
动态生成script标签,src设置成请求地址,通过callback参数向后台传递数据,callback的值就是window下的一个函数,后台获取到callback的值,会生成这个值的函数调用
53、如何解决项目中已经存在的js类库中 与 j Q u e r y 中 与jQuery中 与jQuery中的冲突?
jQuery.noConflict()
jQuery 使用 noConflict 方法来放弃 $ 调用时的命名,之后由 jQuery 代替 $ 进行编写
54、如何用jQuery获取元素在文档中的位置?
$(“dom”).offset().top无定位的位置
$(“dom”).position().top有定位的位置
55、瀑布流的实现原理
先将图片绝对定位,通过计算出一排能够容纳几列元素,然后寻找各列之中所有元素高度之和的最小者,并将新的元素添加到该列上,然后继续寻找所有列的各元素高度之和的最小者,继续添加至该列上,如此循环下去,直至所有元素均能够按要求排列为止
56、如何实现选项卡?(口述)
点击标签给当前标签设置样式,其他标签删除样式,与点击标签的索引对应的内容显示,其他内容隐藏
57、jQuery获取索引的两种方式?
index= ( t h i s ) . i n d e x ( ) 所 有 同 辈 元 素 中 的 索 引 i n d e x = (this).index() 所有同辈元素中的索引 index= (this).index()所有同辈元素中的索引index=(“li:even”).index($(this)) 在匹配选择器的元素中的索引
58、如何将对象转成json字符串?如何将json字符串转成json对象
JSON.stringify(jsonObj) JSON.parse( jsonStr )
59、$.extend的作用是什么?
合并jquery中的对象
var obj=$.extend(deep,{},obj1,obj2) deep是true时,是深拷贝
60、jQuery中的end()有什么作用?举个实际应用案例
返回上一个元素对象
Hello,how are you?
$("p").find("span").end();
61、innerHTML,innerText区别
1、获取:innerHTML取到所有html标签,innerText不获取html标签
2、设置:innerHTML设置的内容解析html标签,innerText不解析html标签,将内容直接显示在浏览器上