面试个人总结一

最新推荐文章于 2020-09-28 10:00:21 发布

归小超

最新推荐文章于 2020-09-28 10:00:21 发布

阅读量725

点赞数 1

CC 4.0 BY-SA版权

分类专栏：个人总结

本文链接：https://blog.csdn.net/weixin_42966484/article/details/81667313

个人总结专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了前端开发中的关键概念，如作用域、深度优先遍历、CSS优先级及盒模型，并介绍了Angular和JS事件委托的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.作用域

var a = 1;
var obj = {
	a:2,
	fun:function(){
		console.log(a)
	}
}
obj.fun();

问：打印出的a = 1 还是 a = 2？
答案：因为在obj中的a是处于局部作用域中，而在该对象的外部访问的，所以访问的全局的a，自然就是1；
问2：如何让程序打印出2？
答：直接在obj对象后面插入 a = obj.a即可。

2.有如下数据，请按照深度优先遍历的顺序访问出数据

var aa = [
    {
        name:1,
        age:1,
        sex:'F',
        aa:[{
            name:3,
            age:3,
            sex:'F',
            aa:[
                {
                    name:4,
                    age:4,
                    sex:'F'
                }
            ]
        }

        ]
    },
    {
        name:2,
        age:2,
        sex:'F'
    }
]

答：这个问题一开始想了一会，采用循环的方式，但是后来被提醒到数据的层次都比较相似，应该是采用递归的方式去访问，但是递归的话因为key不规则，所以我就将访问到的数据放入一个数组arr中，最后依次pop。

var arr = [];
function func(m){
    var obj = m;
    for(var i = 0; i< obj.length; i++){
        if(typeof obj[i] === 'object'){
            for(var key in obj[i]){
                if(typeof obj[i][key] === 'object' && obj[i][key] instanceof Array){
                    func(obj[i][key]);
                }else{
                    arr.push(obj[i][key]);
                }
            }
        }else{
            arr.push[obj[i]];
        }
    }
    for (var j = 0; j < arr.length; j++) {
        console.log(arr.pop());
    }
}
func(aa);

3.CSS优先级模块
问：CSS优先级的顺序
!important > 行内样式 > id > class > 标签 > 通配符 > 继承 > 浏览器的默认属性

加深：
问：
1.当link引入一个css文件中的一个class样式，和写在本文件的css中的class样式，哪一个优先级高？
2.当父子class叠加（.a .b）形式和id选择器（#id）形式，哪一个优先级高？
答：1.这两个平时很少接触到，但是第一题我回答了是按照载入的数据决定，后者大约前者。因为想到只是载入方式不一样，其实际优先级应该是一样的。
2.第二题首先是想到id的优先级比class高，但是因为有父子关系存在，所以一时犹豫了没有作答，经过实际测试，id优先级确实高于class，不论class嵌套多少层次。总归还是自己的知识面过于单薄。

4.CSS盒模型
CSS盒模型包括怪异盒模型和标准盒模型，我回答了IE盒模型和非IE的盒模型，虽然内容都是同一个，但是准确性不够。
其表型形式分别为：
怪异:：box-sizing:content-box 块的总宽度= margin + border + padding + width + padding + border + margin
标准：box-sizing:border-box 块的总宽度= margin + width + margin 也就是content-width = width+ 2*border + 2*padding
只要在文档首部加了doctype申明，即使用了标准盒模型，而不加，则会由浏览器自己决定，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。

5.angular模块
1.当你在settimeout中使用数据双向绑定的时候，这个时候angular会自动去更新数据吗？
答：不会。
2.为什么？那怎么才会？
答：因为这个setTimeOut并不是angular js的库中的方法，所以并不会自动绑定apply函数，我们必须手动执行apply函数，才能使更新页面上的数据。
其他就好比是问了一些个人比较熟悉的模块，比如vue和angular的双向绑定，这个可以参考我的另外一篇博客，“数据双向绑定”，但是问到了底层原理模块，个人并不是非常了解，所以答的比较模糊，这一块还需要下功夫。

7.JS事件的委托了解吗？能详细叙述一下吗？
答：这个也之前解答过，所以直接回答，将子元素的事件绑定到父元素上，一般都是采用事件冒泡的方式，但是比如focus等事件是采用事件捕获的方式。优点：当子元素被删除后，重新添加子元素就不需要重复去绑定，而且如果子元素过多，就会绑定太多次，每次绑定都会消耗资源。