前端面试集锦2017/4/13更新

浏览器的内核分别是什么?

IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与Opera Software共同开发)

null与undefined的区别?

(1)null表示"没有对象",即该处不应该有值。典型用法是:

①作为函数的参数,表示该函数的参数不是对象。
②作为对象原型链的终点。

(2)undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

①变量被声明了,但没有赋值时,就等于undefined。
②调用函数时,应该提供的参数没有提供,该参数等于undefined。
③对象没有赋值的属性,该属性的值为undefined。
④函数没有返回值时,默认返回undefined。

简述一下src与href的区别

href 时指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src 时指向外部的资源位置,指向的内容将会嵌入到文档中当前标签所在位置;
在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素。当浏
览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元
素也是如此,类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

HTML中引入CSS的方法

  1. 行内式

     行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。
    
    ...此处写CSS样式    缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,进行修改样式时非常麻烦。单    一网页可以考虑使用嵌入式。
  2. 导入式

    将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,
                 
    导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现
    先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。
    
  3. 链接式

    也是将一个.css文件引入到HTML文件中,但它与导入式不同的是链接式使用HTML规则引入外部CSS文件,它
    在网页的标签对中使用标记来引入外部样式表文件,使用语法如下:
    
    使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始
    就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接
    式的优点。
    

如何使得一个DOM元素在浏览器可视范围内不显示?

最基本的:
设置 display:none; 或  visibility:hidden;

技巧性的:
设置宽高为0,透明度为0,设置 z-index:-1000px;

display:none 与 visibility:hidden的区别?

  • 是否是继承属性:display不是继承属性,而visibility是继承属性,后代元素的visibility属性若存在则不会继承,若不存在则继承父元素visibility的值,意味着:父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见,子元素visibility不存在则子元素不可见。而元素的display属性设为none其后整棵子树都不可见。
  • 是否占据空间:使用display:none,在文档渲染时,该元素如同不存在(但依然存在文档对象模型树中);而使用visibility:hidden,其占的空间会被空白占位。即一个(display:none)不会在渲染树中出现,一个(visibility:hidden)会。
  • 页面相关属性改值后是否重新渲染:visibility :hidden不渲染;display:none渲染

px、em、rem的区别?

  • px、em都是长度单位。区别:px的值是固定的,写多少就是多少,容易计算。em的值不是固定的,em继承父元素的字体大小。
    rem是CSS3新引进来的一个度量单位,rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需求。

简述盒子模型

盒子模型:内容、内边距、外边距、边框

前端面试集锦2017/4/13更新_第1张图片

DOCTYPE的作用?严格模式与混杂模式的区别?

  • DOCTYPE声明位于文档的最前面,处于标签之前。告诉浏览器的解析器,用什么文档类型规范来解析这个文档。
    在标准模式中,浏览器以其支持的最高标准呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

Javascript的this用法?

  • 情况一:纯粹的函数调用

    这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
    请看下面这段代码,它的运行结果是1。
      

       function test(){
          this.x = 1;
          alert(this.x);
        }
        test(); // 1
    

    为了证明this就是全局对象,我对代码做一些改变:
      

          var x = 1;
        function test(){
          alert(this.x);
        }
        test(); // 1
    

    运行结果还是1。再变一下:
      

    var x = 1;

        function test(){
          this.x = 0;
        }
        test();
        alert(x); //0
    

      
    情况二:作为对象方法的调用

    函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
      

         function test(){
          alert(this.x);
        }
        var o = {};
        o.x = 1;
        o.m = test;
        o.m(); // 1
    

      
    情况三 作为构造函数调用

    所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。
      

     function test(){
          this.x = 1;
        }
        var o = new test();
        alert(o.x); // 1
    

    运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
      

         var x = 2;
        function test(){
          this.x = 1;
        }
        var o = new test();
        alert(x); //2
    

    运行结果为2,表明全局变量x的值根本没变。

    情况四 apply调用

    apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。
      

          var x = 0;
        function test(){
          alert(this.x);
        }
        var o={};
        o.x = 1;
        o.m = test;
        o.m.apply(); //0
    

    apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
    如果把最后一行代码修改为
      o.m.apply(o); //1
    运行结果就变成了1,证明了这时this代表的是对象o。

JavaScript如何实现继承?

一、构造继承法;
二、原型继承法;
三、实例继承法;

JavaScript深入之从原型到原型链

  • JavaScript深入系列的第一篇,从原型与原型链开始讲起,如果你想知道构造函数的实例的原型,原型的原型,原型的原型的原型是什么,就来看看这篇文章吧。

构造函数创建对象

我们先使用构造函数创建一个对象:

 

      function Person() {
     
      } 
      var person = new Person();
      person.name = 'Kevin'; 
      console.log(person.name) // Kevin
      

在这个例子中,Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person。
很简单吧,接下来进入正题:

prototype

每个函数都有一个 prototype 属性,就是我们经常在各种例子中看到的那个 prototype ,比如:

 function Person() {
    
 } 
 // 虽然写在注释里,但是你要注意:
 // prototype是函数才会有的属性
 Person.prototype.name = 'Kevin'; 
 var person1 = new Person(); 
 var person2 = new Person(); 
 console.log(person1.name) // Kevin
 console.log(person2.name) // Kevin 

那这个函数的 prototype属性到底指向的是什么呢?是这个函数的原型吗?

其实,函数的 prototype属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的 person1 和 person2 的原型。

那什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型"继承"属性。

让我们用一张图表示构造函数和实例原型之间的关系:

前端面试集锦2017/4/13更新_第2张图片

在这张图中我们用 Object.prototype 表示实例原型。

那么我们该怎么表示实例与实例原型,也就是 person 和 Person.prototype 之间的关系呢,这时候我们就要讲到第二个属性:

_proto _

这是每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

为了证明这一点,我们可以在火狐或者谷歌中输入:

function Person() { 
   
} 
var person = new Person(); 
console.log(person.__proto__  === Person.prototype); // true 

于是我们更新下关系图:

前端面试集锦2017/4/13更新_第3张图片

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:constructor,每个原型都有一个 constructor 属性指向关联的构造函数。

为了验证这一点,我们可以尝试:

function Person(){
   
} 
console.log(Person === Person.prototype.constructor); // true

所以再更新下关系图: 综上我们已经得出:

function Person() {
 
} 
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true 
//顺便学习一个ES5的方法,可以获得对象的原型 
console.log(Object.getPrototypeOf(person) === Person.prototype) // true 

了解了构造函数、实例原型、和实例之间的关系,接下来我们讲讲实例和原型的关系:

实例与原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

举个例子:

function Person() { 

}
Person.prototype.name = 'Kevin'; var
person = new Person(); person.name = 'Daisy';
console.log(person.name) // Daisy delete person.name;
console.log(person.name) // Kevin 

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时,读取person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

但是万一还没有找到呢?原型的原型又是什么呢?

原型的原型

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:

var obj = new Object();
obj.name = 'Kevin';
console.log(obj.name) // Kevin 

所以原型对象是通过 Object构造函数生成的,结合之前所讲,实例的 _proto _ 指向构造函数的 prototype ,所以我们再更新下关系图:

前端面试集锦2017/4/13更新_第4张图片

原型链

那Object.prototype 的原型呢?

null,不信我们可以打印:

console.log(Object.prototype.__proto__ === null) // true 
   

所以查到属性的时候查到Object.prototype 就可以停止查找了。

所以最后一张关系图就是

前端面试集锦2017/4/13更新_第5张图片

顺便还要说一下,图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

补充

最后,补充三点大家可能不会注意的地方:

constructor

首先是 constructor 属性,我们看个例子:

function Person() {

 } 
var person = new Person(); 
console.log(person.constructor === Person); //  true

当获取 person.constructor 时,其实 person 中并没有 constructor属性,当不能读取到constructor 属性时,会从 person 的原型也就是 Person.prototype中读取,正好原型中有该属性,所以:

person.constructor === Person.prototype.constructor

_proto _

其次是 _proto _ ,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于 Person.prototype 中,实际上,它是来自于 Object.prototype ,与其说是一个属性,不如说是一个getter/setter,当使用 obj._ proto _ 时,可以理解成返回了
Object.getPrototypeOf(obj)。

真的是继承吗?

最后是关于继承,前面我们讲到“每一个对象都会从原型‘继承’属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:

继承意味着复制操作,然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript
只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

========================================待更新===========================================

你可能感兴趣的:(jquery,html,css,html5,javascript)