zoukankan      html  css  js  c++  java
  • 2010年腾讯前端面试题学习(js部分)

    看了牛人写的回忆文章,里面有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.可以通过标签选择,然后循环绑定。参考代码:

     1 <body>
     2 
     3     <div id="imgArea">
     4         <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7fddf12a6509c93d07f209f1a7069fe1/0b46f21fbe096b6340eee5740e338744ebf8ac1b.jpg" name="img1"/> <br/> <br/> <br/> <br/> <br/>
     5         <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7fddf12a6509c93d07f209f1a7069fe1/0b46f21fbe096b6340eee5740e338744ebf8ac1b.jpg" name="img2"/>
     6     </div>
     7 </body>
     8 
     9 <script>
    10     var imgs = document.getElementById("imgArea").getElementsByTagName('img');//选择元素
    11     console.log(imgs.length);
    12     var i = 0;
    13     for(i=0;i<imgs.length;i++){//循环选取,绑定click
    14         imgs[i].onclick = function(){
    15             alert(this.getAttribute("name"));
    16         };
    17     }
    18 </script>
    19 </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-网关错误。

     

    作者:Leven
    本博客主要记录个人工作和学习中的一些总结,经验和感悟。欢迎转载和评论,转载请给出原文链接。
    您也可以通过邮箱联系我:leven_developer#outlook.com
    如果文章对您有所帮助,您可以给我一点打赏,会让我更有动力做所从事的事情,非常感谢。
  • 相关阅读:
    磁盘分区异常占用满了
    平滑升级nginx
    supervisor进程异常挂掉
    datetime值毫秒四舍五入
    docker+tomcat 启动时非常慢原因之JRE /dev/random阻塞
    Tomcat最大连接数问题
    Docker:设置代理proxy
    easy_install和pip安装python库修改默认的源
    zabbix监控mysql之Warning: Using a password on the command line interface can be insecure.
    Mysql忘记密码解决方法
  • 原文地址:https://www.cnblogs.com/Andres/p/8793881.html
Copyright © 2011-2022 走看看