面试题目总结

New创建对象的过程

1、创建一个新对象

2、将函数的执行上下文给this指针

3、赋值给this指针
4、返回this

---

Ajax手写请求

// 初始化ajax对象
var xhr = new XMLHttpRequest();
// 向接口发送请求
xhr.open('GET','/api',true);
// 接收数据完成事件的触发
xhr.onload = function() {

}
// 发送数据
xhr.send();

promise语法

// 传统的callback hell
function loadImg(src,callback,fail){
    var img = document.createElement('img');
    img.onload = function() {
        callback(img);
    }
    img.onerror = function() {
        fail();
    }
    img.src = src;
}

var src='xxx.png';
loadImg(src,function(){
    console.log(img.width);
},function(){
    console.log('failed')
})


// 手写Promise
var p = new Promise(function(resolve,reject){
  setTimeout(function()){
    if(true){
        resolve('success')
    }else{
        reject('failure')
    }
  }
},1000)

// promise使用方式
p.then(function(value){
    console.log(value);

},function(error){
    console.log(error);
})

单线程

单线程只能关注一件事

“`
var i,sum = 0;
for(i = 0; i < 100000; i++){
sum++;
}

console.log(sum);
“`
单线程的缺点就是，比如上述的代码，只能做一件事，正在做这件事的同时，其它js和dom渲染都要等待上述代码完成之后才能渲染，好比排队。

多线程

• 多线程就是避免DOM渲染冲突

• 浏览器需要渲染DOM

• JS可以修改DOM结构。

• 两段JS不能同时执行（都修改DOM就冲突了）

• JS执行时候，浏览器DOM渲染会暂停

• webworker支持多线程，但是不能访问DOM

异步

异步缺点:

• 不能按照书写方式执行,可读性差

• callback中不能模块化

问题:

单线程就是同一时间只能做一件事情,两段JS不能同时执行.

原因就是为了避免DOM渲染的冲突

异步是一种无奈的解决方案,但是一种高效的解决方案.

什么是event-loop?

• 事件轮询,JS实现异步的具体解决方案

浏览器是一个事件驱动架构的软件,它的UI线程中会不断产生用户事件,但是JavaScript是单线程的,意味着浏览器在执行某一段代码的时候,如果产生了用户事件,它不会立即被处理.那这种情况应该怎么办?

浏览器维护一个”任务队列”,它是一个浏览器进程资源,每当UI线程产生一个事件,事件对象就被当作放入到任务队列中,当JavaScript执行进程空闲的时候,队列中的每一个任务就会被送往JavaScript执行线程,进行相应的处理.

这个enqueue和dequeue的机制就是”Event Loop”

作用域和作用域链

执行上下文三属性:this指针,变量对象(数据作用域),作用域链

JavaScript的数据类型
包括基本数据类型和引用类型

基本类型:
Number,String,Boolean,Undefined,Null

引用类型:
Object,Array,Function,RegExp,Data,Error

闭包

在JavaScript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”

var x = 0;
var bar : function() {
    var n = 999;
    return function() {
        return n;
    }
}
var outer = bar();
outer();

用途:

Jquery Deferred

使用Jquery Deferred

• 无法改变JS异步和单线程的本质
• 只能从写法上杜绝callback这种形式
• 它是一种语法糖形式,但是解耦了代码

        //最原始的ajax写法
        var ajax = $.ajax({
            url: './data.json',
            success: function() {
                console.log()
            },
            error: function() {
                console.log('fail')
            }
        })   

        // jquery deferred
        var ajax = $.ajax('./data.json');
        ajax.done(function(){
            console.log('成功1');
        }).fail(function(){
            console.log('失败1')
        }).done(function() {
            console.log('成功2')
        }).fail(function() {
            console.log('失败2')
        })

        //另外一种方式,放在then当中
        var ajax=$.ajax('./data.json');
        ajax.then(function(){
            console.log('success1')
        },function(){
            console.log('fail1')
        })

 //
        function waitHandle(){
            var dtd = $.Deferred(); //创建一个deferred对象

            var wait = function(dtd){
                var task = function(){
                    console.log('任务完成');
                    dtd.resolve();//表示异步任务已经完成
                  //  dtd.reject();//表示异步任务失败或出错
                }
                setTimeout(task,2000);
                return dtd;
            }
            return wait(dtd);
        }

        //使用的时候
        var w = waitHandle();
        w.then(function(){
            console.log('success')
        },function(){
            console.log('fail')
        })

JSONP

原理：动态插入script标签，通过

实现继承的方式

// 使用构造函数实现继承
function Parent1(){
    this.name='parent1';
}
function Child1(){
    Parent1.call(this);
    this.type='child';
}
console.log(new Child1());

// 使用原型链继承
function Parent2(){
    this.name='parent2';
}
function Child2(){
    this.type='child2';
}

Child2.prototype = new Parent2();
console.log(new Child2());

// 组合方式继承
function Parent3(){
    this.name='parent3';
}
function Child3(){
    Parent3.call(this);
    this.type='child3';
}

var c3 = new Child3();
console.log(c3);

//  组合方式优化
function Parent4() {
    this.name = 'parent4';
}
function Child4() {
    Parent4.call(this);
    this.type = 'child4';
}

Child4.prototype = Parent4.prototype;
var c4 = new Child4();
console.log(c4);
console.log(c4.constructor);

// 组合优化2
function Parent5() {
    this.name = 'parent3';
}
function Child5() {
    Parent5.call(this);
    this.type = 'child5';
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;

var c5 = new Child5();
console.log(c5);
console.log(c5.constructor);

跨域通信

跨域通信的几种方式：
JSONP
Hash
postMessage
WebSocket
CORS

css隐藏页面的方法

opacity设置为0
display:none
visibility:hidden
position:absolute

说说display position

display分为
- inline

• inline-block

• block

inline代表的是行内元素，不可设置宽度和高度，margin-top,margin-bottom设置无效，但是margin-left margin-right有效，padding-left padding-right同样有效，常见的元素有a,span,em,strong,i

inline-block代表的是行内块级元素，可以设置宽度和高度，常见的有img,input

block代表的是块级元素，常见的有div,p,h1-h6,ul,li

position属性的值

static absolute relative fixed

static，默认值元素出现在正常的文档流中，不会受left,top,right,bottom的影响

absolute，绝对定位，相对于除了static意外的元素定位，若没有，则相对于Html定位

relative，相对定位，相对于自身位置定位，可以设置left/top/right/bottom的值来设置定位

fixed，固定定位，相对于浏览器窗口定位，脱离文档流，不会随页面的滚动而变化

如何阻止事件冒泡和默认事件

function stopBubble(e){
    if(e&&e.stopPropagation){
        e.stopPropagation();
    }
    else{
        window.event.cancleBubble = true;
    }
}

谈谈this指针

this指针是js的一个关键字，随着函数使用场合不同，this值会发生变化。this运行的时候会确定this指向哪个对象。一般情况下，this指针是全局对象

浏览器解析css

按照从上到下，从右到左的顺序解析。
比如

.list a{color:blue;}

先解析到a标签，并将页面上的所有a标签变成蓝色，然后再解析到
.list，将页面上所有的list类目下的a标签的字体渲染成蓝色。

一个页面从输入URL到页面加载显示完成，这个过程发生了什么？

• 查找浏览器缓存
• DNS解析，查找该域名对应的IP地址、重定向（301）、发出的第二个get请求
• 进行HTTP协议会话
• 客户端发送报文
• 文档开始下载
• 文档树建立，根据标记请求所需指定MIME类型的文件
• 文件显示
• 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML,JS,CSS,图像等)
• 解析：对加载到的资源（HTML,JS,CSS)进行语法解析。

盒子模型

IE模型： IE模型的content包括border+padding
标准W3C模型：content