面试时遇到的基础问题

来源：互联网发布：淘宝拍卖车可信吗编辑：程序博客网时间：2024/05/16 08:24

（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);

0 0