2016百度前端面試題

1 寫出javascript運行結果：

for(var i=0; i<10; i++){} alert(i); 


解題：彈出10

2 Cookie、sessionStorage、localStorage的區別

3 JSONP原理

• 首先是利用script標簽的src屬性來實現跨域。
• 通過將前端方法作為參數傳遞到服務器端，然后由服務器端注入參數之后再返回，實現服務器端向客戶端通信。
• 由於使用script標簽的src屬性，因此只支持get方法

 

一個簡單的jsonp實現，其實就是拼接url，然后將動態添加一個script元素到頭部。

 

1. 設定一個script標簽
<script src="http://jsonp.js?callback=xxx"></script>
2. 服務器
$callback = !empty($_GET['callback'] ? $_GET['callback'] : 'callback');
echo $callback.'(.json_encode($data).)';

 

4 簡述css盒模型

w3c盒模型 標准模式 padding+margin+content+border 總寬度/高度=width/height+padding+border+margin

ie盒模型 怪異模式 總寬度/高度= width/height+margin

當設置為box-sizing:border-box時，將采用怪異模式解析計算；

 

 

5 說說get和post請求的區別

       GET使用URL或Cookie傳參，而POST將數據放在BODY中。

       GET的URL會有長度上的限制，則POST的數據則可以非常大。

       POST比GET安全，因為數據在地址欄上不可見。

       GET請求的參數會保存在瀏覽器的歷史記錄中

 

 

 

6 運行結果

var a = {n: 1} var b = a; a.x = a = {n: 2} console.log(a.x); console.log(b.x) 

{ n : 2}
undefined

 

7 說說類的創建、繼承和閉包。

傳統的通過構造函數+ 原型，用構造函數定義類的屬性，用原型定義類的方法

/**
 * Person類：定義一個人，有個屬性name，和一個getName方法
 * @param {String} name
 */
function Person(name) {    
　　this.name = name;
}
Person.prototype.getName = function() {    
　　return this.name;
}

　　

ES6中有class關鍵字，不過是語法糖，實質上還是通過構造函數+原型的方式

// 定義類 Person
class Person {

  constructor(name, age) {
    this.name = name;    this.age = age;
  }

  setName(name) {
        this.name = name;
  }

  getName() {
            return this.name;
  }

  toString() {
                return 'name: ' + this.name + ', age: ' + this.age;
  }
}

　　

繼承

分為屬性和方法的繼承

 

組合繼承：原型鏈繼承+構造函數繼承

　　使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，即通過在原型上定義方法實現了函數復用，又保證了每個實例都有它自己的屬性。

function Parent(age){
　　this.name = ['mike','jack','smith'];
　　this.age = age;
}
Parent.prototype.run = function () {
　　return this.name + ' are both' + this.age;
};

function Child(age){

　　Parent.call(this,age);

}

Child.prototype = new Parent();

缺點：調用2次父類的構造函數

　　

原型式繼承

　　借助原型並基於已有的對象創建新對象，同時還不用創建自定義類型。

function obj(o){
　　function F(){}
　　F.prototype = o;
　　return new F();
}

　　

寄生式繼承

　　把原型式+工廠模式結合起來，目的是為了封裝創建的過程

<script>
　　function create(o){
　　　　var f= obj(o);
　　　　f.run = function () {
　　　　　　return this.arr;//同樣，會共享引用
　　　　};
　　return f;
　　}
</script>

　　

寄生組合繼承

　　通過借用構造函數來繼承屬性，通過原型鏈的混成方式來繼承方法。

　　基本思路：不必為了指定子類的原型而調用超類型的構造函數。本質上，使用寄生式繼承來繼承超類型的原型，然后再將結果指定給子類型的原型。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType, superType) {
    var prototype = object(superType.prototype);  //創建對象
    prototype.constructor = subType;              //增強對象
    subType.prototype = prototype;                //指定對象
}

　　

 

 

8 是否有設計過通用的組件？ 
請設計一個 Dialog（彈出層） / Suggestion（自動完成） / Slider（圖片輪播） 等組件,你會提供什么接口？調用過程是怎樣的？可能會遇到什么細節問題？

 

 

9 一個頁面從輸入 URL 到頁面加載完的過程中都發生了什么事情？越詳細越好(考察知識廣度)

　　1. http客戶端發起請求，創建一個端口，默認是80

　　2. 然后http服務器在端口監聽客戶端的發送請求

　　3. 最后服務器向客戶端返回狀態和內容

　　4. 瀏覽器根據接收到的內容進行解析

 

10 什么是 “use strict”? 使用它的好處和壞處是什么？

嚴格模式是ES5引入的，更好的將錯誤檢測引入代碼的方法。顧名思義，使得JS在更嚴格的條件下運行。

變量必須先聲明，再使用
function test(){
  "use strict";
  foo = 'bar';  // Error
}

不能對變量執行delete操作
var foo = "test";
function test(){}

delete foo; // Error
delete test; // Error

function test2(arg) {
    delete arg; // Error
}
對象的屬性名不能重復
{ foo: true, foo: false } // Error

禁用eval()

函數的arguments參數
setTimeout(function later(){
  // do stuff...
  setTimeout( later, 1000 );
}, 1000 );

禁用with(){}

不能修改arguments
不能在函數內定義arguments變量
不能使用arugment.caller和argument.callee。因此如果你要引用匿名函數，需要對匿名函數命名。