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

摘要：情况三作为构造函数调用所谓构造函数，就是通过这个函数生成一个新对象。让我们用一张图表示构造函数和实例原型之间的关系在这张图中我们用表示实例原型。

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

（1）null表示"没有对象"，即该处不应该有值。典型用法是：

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

（2）undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

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

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

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

行内式

 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

           ...此处写CSS样式
       
 
  
   缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单
   一网页可以考虑使用嵌入式。

导入式

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

链接式

也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它
在网页的标签对中使用标记来引入外部样式表文件，使用语法如下：

使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始
就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接
式的优点。

最基本的：
设置 display：none； 或  visibility：hidden；

技巧性的：
设置宽高为0，透明度为0，设置 z-index：-1000px；

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

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

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

情况一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此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深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。

构造函数创建对象

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

 

      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除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。

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

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

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

_proto _

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

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

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

于是我们更新下关系图：

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

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 ，所以我们再更新下关系图：

原型链

那Object.prototype 的原型呢？

null，不信我们可以打印：

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

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

所以最后一张关系图就是

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

补充

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

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
只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。

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