百度前端面试题(六)

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
 */<br>function Person(name) {    <br>  this.name = name;
}
Person.prototype.getName = function() {    <br>  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();
}
  

寄生式继承

  把原型式+工厂模式结合起来,目的是为了封装创建的过程

9
<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。因此如果你要引用匿名函数,需要对匿名函数命名。