总结一些常见web前端面试题_web前端常考面试题

作者：酷酷是懒虫 | 2024-08-06 10:31:54

踩

web前端常考面试题

以下内容都是自己总结的，如果有不对的地方，可以留言指出，大家一起讨论嘛

1.js中apply和call的作用和区别是什么？

①主要作用其实就是改变了函数运行时的上下文，简单来讲就是改变所调用函数this的指向，第一个参数是什么对象，此时this就指向这个对象。当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。
②二者区别仅仅是第二个参数不同，call需要按照顺序一个一个写入，而apply是数组形式，也可以通过 arguments 这个数组来便利所有的参数

2.js中作用于链的理解？

①所谓函数作用域就是说：-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。每个Javascript执行环境都有一个与它关联在一起的作用域链。”这是犀牛书上的表述，把它翻译成大白话就是：作用域的优先级顺序

简单来说：根据函数执行的当前上下文进行查找变量，如果在当前函数中找到，则使用它，找不到向父级函数一层层的去查找，直到找到为止，如 child->parent->windows 当前执行的函数总在链的头部

②改变作用域链可以使用with语句，但一般情况下尽量不去使用它

引用一段摘过来的内容，感觉比较适合理解

在js中对象的外在表现形式为函数。

第一步. 定义后：每个已定义函数，都有一个内在属性[scope]，其对应一个对象的列表，列表中的对象仅能内部访问。
例如：建立一个全局函数A，那么A的[Scope]内部属性中只包含一个全局对象(Global Object)，而如果我们在A中创建一个新的函数B，那么B的[Scope]属性中就包含两个对象，函数A的Activation Object对象在前面，全局对象(Global Object)排在后面。
简而言之，一个函数的[Scope]属性中对象列表的顺序是上一层函数的Activation Object对象，然后是上上层的，一直到最外层的全局对象。

第二步.执行时：当一个函数被执行的时候，会自动创建一个可以执行的对象(Execution Object)，并同时绑定一个作用域链(Scope Chain)。作用域链会通过下面两个步骤来建立，用于进行标识符解析。
首先，将函数对象[Scope]内部属性中的对象，按顺序复制到作用域链Scope Chain中。
其次，在函数执行时，会创建一个新的Activation Object对象，这个对象中包含了this、参数(arguments)、局部变量(包括命名的参数)的定义，这个Activation Object对象会被置于作用域链的最前面。
所以在Scope Chain中最后顺序是本函数的Activation Object，然后是上层函数的Activation Object，再上上层的Activation Object，一直到Global Object。
当执行js代码的过程中，遇到一个标识符，就会根据标识符的名称，在执行上下文(Execution Context)的作用域链中进行搜索。从作用域链的第一个对象（该函数的Activation Object对象）开始，如果没有找到，就搜索作用域链中的下一个对象，如此往复，直到找到了标识符的定义。如果在搜索完作用域中的最后一个对象，也就是全局对象(Global Object)以后也没有找到，则会抛出一个错误，提示undefined。

3.什么是闭包？闭包的作用是什么？

我的理解是，闭包就是能够读取其他函数内部变量的函数。

①闭包是很多语言都具备的特性,在js中,闭包主要涉及到js的几个其他的特性:作用域链,垃圾(内存)回收机制,函数嵌套,等等.

从定义上来看，所有的函数都可以是闭包

②函数的嵌套，函数A return 函数B 赋值给C使用

③可以在外部使用一个函数的局部变量就可以使用闭包

用途：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

4.原型的理解？

javascript中的每个类都有prototype对象，新构建的对象都可以使用其prototype中的属性和方法，每一个对象中都包含了__proto__属性，这个属性指向了

自身构造函数中的prototype，所以当我们在调用对象中的方法时，首先在对象本身进行查找，如果没有，就在它的prototype查找

简单说：

prototype就是“一个给类的对象添加属性和方法的方法”，使用prototype属性，可以给类动态地添加方法，以便在JavaScript中实现“ 继承”的效果。

另外还有一点，如果是类中直接添加的一个对象属性，那么在它的所有实例中都是区分开的存储在不同的内存中，但如果是prototype中的对象属性话，他们是共用

一片内存的，一个实例中修改了它，在另外一个实例也能看到修改的


function test(){
  this.show=function(){
    console.log('test');
  }
}
 
test.prototype.a={x:1};
var t1=new test();
t1.a.x='t1';
console.log(t1.a);
var t2=new test();
console.log(t2.a);

5.js继承的几种方式？

js原型（prototype）实现继承
构造函数实现继承 A a=new B()
call , apply实现继承

6.ajax如何实现？

7.jsonp的作用？

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

最简单的实现：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head>  
    <title>Test Jsonp</title>  
    <script type="text/javascript">  
            function jsonpCallback(result)  
            {  
            alert(result.msg);  
            }  
        </script>  
    <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>  
</head>  
<body>  
</body>  
</html>

8.dom事件模型的描述？(捕获过程和冒泡过程 )

9.如何判断js中的数据类型?

一般可以通过 typeof，instanceof，prototype等进行判断

①对于大类型如 string number object function等可以使用typeof进行直接判断

②区别更加明确的对象类型可以使用instanceof

③比较通用的方式可以使用Object.prototype.toString.call(o)

例子如下：

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};

最常见的判断方法：typeof
alert(typeof a) ------------> string
alert(typeof b) ------------> number
alert(typeof c) ------------> object
alert(typeof d) ------------> object
alert(typeof e) ------------> function
alert(typeof f) ------------> function
其中typeof返回的类型都是字符串形式，需注意

判断已知对象类型的方法： instanceof
alert(c instanceof Array) ---------------> true
alert(d instanceof Date) ---------------> true
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

通用的方法： prototype
alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;
大小写不能写错，比较麻烦，但胜在通用。

1：谈谈最近使用的js mvc框架

介绍所知道的CSS hack技巧

你实现一个圆角矩形在IE6实现不了你怎么办？

优雅降级？

H5中的新API了解哪些

简单的正则表达式写几个 URL验证

贪婪匹配与懒惰匹配

Js正则一定要看看

1. Javascript引擎基础GC方案是（simple GC）：mark and sweep（标记清除），即：
（1）遍历所有可访问的对象。
（2）回收已不可访问的对象。
2. GC的缺陷
和其他语言一样，javascript的GC策略也无法避免一个问题：GC时，停止响应其他操作，这是为了安全
考虑。而Javascript的GC在100ms甚至以上，对一般的应用还好，但对于JS游戏，动画对连贯性要求比较高的
应用，就麻烦了。这就是新引擎需要优化的点：避免GC造成的长时间停止响应。
3. GC优化策略

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/937025