2021前端面试题-JS篇

Posted 2023-04-27

参考技术A ```

当查找一个对象的某个属性时，会先从它自身的属性上查找，

如果找不到的话会从它的_proto_属性上查找，就是这个构造函数的prototype属性，

如果还没找到就会继续在_proto_上查找，直到最顶层，找不到则为undefined，

像这样一层一层去查找形成一个链式的称为原型链

```

new一个函数，中间发生了什么

1.开辟一个内存空间，也就是创建一个空对象，obj=或obj=new Object()

2.将这个新对象的_proto_属性指向它构造函数的prototype

3.将构造函数this绑定为这个新对象，在空对象上挂在属性和方法(call或apply方式)

4.返回这个新对象

相同：都是改变函数上下文this指向

不同：bind返回的是一个函数，不会立即执行

         传参的不同 apply第二个参数为数组形式

         call apply都是对函数的直接调用

1.作为普通函数直接调用，this指向window

2.作为对象方法去调用的话，this指向调用它的这个对象

3.箭头函数，没有this，this取决于外层离它最近的非箭头函数的this

4.构造函数的this，指向创建这个构造函数的实例对象

1.词法作用域(静态作用域)

  js采用的就是词法作用域

  只有函数可以限定作用域

  函数允许函数访问外层作用域的变量

  函数在定义的时候决定了函数作用域，词法作用域关心函数在何处被定义

2.动态作用域

  函数在调用的时候决定了函数作用域，动态作用域关心函数在何处被调用

变量取值会到创建这个变量的函数作用域中去查找，如果找不到会向上查找，直到查找到全局作用域，这就形成了一个作用域链

1.节流

2.防抖

1.原型链继承

2.构造函数继承

3.组合继承（原型链继承+构造函数继承）

4.原型式继承

5.寄生继承

6.组合寄生继承

定义在一个函数内部的函数，这个内部函数有权访问外部函数作用域的变量

优点：

缺点：

js在运行中的任务，有一套收集，排队，执行的特殊机制，这种机制就是事件循环

遇到同步事件直接执行，遇到异步事件分为宏任务和微任务

如果微任务列表里有任务，先执行微任务再执行宏任务

块级作用域  暂时性死区  能否被修改

没有this  call apply方法修改this无效

没有prototype属性

没有argument

不能使用new  不能用作构造函数，会报错

持续更新中.......

前端开发--面试题整理（JS篇）

1.截取字符串abcdace的ace
alert(‘abcdace‘.substring(4));

2.规避javascript多人开发函数重名问题
命名空间
封闭空间
js模块化mvc（数据层、表现层、控制层）
seajs
变量转换成对象的属性
对象化

3.javascript面向对象中继承实现
function Person(name){
        this.name = name;
}

Person.prototype.showName = function(){
        alert(this.name);
}

function Worker(name, job){
        Person.apply(this,arguments)
        this.job = job;
}
for(var i in Person.prototype){
        Worker.prototype = Person.prototype;
}
new Worker(‘sl‘, ‘coders‘).showName();

4.判断一个字符串中出现次数最多的字符，统计这个次数
var str = ‘asdfssaaasasasasaa‘;
var json = {};

for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
                json[str.charAt(i)] = 1;
        }else{
                json[str.charAt(i)]++;
        }
};
var iMax = 0;
var iIndex = ‘‘;
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}
alert(‘出现次数最多的是:‘+iIndex+‘出现‘+iMax+‘次‘);

5.编写一个方法 求一个字符串的字节长度;
//假设一个中文占两个字节
var str = ‘22两是‘;

alert(getStrlen(str))

function getStrlen(str){
        var json = {len:0};
        var re = /[\u4e00-\u9fa5]/;
        for (var i = 0; i < str.length; i++) {
                if(re.test(str.charAt(i))){
                        json[‘len‘]++;
                }
        };
        return json[‘len‘]+str.length;
}

6.编写一个方法 去掉一个数组的重复元素
var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
        if(!json[arr[i]]){
                json[arr[i]] = true;
        }else{
                json[arr[i]] = false;
        }

        if(json[arr[i]]){
                arr2.push(arr[i]);
        }
};

for (var i = 0; i < arr.length; i++) {
        if(!aa(arr[i], arr2)){
                arr2.push(arr[i])
        }
};
function aa(obj, arr){
        for (var i = 0; i < arr.length; i++) {
                if(arr[i] == obj) return true;
                else return false;
        };
}
alert(arr2)

7.写出3个使用this的典型应用
事件： 如onclick  this->发生事件的对象
构造函数          this->new 出来的object
call/apply        改变this

8.如何深度克隆
var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = ‘sdfsdf‘;

var json2 = clone(json);

alert(json[‘c‘])
function clone(obj){
        var oNew = new obj.constructor(obj.valueOf());
        if(obj.constructor == Object){
                for(var i in obj){
                        oNew[i] = obj[i];
                        if(typeof(oNew[i]) == ‘object‘){
                                clone(oNew[i]);
                        }
                }
        }
        return oNew;
}

9.JavaScript中如何检测一个变量是一个String类型？请写出函数实现
 typeof(obj) == ‘string‘
 obj.constructor == String;

10.网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
var oDate = new Date();
var oYear = oDate.getFullYear();

var oNewDate = new Date();
oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
var iTime = oNewDate.getTime()-oDate.getTime();

var iS = iTime/1000;
var iM = oNewDate.getMonth()-oDate.getMonth();
var iDate =iS

11. 请解释一下什么是语义化的HTML。
内容使用特定标签，通过标签就能大概了解整体页面的布局分布

12. 为什么利用多个域名来存储网站资源会更有效？
确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站

13.请说出三种减低页面加载时间的方法
1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作

14.什么是FOUC？你如何来避免FOUC？
由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
用link加载css文件，放在head标签里面

15.文档类型的作用是什么？你知道多少种文档类型？
影响浏览器对html代码的编译渲染
html2.0
xHtml
html5

16.浏览器标准模式和怪异模式之间的区别是什么？
盒模型解释不同

17.闭包
子函数能被外部调用到，则该作用连上的所有变量都会被保存下来。

18.请解释什么是Javascript的模块模式，并举出实用实例。
js模块化mvc（数据层、表现层、控制层）
seajs
命名空间

19.你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
对内：模块模式
对外：继承

20.你如何优化自己的代码？
代码重用
避免全局变量（命名空间，封闭空间，模块化mvc..）
拆分函数避免函数过于臃肿
注释

21.你能解释一下JavaScript中的继承是如何工作的吗？
子构造函数中执行父构造函数，并用call\apply改变this
克隆父构造函数原型上的方法

22.请尽可能详尽的解释AJAX的工作原理。
创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
判断数据传输方式(GET/POST)
打开链接 open()
发送 send()
当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数