(1)关于变量声明提前的试题:
if(!('a' in window)) {
var a = 12;
}
console.log(a);
输出: undefined
解释:var a声明变量会提前,所以 'a' in window为true,因此无法进入到if中。
(2)如何实现继承:
1° 先建立一个公共父类:
function Animal(age) {
this.age = age;
this.getAge = function(){
console.log('I am ' + this.age + ' years old.');
}
}
Animal.prototype.eat = function(food) {
console.log('I am ' + this.age + 'years old.I want to eat ' + food);
}
2° 几种继承方式如下:
<1>原型链继承 ------ 核心: 将父类的实例作为子类的原型
function Dog(master){
this.master = master;
this.getMaster = function(){
console.log('My master is ' + this.master);
}
}
Dog.prototype = new Animal();
Dog.prototype.age = 1.5;
var dog = new Dog('sheep');
dog.getAge();
dog.eat('bones');
dog.getMaster();
console.log(Animal.prototype.hasOwnProperty('eat'));
console.log(Dog.prototype.hasOwnProperty('getAge'));
❤推荐指数:★★(3、4两大致命缺陷)
特点:
①非常纯粹的继承关系,实例是子类的实例,也是父类的实例
②父类新增原型方法/原型属性,子类都能访问到
③简单,易于实现
缺点:
①要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,不能放到构造器中
②无法实现多继承
③来自原型对象的引用属性是所有实例共享的
④创建子类实例时,无法向父类构造函数传参
<2>构造继承 ------ 核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
function Cat(age,master) {
Animal.call(this);
Dog.call(this);
this.master = master;
this.age = age;
}
var cat = new Cat(2, 'sheep');
cat.getAge();
cat.getMaster();
cat.eat('fish');//报错,调用不到引用属性
❤推荐指数:★★(缺点3)
特点:
①创建子类实例时,可以向父类传递参数
②解决了<1>中子类实例共享父类引用属性的问题
③可以实现多继承--call多个父类对象
缺点:
①实例不是父类Animal的实例,只是子类Cat的实例
②只能继承父类的属性和方法,如getAge,不能继承原型链的属性和方法,如eat
③无法实现函数复用,每个子类都是父类实例的副本,影响性能
<3>实例继承--为父类实例添加新特性,作为子类实例返回
function Fish(cate, age) {
var instance = new Animal(3);
// instance.age = age;
instance.cate = cate;
return instance;
}
var fish = new Fish('fool', 2);
fish.getAge();
console.log(fish.cate);
fish.eat('small fish');
❤推荐指数:★★
特点:
①不限制调用方式,不管是new 子类(),还是子类(),返回的对象具有相同效果
缺点:
①实例是父类Animal的实例,不是子类Fish的实例
②不支持多继承
其他实现方式参考http://www.cnblogs.com/humin/p/4556820.html
(3)ajax工作原理:
(4)浏览器的工作流程,如从网址栏输入“http:www.xxx.com”,如何运作最终得到网页:
①在地址栏输入域名;
②dns解析,通过域名查找到它对应的ip地址(依次查询浏览器缓存、系统缓存、路由器缓存、ISP DNS缓存、递归搜索);
③浏览器给web服务器发送一个http请求:
GET HTTP://facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: facebook.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
GET 这个请求定义了要读取的URL: “HTTP://facebook.com/”。 浏览器自身定义 (User-Agent 头), 和它希望接受什么类型的相应 (Accept and Accept-Encoding 头). Connection头要求服务器为了后边的请求不要关闭TCP连接。
请求中也包含浏览器存储的该域名的cookies。可能你已经知道,在不同页面请求当中,cookies是与跟踪一个网站状态相匹配的键值。这样cookies会存储登录用户名,服务器分配的密码和一些用户设置等。Cookies会以文本文档形式存储在客户机里,每次请求时发送给服务器。
④服务器接收到请求,处理后返回响应数据;
⑤浏览器接收到数据,开始显示html(浏览器没有完整接收到html文档就已经开始显示);
⑥浏览器显示html时,会注意到需要获取的地址标签,然后发送相关http请求来获取相应文件或数据。
(5)http请求分几部分(header、body之类的),各有什么属性,这些属性有什么值,分别是什么意思:
(6)盒子模型:
1° 标准 w3c 盒子模型的范围包括 margin、border、padding、content,获取width时只包含content部分。
2° IE盒子模型的范围包括 margin、border、padding、content,获取width时包含border、padding和content部分。
(7)左边定宽右边自适应宽度:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.right {/*第一种实现*/
margin-left: 200px;
height: 200px;
background-color: green;
}
.right {/*第二种实现*/
padding-left: 200px;
width: 100%;
height: 200px;
box-sizing: border-box;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
(8)闭包:当函数a的内部函数b被a以外的变量引用时,就创建了一个闭包
function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();
将内部函数b作为返回值,就可以在函数a的外部读取其内部的变量了。
(9)event的target和currentTarget的区别:target是触发事件的元素,currentTarget是绑定或者说是监听事件的元素。
(10)new一个实例的过程分为三步,举例说明:
var cat = new Animal();
等同于以下三步:
var cat = {};
cat.__proto__ = Animal.prototype;
Animal.call(cat);