百度前端面试题(六)
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。因此如果你要引用匿名函数,需要对匿名函数命名。