看了牛人写的回忆文章，里面有2010年腾讯的前端面试题，里面涉及到不少基础性的问题，学习一下：）

原文地址：https://segmentfault.com/a/1190000012998107

js部分：

  1. JS是如何实现继承的？
  2. object的prototype是什么？（接上一个问题）
  3. JS如何实现数据以及功能的封装。（即类是如何实现的）
  4. 如果一个标签里面包含了10000个image，如何有效地对这10000个image实现事件绑定，比如说click事件。（考察事件冒泡机制）
  5. 假设现在有对象A、B，A对象绑定了S事件，如何对B对象也绑定S事件？（其实不清楚）
  6. 如何实现跨域请求？你知道的有多少种方法？各有什么优缺点？
  7. 当使用隐藏框架实现跨域请求时，如果框架页跟当前页不属于同个父域，是否可以实现跨域？
  8. 如何实现私有变量？说出一种方法即可。
  9. 函数闭包使用得多吗？什么情况下需要使用函数闭包？
  10. 当某个事件发生时，如果获得事件发生的对象。（ff和ie不同）
  11. 当绑定事件时，this指针指向的是？
  12. 当为document绑定事件时，this指针指向的是？
  13. 发送ajax请求有多少个步骤？如何判定发送成功？（readyState和onreadystatechange）
  14. 表示请求成功返回的状态码是多少？你还知道哪些状态码？分别表示什么意思？

1.JS继承的方法有很多种。参考：http://www.cnblogs.com/humin/p/4556820.html#3948267。比较好的通过call或者apply复制实例属性,再使用自执行匿名函数复制原型属性实现继承。

2.prototype 属性使您有能力向对象添加属性和方法。每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。

3.通过类。类的实现也是通过函数。在函数中可以定义类的成员和方法（实例属性）。也可以在prototype中定义类的属性和方法（原型属性）。实例属性和原型属性的区别是，实例属性的属性和方法的引用地址都是不一致的；而原型属性的属性和方法的引用地址是一致的。

4.可以通过标签选择,然后循环绑定。参考代码：

 <body>

     <div id="imgArea">

         <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7fddf12a6509c93d07f209f1a7069fe1/0b46f21fbe096b6340eee5740e338744ebf8ac1b.jpg" name="img1"/> <br/> <br/> <br/> <br/> <br/>

         <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7fddf12a6509c93d07f209f1a7069fe1/0b46f21fbe096b6340eee5740e338744ebf8ac1b.jpg" name="img2"/>

     </div>

 </body>

 <script>

     var imgs = document.getElementById("imgArea").getElementsByTagName('img');//选择元素

     console.log(imgs.length);

     var i = 0;

     for(i=0;i<imgs.length;i++){//循环选取，绑定click

         imgs[i].onclick = function(){

             alert(this.getAttribute("name"));

         };

     }

 </script>

 </html>

或者采用冒泡机制也可以，对div绑定click事件，然后确定事件发生的对象是否为img(冒泡机制需兼容ie和ff)，再进行处理。参考代码：

<html>

<body>

	<div id="imgArea">

		<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7fddf12a6509c93d07f209f1a7069fe1/0b46f21fbe096b6340eee5740e338744ebf8ac1b.jpg" name="img1"/> <br/> <br/> <br/> <br/> <br/>

		<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7fddf12a6509c93d07f209f1a7069fe1/0b46f21fbe096b6340eee5740e338744ebf8ac1b.jpg" name="img2"/>

	</div>

</body>

</script>

    var imgArea = document.getElementById("imgArea");

	imgArea.onclick = function(e){

		e = event ? event : e;//兼容ie和ff

		elm = e.srcElement;

		if(elm.tagName == "img" || (elm.tagName == "IMG")){

			alert(elm.name);

		}

	}

</script>

</html>

　　

5.这个问题没有理解。比如s是click事件，a绑定了，b就不能绑定？

6.跨域请求。纯js的跨域，我一般使用加载一段script的方法，但实际的这个script的src是一个php文件，这种情况下该php文件是可以跨域的。专业说法是通过jsonp跨域。该方法适用于跨域获取服务器端数据。第二种方法，通过修改document.domain来跨子域。这个方法优点是方便，但缺点也是显而易见的，对于主域不同的情况，无能为力。 第三种方法，通过window.name来获取跨域数据。这个方法需要用到<iframe>并更改它的src来实现，适用于跨域获取页面数据。第四种方法，使用HTML5中新引进的window.postMessage方法来跨域传送数据。这个是html5引进的新方法，在ie8+,ff,chrome下都没有问题，操作很简便。缺点是不兼容ie6，7浏览器。

参考：https://www.cnblogs.com/2050/p/3191744.html

7.可以实现。如上所说，可以通过window.name和window.postMessage来实现。

8.意思是js类中的私有变量吗？直接在函数内定义var a= 1;可以吗？ 或者还可以通过闭包实现。比如如下代码：

function f(){

     var privateAttr =10;

     this.getPrivateAttr(){

     return privateAttr;

     }

}

　外界只能通过  new f().getPrivateAttr()来访问变量。　

9.函数闭包。需要封闭作用域的时候使用闭包。闭包的用途：1.自执行匿名函数；2.实现类；3.封闭作用域，构造私有变量或私有方法；4.缓存数据。参考：https://www.cnblogs.com/laobeiV5/p/5106642.html，http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures。

10.ie和chrome可以直接获取发生事件的对象event,而firefox必须传递参数e。

11.this应该指向绑定事件的对象，而不是发生事件的对象，两者有区别。例如，一个div里面有若干img，对div绑定点击事件，则点击img，则this指向div。

12.指向document，整个html文档dom。

13.ajax请求5个步骤（细节的东西），第6个是额外操作。

    (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

    (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

    (3)设置响应`HTTP`请求状态变化的函数.

    (4)发送`HTTP`请求.

    (5)获取异步调用返回的数据.

    (6)使用JavaScript和DOM实现局部刷新.
    var xmlHttp = new XMLHttpRequest();//第一步，创建XMLHttpRequest()对象

    xmlHttp.open('GET','demo.php','true');//第二步，使用对象的open方法，创建一个htttp请求，并且设置请求方式，请求地址，同步或异步请求。

    xmlHttp.send();//发送请求

    xmlHttp.onreadystatechange = function(){//通过onreadystatechange和readyState判断请求状态

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

			 document.getElementById("mydiv").innerHTML=xmlhttp.responseText;  //接受数据

        }

14.请求成功的状态码　xmlHttp.readyState=4（请求状态码）,xmlHttp.status = 200（响应状态码）。

请求状态码：

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

响应状态码：404-请求的文件或路径不存在；500-服务器内部错误；499-服务器长时间无响应，客户端自动断开；304-服务器资源在上次请求后没有如何修改；403-服务器拒绝请求；502-网关错误。

　

2010年腾讯前端面试题学习（js部分）的更多相关文章

  1. 2010年腾讯前端面试题学习（jquery,html,css部分）

    看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...

  2. 好程序员分享Web前端面试题汇总JS篇之跨域问题

    为什么80%的码农都做不了架构师?>>>   好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...

  3. 各大互联网公司前端面试题（js）

    对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型 ...

  4. 前端面试题整理---JS基础

    为了督促自己学习,整理了一下前端的面试题 JavaScript: JavaScript 中如何监测一个变量是String类型? typeof(obj)==="string"; ty ...

  5. 前端面试题（JS篇）

    原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题, ...

  6. 前端面试题之js篇

    前端面试也可为是鱼龙混杂,各公司面试题的种类也大不相同,有的公司注重基础语法,面试题偏于ES,有的公司偏于页面逻辑,会考差一些js的应用,现将遇到过的题和典型的题整理一下. 1. 0.2-0.1 == ...

  7. 前端面试题：JS中的let和var的区别

    最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别.我简单总结一下,以便各位以后面试中使用. ES6 新增了let命令,用来声明局部 ...

  8. 2019前端面试题之js

    1.js的数据类型 js的数据类型分为基本类型跟引用类型 基本数据类型(5个):undefined,boolean,number,string,null.基本类型的访问是按值访问的,就是说你可以操作保 ...

  9. 最近面试前端岗位，汇总了一下前端面试题（JS+CSS）

    JavaScript 运行机制 1. 单线程(用途决定,需要与用户互动以及操作DOM) 2. 分同步任务(主线程)与异步任务(任务队列),只有任务队列通知主线程某个任务可以执行了,该 任务才会进入主线 ...

随机推荐

  1. HTML 弹出遮罩层一（遮罩层和内容标签嵌套）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Forbidden Subwords

    pro: sol: 建出ac自动机. 一个合法的答案对应一条路径满足从一个scc走到另一个scc的路径. 发现这个题的方案数有可能是无限的. 会在以下两种情况无限: 因此,去掉无限情况后,环只有简单环 ...

  3. CSS之transform-origin属性

    设置旋转元素的基点位置 语法 transform-orign:0 100% 0 transform-origin: x-axis y-axis z-axis; x-axis 定义视图被置于 X 轴的何 ...

  4. bzoj3926: [Zjoi2015]诸神眷顾的幻想乡 后缀自动机在tire树上拓展

    题意:有棵树每个点有个颜色(不超过10种),每个节点不超过20个儿子,问你每两点之间的颜色序列不同的有多少种 题解:先建出树,对于每个叶子节点,bfs一遍建在sam上,每次保留当前点在sam上的位置, ...

  5. HDU - 4456 cdq

    题意:给一个矩阵,两种操作1:修改单点的权值,2:查询和某个点曼哈顿距离小于r点的权值和 题解:先旋转坐标轴,(x,y)->(x-y,x+y)然后就变成了cdq分治裸题,子矩阵和和单点修改一维时 ...

  6. UI基础二：下拉，F4，OP等

    常用的搜索帮助有SE11的SH,域,值列表,组件等...下面介绍一下经常用的: 一:下拉 dropdown是最经常用的,也是最简单的一种. 不管是查询条件,还是结果清单,还是明细界面,下拉都是一样的 ...

  7. vmplayer桥接以及nat配置nginx

    1.环境 centos6.4 vm player nginx1.8 2.虚拟机的防火墙 参考http://blog.csdn.net/qilovehua/article/details/4550713 ...

  8. dubbo初认知（dubbo和springCloud关系，在微服务架构中的作用等）（持续更新中）

    一:dubbo是什么? dobbuo是阿里开源的一个高性能优秀的服务框架, 可通过高性能的 RPC 实现服务的输出和输入功能,使得应用可以和 高性能的rpc实现输入和输出的功能,可以了  Spring ...

  9. eclipse初学者的使用

    eclipse的使用 字体设置:      设置环境字符: 设置背景颜色 寻找窗口: java JDK的配置: 配置自动提示: 适合初学者适应环境开发.

  10. Nop 4.1版本已经迁移到.net core2.1版本

    1. github 下载,4.1版本,运行, install时,会让你新增后台账户密码,sql服务器 2. 在Configuration 新增Language 3. 上传中文语言包 , 你也可以先导出 ...