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) 

1 { n : 2}
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。所以若是你要引用匿名函数，须要对匿名函数命名。