JS的面试题（一）

最新推荐文章于 2024-04-03 02:13:17 发布

世间万物皆对象

最新推荐文章于 2024-04-03 02:13:17 发布

阅读量361

点赞数

分类专栏： JS 文章标签： js javascript css jquery

本文链接：https://blog.csdn.net/ZTAHNG/article/details/115760280

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前端的面试题

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 ($ (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.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 =$ (“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标签，将内容直接显示在浏览器上

世间万物皆对象

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS的面试题（一）

前端的面试题1.构造函数的返回值是什么？new生成的实例2.构造函数中如果存在return，那么new构造函数会发生什么？return基本数据类型时无效， return引用类型，返回值是return的内容3.构造函数中的this指什么？new生成的实例4.如何检测一个属性是否为对象的自身属性对象.hasOwnProperty（“属性”）5.构造函数和原型和实例的关系new构造函数生成实例实例的__proto__指向构造函数的原型原型上的constructor属性是构造函数6.new
复制链接

扫一扫