前端面试:基础javascript篇(二)

11. js的new操作符做了哪些事情

new 操作符新建了一个空对象,这个对象原型指向构造函数的prototype,执行构造函数后返回这个对象。

 

12.

改变函数内部this指针的指向函数(bind,apply,call的区别)

通过apply和call改变函数的this指向,他们两个函数的第一个参数都是一样的表示要改变指向的那个对象,第二个参数,apply是数组,而call则是arg1,arg2...这种形式。

通过bind改变this作用域会返回一个新的函数,这个函数不会马上执行。

 

13.js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?

clientHeight:表示的是可视区域的高度,不包含border和滚动条

offsetHeight:表示可视区域的高度,包含了border和滚动条

scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分。

clientTop:表示边框border的厚度,在未指定的情况下一般为0

scrollTop:滚动后被隐藏的高度,获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

 

14. . js拖拽功能的实现

首先是三个事件,分别是mousedown,mousemove,mouseup

当鼠标点击按下的时候,需要一个tag标识此时已经按下,可以执行mousemove里面的具体方法。

clientX,clientY标识的是鼠标的坐标,分别标识横坐标和纵坐标,并且我们用offsetX和offsetY来表示元素的元素的初始坐标,移动的举例应该是:

鼠标移动时候的坐标-鼠标按下去时候的坐标。

也就是说定位信息为:

鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的offetLeft.

还有一点也是原理性的东西,也就是拖拽的同时是绝对定位,我们改变的是绝对定位条件下的left

以及top等等值。

补充:也可以通过html5的拖放(Drag 和 drop)来实现

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>拖拽实现-</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

html,body{

overflow: hidden;

height: 100%;

}

#warp{

width: 150px;

height: 150px;

background-color: red;

position: absolute;

top: 0;

left: 0;

}

</style>

</head>

<body>

<div id="warp">

</div>

</body>

<script type="text/javascript">

window.onload = function(){

/*

* 拖拽:1:在点击的时候获取元素的起始位置,鼠标的位置

*     2:在移动的时候计算鼠标移动的距离

*     3:设置元素的偏移量

*/

var warp = document.querySelector("#warp");

var startPoint = {x:0,y:0};

var oldPoint = {x:0,y:0};

warp.onmousedown = function(ev){

ev = ev||event;

if(this.setCapture)

{

this.setCapture();//事件的全局捕获  兼容IE8,阻止IE8的默认行为

}

startPoint.x = this.offsetLeft;

startPoint.y = this.offsetTop;

oldPoint.x = ev.clientX;

oldPoint.y = ev.clientY;

document.onmousemove = function(ev){

ev = ev||event;

newPoint = {x:0,y:0};

newPoint.x = ev.clientX;

newPoint.y = ev.clientY;

var dis = {x:0,y:0};

dis.x = newPoint.x - oldPoint.x ;

dis.y = newPoint.y - oldPoint.y ;

//边界判断

var L= startPoint.x +dis.x;

var T= startPoint.y +dis.y;

if(L<0)

{

L = 0;//左边的标签

}

if(T<0)

{

T = 0;//左边的标签

}

if(T >= document.documentElement.clientHeight - warp.offsetHeight)

{

T = document.documentElement.clientHeight - warp.offsetHeight ;

}

if(L >= document.documentElement.clientWidth - warp.offsetWidth)

{

L = document.documentElement.clientWidth - warp.offsetWidth ;

}

//偏移

warp.style.left = L +"px";

warp.style.top =  T +"px";

}

document.onmouseup = function(){

document.onmouseup = document.onmousemove = null;

if(document.releaseCapture){

document.releaseCapture();

}

}

return false ; //阻止默认行为

}

}

</script>

</html>

15. 异步加载js的方法

defer:只支持IE如果您的脚本不会改变文档的内容,可将 defer 属性加入到<script>标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。

 

async,HTML5属性仅适用于外部脚本,并且如果在IE中,同时存在defer和async,那么defer的优先级比较高,脚本将在页面完成时执行。

创建script标签,插入到DOM

 

16. Ajax 解决浏览器缓存问题

在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")

在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")

在URL后面加上一个随机数: "fresh=" + Math.random()

在URL后面加上时间搓:"nowtime=" + new Date().getTime()

如果是使用jQuery,直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

 

17.js的节流和防抖

防抖动:防抖技术即是可以把多个顺序地调用合并成一次,也就是在一定时间内,规定事件被触发的次数。

节流函数:只允许一个函数在 X 毫秒内执行一次,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用。

rAF:16.7ms 触发一次 handler,降低了可控性,但是提升了性能和精确度。

 

18. JS中的垃圾回收机制

必要性:由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。

 

这段话解释了为什么需要系统需要垃圾回收,JS不像C/C++,他有自己的一套垃圾回收机制(Garbage Collection)。JavaScript的解释器可以检测到何时程序不再使用一个对象了,当他确定了一个对象是无用的时候,他就知道不再需要这个对象,可以把它所占用的内存释放掉了。例如:

 

var a="hello world";

var b="world";

var a=b;

//这时,会释放掉"hello world",释放内存以便再引用

垃圾回收的方法:标记清除、计数引用。

 

标记清除

这是最常见的垃圾回收方式,当变量进入环境时,就标记这个变量为”进入环境“,从逻辑上讲,永远不能释放进入环境的变量所占的内存,永远不能释放进入环境变量所占用的内存,只要执行流程进入相应的环境,就可能用到他们。当离开环境时,就标记为离开环境。

 

垃圾回收器在运行的时候会给存储在内存中的变量都加上标记(所有都加),然后去掉环境变量中的变量,以及被环境变量中的变量所引用的变量(条件性去除标记),删除所有被标记的变量,删除的变量无法在环境变量中被访问所以会被删除,最后垃圾回收器,完成了内存的清除工作,并回收他们所占用的内存。

 

引用计数法

另一种不太常见的方法就是引用计数法,引用计数法的意思就是每个值没引用的次数,当声明了一个变量,并用一个引用类型的值赋值给改变量,则这个值的引用次数为1,;相反的,如果包含了对这个值引用的变量又取得了另外一个值,则原先的引用值引用次数就减1,当这个值的引用次数为0的时候,说明没有办法再访问这个值了,因此就把所占的内存给回收进来,这样垃圾收集器再次运行的时候,就会释放引用次数为0的这些值。

 

用引用计数法会存在内存泄露,下面来看原因:

 

function problem() {

    var objA = new Object();

    var objB = new Object();

    objA.someOtherObject = objB;

    objB.anotherObject = objA;

}

在这个例子里面,objA和objB通过各自的属性相互引用,这样的话,两个对象的引用次数都为2,在采用引用计数的策略中,由于函数执行之后,这两个对象都离开了作用域,函数执行完成之后,因为计数不为0,这样的相互引用如果大量存在就会导致内存泄露。

 

特别是在DOM对象中,也容易存在这种问题:

 

var element=document.getElementById(’‘);

var myObj=new Object();

myObj.element=element;

element.someObject=myObj;

这样就不会有垃圾回收的过程。

 

19.eval是做什么的

它的功能是将对应的字符串解析成js并执行,应该避免使用js,因为非常消耗性能(2次,一次解析成js,一次执行)

 

20.如何理解前端模块化

前端模块化就是复杂的文件编程一个一个独立的模块,比如js文件等等,分成独立的模块有利于重用(复用性)和维护(版本迭代),这样会引来模块之间相互依赖的问题,所以有了commonJS规范,AMD,CMD规范等等,以及用于js打包(编译等处理)的工具webpack

原文地址:https://www.cnblogs.com/love-life-insist/p/10258969.html

时间: 2024-10-05 23:48:33

前端面试:基础javascript篇(二)的相关文章

前端面试基础-html篇之H5新特性

h5的新特性(目前个人所了解)如下 语义化标签 表单新特性 视频(video)和音频(audio) canvas画布 svg绘图 地理定位 为鼠标提供的拖放API webworker (重点)Storage (重点)Websocket HTML语义化是什么? 语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析. 为什么要语义化? 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各

Java面试基础 -- Git篇

1.Git和SVN有什么区别? Git SVN Git是一个分布式的版本控制工具 SVN 是集中版本控制工具 它属于第3代版本控制工具 它属于第2代版本控制工具 客户端可以在其本地系统上克隆整个存储库 版本历史记录存储在服务器端存储库中 即使离线也可以提交 只允许在线提交 push/pull 操作更快 Push/pull 操作较慢 工程可以用 commit 自动共享 没有任何东西自动共享 2.什么是Git? Git 是分布式版本控制系统,可以跟踪文件的更改,并允许你恢复到任何特定版本的更改,优点

每日刷题191130 --基础知识篇 二叉搜索树

休息了两天,状态恢复了一下,补充点基础知识. 二叉搜索树 搜索树数据结构支持许多动态集合操作,包括Search,minimum,maximum,predecessor(前驱),successor(后继),INSERT和DELETE等.因此我们使用一颗搜索树既可以作为一个字典又可以作为一个优先队列.且二叉搜索树上的基本操作所花费的时间与这棵树的高度成正比.二叉搜索树有两个很重要的变体,红黑树与B树,这个我们之后有机会再补一篇文章. 顾名思义,一棵二叉搜索树是以一棵二叉树来组织的.如图所示,这样的一

前端面试之ES6篇(高产似母猪)

这也是前端面试经常询问的问题,经常问你es6出现了哪些新的特性,平时又使用过那些.在编写此教程的时候,第一句话往往就是面试常常问到的地方,然后后面就是他的详细解释,面试要求的内容我会用*标记出来.写技术文档是真的累啊,虽然是看别人的文档,但是你得看很多,而且还得自己总结啊.所以说要是觉得对你有用还是帮我点个star吧https://github.com/skychenbo 1.箭头函数需要注意的地方 2.ES6 let.const 3.set数据结构 4.promise对象的用法,手写一个pro

前端面试:基础javascript篇(一)

(1)get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的. 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少.对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度.为了明确这个概念,我们必须再次强调下面几点: HTTP 协议未规定 GET 和POST的长度限制 GET的最大长度显示是因为浏览器和 web服务器限制了 URI的长度 不同的浏览器和WEB服务器,限制的最大长度不一样 要支

前端面试系列--前言篇

这个系列的文章将记录我准备春招的整个过程,我会将自己学习到的新知识记录在这个系列里 文章目录 前言说明 准备方向 目标 前言说明 ??作为半个科班出身学数学的应届生,在学习计算机的时候还是比较吃力的,从今年3月份开始接触前端,到现在也有8个月左右了.也许是初生牛犊不怕虎,我在5月份就各种投简历找实习,当时我甚至连前端是什么都不知道,只学过html和css,还只是通过看<Head First Html与Css>来了解关于写页面的知识的,这本书是2013年出版的,距离现在已经有5年的时间了,现在看

前端面试集锦——CSS篇

三.CSS篇 3.1.谈谈你对CSS布局的理解 3.2.请列举几种可以清除浮动的方法(至少两种) 浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动.正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷). a. 添加额外标签,例如<div ></div> b. 使用br标签和其自身的html属性,例如<br clear="all" /> c. 父元素设置 overflow:hidden:在IE6中还需要触发hasLayou

前端总结之JavaScript篇

1.原型 / 构造函数 / 实例 原型( prototype ): ?个简单的对象,?于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个 JavaScript 对象中都包含?个 proto (?标准)的属性指向它爹(该对象的原型),可  obj. proto 进?访问.构造函数: 可以通过 new 来 新建?个对象 的函数. 实例: 通过构造函数和  new 创建出来的对象,便是实例. 实例通过   proto 指向原 型,通过 constructo

前端面试之Javascript

1,JS基本的数据类型和引用类型: (1)基本数据类型:number,string,null,undefined,symbol--栈: (2)引用数据类型:object,array,function--堆: 两种数据类型存储位置不同: 1),原始数据类型是直接存储在栈中的简单数据段,占据空间小,大小固定,属于被频繁使用数据. 2),引用数据类型存储在堆中的对象,占据空间大,大小不固定,如果存储在栈中,将会影响程序运行的性能. 3),引用数据类型在栈中存储了指针,该指针指向堆中该实体的起止地址.