前端面试基础面试题

1.ng-show/ng-hide和ng-if的区别？

      angularJS中的ng-show. ng-hide. ng-if指令的都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML的元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时会元素会显示。ng-hide功能类似，使用方法相反。元素的显示或隐藏是通过改变css的display属性值来实现的。

2.This的指向问题，This在什么情况下不能用?

     this最终指向的是调用它的对象，这里的函数a实际是被window对象所点击出来的。

      this什么时候不能用：

                                      (1).定时器中不能用this。

                                      (2).事件中嵌套一层函数。 

                                      (3).行间中不能嵌套this。

                                      (4).attchevent不能用this。

3.数据类型：

                    (1).number

                    (2).string 

                    (3).object 

                    (4).undefined 

                    (5).null

                    (6).boolean

                    (7).symbol(ES6)

4.解释什么是$rootScope以及和$scope的区别？

通俗的说$rootscope是页面$scope的父亲。

(1).Angular解析ng-app然后在内存中创建$rootScope.

(2).Angular会继续解析，找到{{}}表达式，并且解析成变量。

(3).接着会解析带有ng-controller的div，然后指向某个controller函数，这个时候这个controller函数变成一个$scope对象实例。

5.列出至少三个实现不同模块之间通信的方式?

          (1).service

          (2).events.指定绑定的事件

          (3).使用$rootScope

          (4).controller之间直接作用$parent,$$childHead等。

          (5).directive指定属性进行数据绑定。

6.undefined什么时候用?

(1).函数没有返回值

(2).直接赋值(未定义) 变量声明未赋值

(3).返回一个不存在的属性

(4).传参数没有值

7.常见的浏览器内核

    Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

   Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

   Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;] 

   Webkit内核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]

8.display:none与visibility:hidden的区别

联系：它们都能让元素不可见

区别：

         1.display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见

        2.display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式

       3.修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。

4.读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

9.CSS优先级算法如何计算？

     优先级就近原则，同权重情况下样式定义最近者为准;

    载入样式以最后载入的定位为准;

 优先级为:

同权重:内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）。

!important >  id > class > tag

important比内联优先级高

10.CSS有哪些继承属性

     (1).id选择器（# myid）

     (2).类选择器（.myclassname）

     (3).标签选择器（div, h1, p）

     (4).相邻选择器（h1 + p）

     (5).子选择器（ul > li）

     (6).后代选择器（li a）

     (7).通配符选择器（*）

     (8).属性选择器（a[rel = "external"]）

     (9).伪类选择器（a:hover, li:nth-child）

          可继承：font-size font-family color, UL LI DL DD DT;

         不可继承：border padding margin width height ;

11.JavaScript原型，原型链?有什么特点？

          每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

关系：instance.constructor.prototype = instance.__proto__

特点：   JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

12.::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）

双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，

比如:first-line、:first-letter、:before、:after等，

而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前，使用::before，否者，使用::after；

在代码顺序上，::after生成的内容也比::before生成的内容靠后。

如果按堆栈视角，::after生成的内容会在::before生成的内容之上