javascript

作为junior developer,仅仅觉得这些问题经常在我面试的时候被问到，好记性不如烂笔头，自己整理记录一遍~~~

1.javascript如何实现继承？三种方式： 1. 原型继承            // 优点：既继承了父类的模板，又继承了父类的原型对象             // 缺点：父类实例化传参，而不是子类实例化传参（不符合常规语言的写法）                        function Parent(work, drink) {                this.work = function() {                    console.log(work);                }                                this.drink = drink;            }                        Parent.prototype.draw = function() {                alert("I can draw");                                }                        function Child() {                this.cry = function() {                    console.log("the best ability is to cry");                 }            }                        Child.prototype = new Parent('code', 'beer');            var xiaoLi = new Child();            xiaoLi.work(); // code            xiaoLi.draw(); // I can draw            xiaoLi.cry();  // the best ability is to cry    关于原型链的解释：https://www.cnblogs.com/chengzp/p/prototype.html 2. 类继承（借用构造函数的方式继承）            // 优点：继承了父类的模板，方便通过子类实例化传参            // 缺点：不能继承父类的原型对象            function Parent(work, drink) {                this.work = function() {                    console.log(work);                }                                this.drink = drink;            }            Parent.prototype.draw = function() {                alert("I can draw");                                }                                    function Child(work, drink, sex) {                Parent.call(this, work, drink);                this.sex = sex;                            }                        var xiaoLi = new Child('code', 'beer', 'male');            alert(xiaoLi.drink); // code            xiaoLi.work(); // beer            // xiaoLi.draw(); //没有继承父类的原型对象，所以，会报错：xiaoLi.draw() is not a function            console.log(xiaoLi.sex); // male 3. 混合继承（原型继承和类继承）            // 混合继承（原型继承和类继承（借用构造函数的方式继承））            function Parent(eat, sleep) {                this.eat = function() {                    console.log("function 1" + eat);                }                this.sleep = function() {                    console.log("function 2" + sleep);                }            }                        Parent.prototype.other = "work";                        function Child(eat, sleep, age) {                Parent.call(this, eat, sleep);                this.age = age;            }                        Child.prototype = new Parent();            var xiaoLi = new Child("cake", "want to sleep", "10");            xiaoLi.eat();            xiaoLi.sleep();            console.log(xiaoLi.age);            console.log(xiaoLi.other);

2.原生ajax是如何实现的？特点：在不重新加载整个网页的情况下，对页面局部进行刷新。XMLHttpRequest对象是实现ajax的基础,XMLHttpRequest有很多方法，常用的有open(),send()等ajax请求共包含五个步骤：1.创建XMLHttpRequest对象(一个异步调用对象)2.设置HTTP请求的参数（请求方法，url，是否异步）3.设置响应HTTP请求状态变化的回调函数4.发送HTTP请求5.获取异步调用返回的数据6.局部更新页面var xhr = new XMLHttpRequest();xhr.open("POST", url, true);xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhr.onreadystatechange = function () {    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {        fn.call(this, xhr.responseText);    }};xhr.send(data);post方法一定要用setRequestHeader("header","value");

3.作用域块级作用域：ES6才支持，在{}大括号内的就是块级作用域(块级作用域的出现解决了：for循环定义的变量造成的全局污染;不用再通过闭包来保存必要的变量了)函数作用域：在函数中实现的全局作用域：在外部声明的，如果没有用var关键字声明，在非严格模式下，也为全局作用域注意：在es6之前没有块级作用域这个概念，所以在{}块级作用域中声明的变量其实就是全局变量（举个栗子）    for (var i = 1; i <= 10; i++) {        console.log (i); // outputs 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;​    };    ​    ​// The variable i is a global variable and it is accessible in the following function with the last value it was assigned above ​    ​function aNumber () {    console.log(i);    }    ​    ​// The variable i in the aNumber function below is the global variable i that was changed in the for loop above. Its last value was 11, set just before the for loop exited:​    aNumber ();  // 11​        关于es6的let和const:    let和const没有变量声明的提升；    let和const不允许在相同作用域内重复声明；

4.如何理解闭包？比较常用的情景：在A函数里返回B函数，B函数可以调用A函数的局部变量；特点：1.函数嵌套2.函数内部可以引用外部的参数和变量3.闭包函数里的参数和变量不会被垃圾回收机制回收（闭包会使变量始终保存在内存中，如果使用不当会增大内存消耗）闭包的好处：1.希望变量长期保存在内存中2.避免全局变量的污染3.私有变量的存在

5.回调函数定义：函数A作为参数传递给函数B，在函数B中执行函数A，此时函数A就叫做回调函数。如果函数没有名称（函数表达式），就叫做匿名回调函数。回调函数不一定用于异步，同步（阻塞）场景下也会用到回调函数。比如说要求在执行完某些操作后执行回调函数。举几个栗子：同步(阻塞)回调：fn1执行完后执行fn2在同步场景下，回调函数最后执行异步回调：ajax请求在异步回调中，回调函数有可能不执行，因为时间没有被触发或者条件不满足回调函数的应用场景：动态加载js后，图片加载完成后，ajax请求等另外，最好保证回调存在且必须是函数引用或者函数表达式：(callback && typeof(callback) === "function") && callback();

6.es6常用新特性：1.let和const(新的变量声明方式，允许把变量作用域控制在块级里面)2.解构赋值(对象和数组都适用)3.promise一个对象，用来表示并传递异步操作的最终结果交互方式：将回调函数传入then方法获取最终结果或出错原因以链式调用代替回调函数层层嵌套//生成promise实例var promise = new Promise(function(resolve, reject) { //...other code... if (/* 异步操作成功 */){   resolve(value);//resolve函数将Promise对象的状态从Pending变为Resolved } else {   reject(error);//reject函数将Promise对象的状态从Pending变为Rejected }});//Promise实例生成以后，用then方法分别指定Resolved状态和Reject状态的回调函数。promise.then(function(value) { // success}, function(err) { // failure});jQuery.ajax()方法中运用promise：var http = {    get: function(url) {        var promise = new Promise(function(resolve, reject) {            $.ajax({                url: url,                method: 'get',                success: function(data) {                    resolve(data);                },                error: function(xhr, statusText) {                    reject(statusText);                }            });        });        return promise;    }};http.get('data.php').then(function(data) {    document.write(data);}, function(err) {    document.write(err);});这里是获取的data值：/* data.php文件 */
    

7.cookie和web storage的区别？1.与服务器的交互上cookie始终会在http同源请求头上携带(即使不需要)，在浏览器端和客户端之间传来传去localStorage和sessionStorage不会主动发送给服务器，仅保存在本地2.储存大小cookie由于不同浏览器的限制，大小在4KB左右localStorage和sessionStorage储存大小达5MB或以上3.过期时间cookie与设置的有效期时间有关localStorage存储持久数据，除非主动删除sessionStorage在浏览器关闭后自动删除

8.cookie和session的区别？cookie数据存放在客户的浏览器，session存储在服务器上考虑到安全性建议：将登陆等重要信息存放为session其它信息可以放在cookie中

9.一个页面从输入url到页面加载，这个过程都发生了什么？简洁版：1.浏览器根据请求的url向服务器发送请求2.服务求处理完成后返回数据，浏览器接收文件3.浏览器对加载到的资源(html, css, js, image等)进行语法解析4.载入解析到的资源，渲染页面

10.事件委派优点：减少事件注册；简化DOM更新时，相应事件的更新                            
                                            
    
                    

11.拖拽                            
                                                        
    
                        

12.DOM事件        DOM事件(3个级别):DOM0;DOM2;DOM3;        DOM0特点:js与html强耦合;绑定的速度快,不需要操作dom,可直接在元素上绑定        dom.onclick=function(){            do something;        }                DOM2特点:可以在一个元素中添加不同的事件,事件不会覆盖;        dom.addEventListener("click",function(){},false)                DOM3特点:在dom2的基础上,添加更多的事件类型;可自定义事件;        var event=new Event("test");        dom.addEventListener("test",function(){},false);        setTimeout(function(){            oBox.dispatchEvent(event);        },2000)        DOM事件捕获的具体流程:        window->document->html->body->...->目标元素                事件流:        捕获->目标阶段->冒泡                一个节点上注册多个事件:        解决响应优先级:event.stopImmediatePropagation();

13.javascript如何实现一个类，怎么实例化这个类?1.构造函数法            // 构造函数法(this + prototype)            // 用new关键字生成实例 对象                        function Person(name, age) {                this.name = name;                this.age = age;            }                        Person.prototype.info = function() {                alert(this.name + this.age);                            }                        var xiaoLi = new Person("李佳", 26);            xiaoLi.info();2.es6语法糖            // es6语法糖            // 用new关键字生成实例化对象                                    // 优点：避免了使用prototype            class Person {                  constructor(x, y) {                      this.x = x;                      this.y = y;                  }                  info() {                      alert(this.x + this.y);                  }                              }                          var xiaoLi = new Person("李佳", 26);            xiaoLi.info();

14.解释作用域链1.全局函数无法查看局部函数的细节，局部函数可以访问全局函数的属性2.当前作用域没有找到属性或方法，可以向上层乃至全局寻找，这种形式就是作用域链

15. .call()和.apply()的区别？.call()和.apply()是每个函数都包含而非继承来的方法，用于改变函数的作用域两方法作用相同区别在接收参数的方式不同，call()要求明确传入每一个参数；扩充作用域，举个栗子：window.color = "red";var o = {color: "blue"};function sayColor() {    alert(this.color);}sayColor(); // redsayColor.call(this); // redsayColor.call(window); //redsayColor.call(o); // blue

15.jsonp的原理利用script标签可以跨域访问的特性，动态创建script标签，给标签设置src属性。通过script标签访问跨域的地址，返回一个参数为请求数据的callback的回调函数，而不再直接是json数据。具体实现步骤：原生：    $(document).ready(function(){        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";        var obj = $('

16.jquery链式调用原理：对象方法上最后加上return this;语句优点：节省代码，代码看起来更优雅

17.原型和原型链先记两个干巴巴的结论：举个栗子：function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name) } }var person1 = new Person('Zaxlct', 28, 'Software Engineer');var person2 = new Person('Mick', 23, 'Doctor');console.log(person1.constructor == Person); //trueconsole.log(person2.constructor == Person); //true1.实例的构造函数属性（constructor）指向构造函数。var A = new Person();Person.prototype = A;2.原型对象（Person.prototype）是 构造函数（Person）的一个实例。