面试官:谈谈你对this的理解
求职者:this表示当前对象,this的指向是根据调用的上下文来决定的,默认指向window对象,指向window对象时可以省略不写。例如: this.alert() <=> window.alert()<=> alert(); 在全局作用域下直接调用函数,this指向window 对象函数调用,哪个对象调用就指向哪个对象 使用 new 实例化对象,在构造函数中的this指向实例化对象。
面试官:那如何改变this指向呢?
求职者: 可使用call或apply改变this的指向 用于区分全局变量和局部变量,需要使用this
面试官:apply、call、bind区别和用法有哪些?
求职者:apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向。this指向他们的第一个参数,apply的第二个参数是一个参数数组,call的第二个及其以后的参数都是数组里面的元素,就是说要全部列举出来。
面试官:new 操作符具体干了什么(手写代码)?
求职者:new共经历了四个过程。
var fn = function () { };
var fnObj = new fn();复制代码
1、创建了一个空对象
var obj = new object();复制代码
2、设置原型链
obj._proto_ = fn.prototype;复制代码
3、让fn的this指向obj,并执行fn的函数体
var result = fn.call(obj);复制代码
4、判断fn的返回值类型,如果是值类型,返回obj。如果是引用类型,就返回这个引用类型的对象。
if (typeof(result) == "object"){
fnObj = result;
} else {
fnObj = obj;
} 复制代码
面试官:原型是什么?
求职者:在JavaScript中原型是一个prototype对象,用于表示类型之间的关系。
面试官:那原型链是什么?
求职者:JavaScript万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链。
面试官:什么是闭包,为什么要用它(手写代码)?
求职者:我个人理解,闭包是就是函数中的函数,里面的函数可以访问外面函数的变量,外面的变量的是这个内部函数的一部分。
function outer(){
var num=0;//内部变量
return function add(){//通过return返回add函数,就可以在outer函数外访问了。
num++;//内部函数有引用,作为add函数的一部分了
console.log(num);
};
}
var func1=outer();//
func1();//实际上是调用add函数, 输出1
func1();//输出2
var func2=outer();
func2();// 输出1
func2();// 输出2 复制代码
闭包的作用
1.使用闭包可以访问函数中的变量。
2.可以使变量长期保存在内存中,生命周期比较长。
加分项
闭包不能滥用,否则会导致内存泄露,影响网页的性能。闭包使用完了后,要立即释放资源,将引用变量指向null。
面试官:事件是什么?如何阻止事件冒泡?
② 处于目标阶段
③ 事件冒泡阶段
捕获型事件是自上而下,而冒泡型事件是自下而上的,而我们程序员通常要做的就是第二阶段,完成事件的动作。而第一、三阶段由系统封装自动调用完成。
event.stopPropagation()
IE浏览器
event.cancelBubble = true;
面试官:对http请求有几部分组成
求职者:http请求由三部分组成,分别是:请求行、消息报头、请求正文
面试官:post和get有什么区别
求职者:
GET 请求的 URL 中发送的,POST 请求的 HTTP 消息主体中发送的
GET能被缓存,POST不能缓存 。
GET后退按钮/刷新无害,POST数据会被重新提交
GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET !POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中
面试官:CSS3有哪些新特性
求职者:
1.CSS3的选择器
2. @Font-face 特性
3. 圆角
4. 多列布局 (multi-column layout)
5.阴影(Shadow)
6.CSS3 的渐变效果
7.css弹性盒子模型
8. CSS3制作特效
9. Animation动画特效
10. Transforms 2D转换效果
11. Transition 对象变换时的过渡效果 :
transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间
面试官:cookies,sessionStorage 和localStorage区别是什么?
求职者:
相同点:都存储在客户端
不同点:
1. 存储大小 cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
2. 有效时间 localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据; sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式 cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端 sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
面试官:移动端rem和em区别是什么?
求职者:rem和em单位一样,都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px,按照转化关系 16px = 1rem。
面试官:如何用rem自适应不同分辨率的手机?
求职者:使用rem布局的时候,为了兼容不同的分辨率,应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果
一般情况在项目的最前面加载一段js来修改html的font-size,针对不同分辨率计算font-size,监听浏览器更改 html的font-size面试官:页面优化有哪些方法
求职者:
1. 尽量减少 HTTP 请求
2. 对图片压缩、cdn存储和缓存
3. 减少对DOM的操作
4. 对域名进行预解析
5. 预载入组件或延迟载入组件
6. 脚本放到 HTML 代码页底部
7. 使用工具压缩JavaScript和CSS文件
8. 使用Ajax实现异步加载,例如,滚动页面加载后面的内容,这种也比较常见。