前端技术es6相关

js面试题

2020-05-10  本文已影响0人  lazy_tomato

1.简述同步和异步的区别

2.怎么添加、移除、复制、创建、和查找节点

（1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

（3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

3.???实现一个函数clone 可以对 Javascript 中的五种主要数据类型（Number、string、Object、Array、Boolean）进行复制

Object.prototype.clone=function(){
    var o= this.constructor===Array? [] : {};
    for(var e in this){
        o[e]= typeof this[e]==="object" ? this[e].clone() : this[e];
    }
    return o;
};

4.如何消除一个数组里面重复的元素

function qc(arr1){
    let arr = [];
    for( let i = 0; i < arr1.length; i++) {
        if( arr.indexOf(arr1[i]) == -1) {
            arr.push(arr1[i])
        }
    }
    return arr;
}
arr1 = ["1","1","3","5","2","24","4","4","a","a","b"];
        
console.log(qc(arr1));

个人总结：感觉就是，结合for循环遍历要处理的数组，用indexof，判断我返回的数组中有没有这个元素，没有就加进去。我在想印象中好像有更简单的方法

5.***写一个返回闭包的函数

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。闭包就是能够读取其他函数内部变量的函数。可以把闭包简单理解成”定义在一个函数内部的函数”。
闭包有三个特性：
1.函数嵌套函数;
2.函数内部可以引用外部的参数和变量;
3.参数和变量不会被垃圾回收机制回收。
闭包就是一个函数的返回值为另外一个函数，在outer外部可以通过这个返回的函数访问outer内的局部变量.

function outer(){
     var val = 0;
     return function (){
           val += 1;
           document.write(val + "<br />");
     };
}
var outObj = outer();
outObj();//1，执行val += 1后，val还在
outObj();//2
outObj = null;//val 被回收
var outObj1 = outer();
outObj1();//1
outObj1();//2

​

​ 闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗（如果上例中定义很多outer()，则内存中会保存很多val变量）。

javascript 的垃圾回收原理：

（1）、在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收；

（2）、如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

那么使用闭包有什么好处呢？

使用闭包的好处是：

1.希望一个变量长期驻扎在内存中

2.避免全局变量的污染

3.私有成员的存在

6.使用递归完成1到100的累加

function sum(num) {
    if( num==1 ){
        return 1;
    }
    return num+sum(num-1);
}
console.log(sum(100))

7. Javascript有哪几种数据类型

基本数据类型：

字符串 String
数字 Number
布尔 Boolean

复合数据类型：

数组 Array
对象 Object

特殊数据类型：

Null 空对象
Undefined 未定义

判断js中的数据类型的几种方法

判断js中的数据类型有一下几种方法：typeof、instanceof、 constructor、 prototype、 $.type()/jquery.type(),

接下来主要比较一下这几种方法的异同。

判断js中的数据类型的几种方法

1、最常见的判断方法：typeof

alert(typeof a)   ------------> string
alert(typeof b)   ------------> number
alert(typeof c)   ------------> object
alert(typeof d)   ------------> object
alert(typeof e)   ------------> function
alert(typeof f)   ------------> function
其中typeof返回的类型都是字符串形式，需注意，例如：
alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false
另外typeof 可以判断function的类型；在判断除Object类型的对象时比较方便。

2、判断已知对象类型的方法： instanceof

alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

3、根据对象的constructor判断： constructor

alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
注意： constructor 在类继承时会出错
eg：
      function A(){};
      function B(){};
      A.prototype = new B(); //A继承自B
      var aObj = new A();
      alert(aobj.constructor === B) -----------> true;
      alert(aobj.constructor === A) -----------> false;
而instanceof方法不会出现该问题，对象直接继承和间接继承的都会报true：
      alert(aobj instanceof B) ----------------> true;
      alert(aobj instanceof B) ----------------> true;
言归正传，解决construtor的问题通常是让对象的constructor手动指向自己：
      aobj.constructor = A; //将自己的类赋值给对象的constructor属性
      alert(aobj.constructor === A) -----------> true;
      alert(aobj.constructor === B) -----------> false; //基类不会报true了;

4、通用但很繁琐的方法： prototype

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;
大小写不能写错，比较麻烦，但胜在通用。

5、万能的方法：jquery.type()

如果对象是undefined或null，则返回相应的“undefined”或“null”。
jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"
如果对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同，我们返回相应的 [[Class]] 名字。 (有关此技术的更多细节。 )
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"
其他一切都将返回它的类型“object”。

9. console.log(1+'2')和console.log(1-'2')的打印结果

console.log(1+'2') //12
console.log(1-'2') //-1

个人总结：第一眼看晕了，其实还好，+相当于字符串拼接，-号相当于运算符，会隐式的把 '2' 转换成 2

10. Js的事件委托是什么，原理是什么

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
原理：事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件。

11.如何改变函数内部的this指针的指向

1.bind：

2.call:

3.apply

四.总结

12.列举几种解决跨域问题的方式，且说明原理

1.jsonp

script标签是不受同源策略影响的，它可以引入来自任何地方的js文件。动态添加script

2、使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

3、使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

13.谈谈垃圾回收机制的方式及内存管理

一、垃圾回收机制—GC

Javascript具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。

原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存

通常情况下有两种实现方式：标记清除和引用计数

当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。

当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

二、内存管理

1）、Javascript引擎基础GC方案是（simple GC）：mark and sweep（标记清除），即：

2）、GC的缺陷

和其他语言一样，javascript的GC策略也无法避免一个问题：GC时，停止响应其他操作，这是为了安全考虑。而Javascript的GC在100ms甚至以上，对一般的应用还好，但对于JS游戏，动画对连贯性要求比较高的应用，就麻烦了。这就是新引擎需要优化的点：避免GC造成的长时间停止响应。
3）、GC优化策略

14.写一个function ，清除字符串前后的空格

//重写trim方法
if(!String.prototype.trim){
    String.prototype.trim = function(){
        return this.replace(/^\s+/,"").replace(/\s+$/,""); 
    }
} 
//写fntrim去掉左右空格
function fntrim(str){
    return str.replace(/^\s+/,"").replace(/\s+$/,"");
}

15.js实现继承的方法有哪些

JS继承的实现方式

既然要实现继承，那么首先我们得有一个父类，代码如下：

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

1、原型链继承

核心：将父类的实例作为子类的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

特点：

  1. 非常纯粹的继承关系，实例是子类的实例，也是父类的实例
  2. 父类新增原型方法/原型属性，子类都能访问到
  3. 简单，易于实现

缺点：

  1. 要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
  2. 无法实现多继承
  3. 来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的）（详细请看附录代码：[示例1](javascript:void(0);)）
  4. 创建子类实例时，无法向父类构造函数传参

2、构造继承

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：

  1. 解决了1中，子类实例共享父类引用属性的问题
  2. 创建子类实例时，可以向父类传递参数
  3. 可以实现多继承（call多个父类对象）

缺点：

  1. 实例并不是父类的实例，只是子类的实例
  2. 只能继承父类的实例属性和方法，不能继承原型属性/方法
  3. 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3、实例继承

核心：为父类实例添加新特性，作为子类实例返回

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

特点：

  1. 不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点：

  1. 实例是父类的实例，不是子类的实例
  2. 不支持多继承

4、拷贝继承

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：

  1. 支持多继承

缺点：

  1. 效率较低，内存占用高（因为要拷贝父类的属性）
  2. 无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

5、组合继承

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

特点：

  1. 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
  2. 既是子类的实例，也是父类的实例
  3. 不存在引用属性共享问题
  4. 可传参
  5. 函数可复用

缺点：

  1. 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

6、寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
Cat.prototype.constructor = Cat; // 需要修复下构造函数

特点：

  1. 堪称完美

缺点：

  1. 实现较为复杂

16.判断一个变量是否是数组，有哪些办法

1、在ECMAScript5标准中Array类增加了一个静态方法isArray，我们可以直接用Array.isArray来判断变量是否是数组。
Array.isArray([1,2,3]) //此处返回true

2、但是某些比较老的浏览器，比如IE8及以下，没有实现Array的isArray方法，那么就需要换一种方式来判断：

Object.prototype.toString.call([1,2,3]) //返回字符串：'[object Array]'

那么我们定义一个函数来实现数组判断

        function isArray (value) {

            if  (Object.prototype.toString.call(value) === '[object Array]') {

                return true

            }

                return false

        }

3、index of
var arr=new Array(["b",2,"a",4,"test"]);

17. let ，const ，var 有什么区别

18.箭头函数与普通函数有什么区别

19.随机取1-10之间的整数

Math.floor([Math.random]*10+1）

20. new操作符具体干了什么

个人总结：

  1. 在内存中申请了一个空闲空间，储存创建的新对象
  2. 把this设置为当前对象
  3. 设置对象的属性和方法的值
  4. 把this对象返回

21. Ajax原理

    //1. 创建连接
   var xhr = null;
   xhr = new XMLHttpRequest()
   // 2. 连接服务器
   xhr.open('get', url, true)
   // 3. 发送请求
   xhr.send(null);
   // 4. 接受请求
   xhr.onreadystatechange = function(){
       if(xhr.readyState == 4){
           if(xhr.status == 200){
               success(xhr.responseText);
           } else { // fail
               fail && fail(xhr.status);
           }
       }
   }

22.模块化开发怎么做

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

23.异步加载Js的方式有哪些

24. xml和 json的区别

25. webpack 如何实现打包的

26.常见web安全及防护原理

XSS原理及防范

XSS防范方法

XSS与CSRF有什么区别吗？

CSRF的防御

个人总结：

说实话这么多默认的单词缩写，记不住，但是我印象比较深的是，在表单输入这一块，永远要进行处理，万一别人给你提交一段代码，在后台跑起来了，那就不是开玩笑的了。

27.用过哪些设计模式

28.为什么要同源限制

29.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

30. javascript有哪些方法定义对象

31.说说你对promise的了解

Promise 的构造函数

var promise = new Promise(function(resolve, reject) {
        if (...) {  // succeed
            resolve(result);
        } else {   // fails
            reject(Error(errMessage));
        }
    });

32.谈谈你对AMD、CMD的理解

33. web开发中会话跟踪的方法有哪些

34.介绍js有哪些内置对象？

35.说几条写JavaScript的基本规范？

36.javascript创建对象的几种方式？

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

function Person(){}
    var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

function Pet(name,age,hobby){
       this.name=name;//this作用域：当前对象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
       }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
    maidou.eat();//调用eat方法

var wcDog =new Object();
     wcDog.name="旺财";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

function Dog(){
 }
 Dog.prototype.name="旺财";
 Dog.prototype.eat=function(){
 alert(this.name+"是个吃货");
 }
 var wangcai =new Dog();
 wangcai.eat();

function Car(name,price){
     this.name=name;
     this.price=price; 
   }
    Car.prototype.sell=function(){
      alert("我是"+this.name+"，我现在卖"+this.price+"万元");
     }
   var camry =new Car("凯美瑞",27);
   camry.sell();

37. eval是做什么的？

39.[“1”, “2”, “3”].map(parseInt) 答案是多少？

40. javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？

41. js延迟加载的方式有哪些？

42. defer 和 async

43.说说严格模式的限制

44. attribute和property的区别是什么？

45. ECMAScript6 怎么写class么，为什么会出现class这种东西?

46.常见兼容性问题

47.函数防抖节流的原理

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。

防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

function debounce(func, wait, immediate=true) {
    let timeout, context, args;
        // 延迟执行函数
        const later = () => setTimeout(() => {
            // 延迟函数执行完毕，清空定时器
            timeout = null
            // 延迟执行的情况下，函数会在延迟函数中执行
            // 使用到之前缓存的参数和上下文
            if (!immediate) {
                func.apply(context, args);
                context = args = null;
            }
        }, wait);
        let debounced = function (...params) {
            if (!timeout) {
                timeout = later();
                if (immediate) {
                    //立即执行
                    func.apply(this, params);
                } else {
                    //闭包
                    context = this;
                    args = params;
                }
            } else {
                clearTimeout(timeout);
                timeout = later();
            }
        }
    debounced.cancel = function () {
        clearTimeout(timeout);
        timeout = null;
    };
    return debounced;
};

防抖的应用场景:

节流(throttle): 高频事件在规定时间内只会执行一次，执行一次后，只有大于设定的执行周期后才会执行第二次。

//underscore.js
function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function () {
        previous = options.leading === false ? 0 : Date.now() || new Date().getTime();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function () {
        var now = Date.now() || new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            // 判断是否设置了定时器和 trailing
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

    throttled.cancel = function () {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };

    return throttled;
};

函数节流的应用场景有:

48.原始类型有哪几种？null是对象吗？

.js中5种原始数据类型

number：整数/小数/NaN
string：
boolean：
null：
undefined：

Null类型是第二个只有一个值的数据类型，这个特殊的值是null，从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null值会返回“object”的原因

49.为什么console.log(0.2+0.1==0.3) //false

JavaScript 中的 number 类型就是浮点型，JavaScript 中的浮点数采用IEEE-754 格式的规定，这是一种二进制表示法，可以精确地表示分数，比如 1/2，1/8，1/1024，每个浮点数占 64 位。但是，二进制浮点数表示法并不能精确的表示类似 0.1 这样 的简单的数字，会有舍入误差。
由于采用二进制，JavaScript 也不能有限表示 1/10、1/2 等这样的分数。在二进制中，1/10(0.1)被表示为 0.00110011001100110011…… 注意 0011 是无限重复的，这是舍入误差造成的，所以对于 0.1 + 0.2 这样的运算，操作数会先被转成二进制，然后再计算

50.说一下JS中类型转换的规则？

值 转数字 转字符串 转布尔值
undefined NaN “undefined” false
null 0 “null” false
true 1 “true”
false 0 “false”
0 “0” false
-0 “0” false
NaN “NaN” false
Infinity “Infinity” true
-Infinity ”-Infinity” true
1(非零) “1” true
{}(任意对象) 见下文 见下文 true
0 ”” true
9 9 “9” true
”a” NaN 使用.join()方法 true
function(){}(任意函数) NaN 见下文 true

Number的原始类型转换规则

img

原始类型转换Number

Number的对象类型转换规则

传入实例M, 先调用M的valueOf(), 如果返回值V为基本数据类型, 则直接使用Number(V), 求最终返回值
如果T不属于基本数据类型, 则调用M的toString(), 如果返回值S为基本数据类型, 则直接使用Number(S),求最后的结果, 如果S不属于基本数据类型, 则直接返回NaN

img

对象类型转换1

img

对象类型转换2

String的原始类型转换规则

img

String原始类型转换

String 的对象类型转换规则

与Number的对象转换规则类似, 区别是: 先调用对象的toString(), 然后再调用valueOf()
其实正常情况下, 对象调用自身的toString()后, 对象就可以转换为string基本类型, valueOf() 没有机会被调用, 但万事有个例, 如果我们重新定义了对象的toString()方法,使其返回非基本类型的值, 那样就有机会调用对象的valueOf()方法了

img

String对象类型转换规则

Boolean的原始类型转换 和 对象类型转换

undefined,null,NaN,'',-0,+0皆为false, 其余为true

隐式类型转换

四则运算+, -, *, /

img

隐式类型转换之四则运算

51.深拷贝和浅拷贝的区别？如何实现

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。浅拷贝只复制对象的第一层属性
但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。对对象的属性进行递归复制

浅拷贝 实现方法

1、可以通过简单的赋值实现

类似上面的例子，当然，我们也可以封装一个简单的函数，如下：

 function simpleClone(initalObj) {    
      var obj = {};    
      for ( var i in initalObj) {
        obj[i] = initalObj[i];
      }    
      return obj;
    }

    var obj = {
      a: "hello",
      b:{
          a: "world",
          b: 21
        },
      c:["Bob", "Tom", "Jenny"],
      d:function() {
          alert("hello world");
        }
    }
    var cloneObj = simpleClone(obj); 
    console.log(cloneObj.b); 
    console.log(cloneObj.c);
    console.log(cloneObj.d);

    cloneObj.b.a = "changed";
    cloneObj.c = [1, 2, 3];
    cloneObj.d = function() { alert("changed"); };
    console.log(obj.b);
    console.log(obj.c);
    console.log(obj.d);

2、Object.assign()实现

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

var obj = { a: {a: "hello", b: 21} };

var initalObj = Object.assign({}, obj);

initalObj.a.a = "changed";

console.log(obj.a.a); //  "changed"

注意：当object只有一层的时候，是深拷贝，例如如下：

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = Object.assign({}, obj1);
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

深拷贝的实现方式

1、对象只有一层的话可以使用上面的：Object.assign()函数

2、转成 JSON 再转回来

var obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 10 } } <-- 沒被改到
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// false

用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。

可以封装如下函数

var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化对象
        newobj = JSON.parse(str); //还原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

3、递归拷贝

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : {};            
      arguments.callee(prop, obj[i]);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}
var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);
console.log(str.a);

4、使用Object.create()方法

直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}

5、jquery

jquery 有提供一个$.extend可以用来做 Deep Copy。

var $ = require('jquery');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);
// false

6、lodash

另外一个很热门的函数库lodash，也有提供_.cloneDeep用来做 Deep Copy。

var _ = require('lodash');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false

这个性能还不错，使用起来也很简单。

52.如何判断this？箭头函数的this是什么

1.谁作为拥有者调用它就指向谁

function a() { 
    console.log(this); 
}
var b  = {};
b.hehe = a;
b.hehe();
//这时候this指向b//常见的就是绑定事件
  1. bind谁就指向谁
function a() { 
    console.log(this); 
}
var b  = {};
var c = {};
b.hehe = a.bind(c);
b.hehe();
//这时候this指向c//如果你用bind的话

3.没有拥有者，直接调用，就指向window

function a() { 
    console.log(this); 
}
a();
//this指向window

4.call谁就是谁，apply谁就是谁，其实bind就是通过call和apply实现的

箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

53.== 和 ===的区别

1.===：三个等号我们称为等同符，当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不同时直接返回false。

例：100===“100” //返回false

abc===“abc” //返回false

‘abc’===“abc” //返回true

NaN===NaN //返回false

false===false //返回true

2.==：两个等号我们称为等值符，当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。

54.什么是闭包

说说你对闭包的理解

使用闭包的注意点

55. JavaScript原型，原型链 ? 有什么特点？

56. typeof()和instanceof()的用法区别

typeof（） 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。
它返回值是一个字符串，该字符串说明运算数的类型。
** instanceof() ** 运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型。

57.什么是变量提升

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 只有声明的变量会提升，初始化的不会。

var x =5;// 初始化 x  
var y =7;// 初始化 y  
  
elem = document.getElementById("demo");// 查找元素  
elem.innerHTML = x +" "\+ y;  // 5 7
varx =5;// 初始化 x  
  
elem = document.getElementById("demo");// 查找元素  
elem.innerHTML = x +" "\+ y;           // 显示 x 和 y  
  
vary =7;// 初始化 y

输出结果：x 为：5，y 为：undefined

y 输出了undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。
类似下列代码

var x = 5; // 初始化 x
var y;     // 声明 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

y = 7;    // 设置 y 为 7

1.函数声明会被提升 对于函数表达式，是不会提升的

1         //函数声明, 形如:
2         function show(){
3             console.log( '函数声明方式' );
4         }
5 
6         //函数表达式, 形如:
7         var show = function(){
8             console.log( '表达式方式' );
9         }

2.出现同名的函数声明，变量声明的时候， 函数声明会被优先提升，变量声明会被忽略

        show(); //你好
        var show;
        function show(){
            console.log( '你好' );
        }
        show = function(){
            console.log( 'hello' );
        }

上面这段代码，结果为什么会是 '你好'?
当出现同名的函数声明，变量声明的时候， 函数声明会被优先提升，变量声明会被忽略。 所以经过编译之后，就变成:

        function show(){
            console.log( '你好' );
        }
        show(); //你好
        show = function(){
            console.log( 'hello' );
        }
        show();//如果这里在调用一次，就是hello, 因为show函数体在执行阶段 被 重新赋值了

3.如果有同名的函数声明，后面的会覆盖前面的

        show(); //how are you
        var show;
        function show(){
            console.log( 'hello' );
        }    
        show = function(){
            console.log( '你好' );
        }
        function show(){
            console.log( 'how are you!' );
        }
//上面的代码经过编译之后，变成如下形式:
        function show(){
            console.log( 'how are you!' );
        }
        show(); //how are you
        show = function(){
            console.log( '你好' );
        }
        show(); //如果在这里再执行一次，结果：你好

58.all、apply以及bind函数内部实现是怎么样的

call, apply, bind都是改变函数执行的上下文，说的直白点就是改变了函数this的指向。不同的是：call和apply改变了函数的this,并且执行了该函数，而bind是改变了函数的this，并返回一个函数，但不执行该函数。

看下面的例子1：

var doThu = function(a, b) {
    console.log(this)
    console.log(this.name)
    console.log([a, b])
}
var stu = {
    name: 'xiaoming',
    doThu: doThu,
}
stu.doThu(1, 2) // stu对象 xiaoming [1, 2]
doThu.call(stu, 1, 2) // stu对象 xiaoming [1, 2]

由此可见，在stu上添加一个属性doThu，再执行这个函数，就将doThu的this指向了stu。而call的作用就与此相当，只不过call为stu添加了doThu方法后，执行了doThu，然后再将doThu这个方法从stu中删除。

下面来看call函数的内部实现原理：

Function.prototype.call = function(thisArg, args) {
    // this指向调用call的对象
    if (typeof this !== 'function') { // 调用call的若不是函数则报错
        throw new TypeError('Error')
    }
    thisArg = thisArg || window
    thisArg.fn = this   // 将调用call函数的对象添加到thisArg的属性中
    const result = thisArg.fn(...[...arguments].slice(1)) // 执行该属性
    delete thisArg.fn   // 删除该属性
    return result
}

apply的实现原理和call一样，只不过是传入的参数不同而已。下面只给出代码，不做解释：

Function.prototype.apply = function(thisArg, args) {
    if (typeof this !== 'function') { 
        throw new TypeError('Error')
    }
    thisArg = thisArg || window
    thisArg.fn = this
    let result
    if(args) {
        result = thisArg.fn(...args)
    } else {
        result = thisArg.fn()
    }
    delete thisArg.fn
    return result
}

bind的实现原理比call和apply要复杂一些，bind中需要考虑一些复杂的边界条件。bind后的函数会返回一个函数，而这个函数也可能被用来实例化:

Function.prototype.bind = function(thisArg) {
    if(typeof this !== 'function'){
        throw new TypeError(this + 'must be a function');
    }
    // 存储函数本身
    const _this  = this;
    // 去除thisArg的其他参数 转成数组
    const args = [...arguments].slice(1)
    // 返回一个函数
    const bound = function() {
        // 可能返回了一个构造函数，我们可以 new F()，所以需要判断
        if (this instanceof bound) {
            return new _this(...args, ...arguments)
        }
        // apply修改this指向，把两个函数的参数合并传给thisArg函数，并执行thisArg函数，返回执行结果
        return _this.apply(thisArg, args.concat(...arguments))
    }
    return bound
}

59.为什么会出现setTimeout倒计时误差？如何减少

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="message"></p>
    </body>
    <script type="text/javascript">
        var message = document.getElementById("message");
        var count = 1000;
        function animate() {
            var start = +new Date();
            message.innerHTML = count--;
            var finish = +new Date();
            setTimeout(animate, 1000 - (finish-start));
            
        }
        animate();
    </script>
</html>

本例实现了倒数1000秒的功能，我们在使用setTimeout的时候如果要一个函数每每隔1秒执行一次就会这样写

setTimeout(animate, 1000);
但是这样会忽略animate方法本身的运行时间，所以我们可以在执行animate方法的时候计算这个方法主要的语句的执行时间，之后在setTimeout中减去那个由于运行语句而耽搁的时间，从而实现更加精确的计时

60.谈谈你对JS执行上下文栈和作用域链的理解

执行上下文就是当前 JavaScript 代码被解析和执行时所在环境, JS执行上下文栈可以认为是一个存储函数调用的栈结构，遵循先进后出的原则。

作用域链: 无论是 LHS 还是 RHS 查询，都会在当前的作用域开始查找，如果没有找到，就会向上级作用域继续查找目标标识符，每次上升一个作用域，一直到全局作用域为止。

61.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？

new:

  1. 创建一个新对象。
  2. 这个新对象会被执行[[原型]]连接。
  3. 将构造函数的作用域赋值给新对象，即this指向这个新对象.
  4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
function new(func) {
    lat target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

字面量创建对象，不会调用 Object构造函数, 简洁且性能更好;

new Object() 方式创建对象本质上是方法调用，涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的 堆栈信息，方法调用结束后，还要释放该堆栈，性能不如字面量的方式。

通过对象字面量定义对象时，不会调用Object构造函数。

62. prototype 和 proto 区别是什么？

prototype是构造函数的属性。

__proto__是每个实例都有的属性，可以访问 [[prototype]] 属性。

实例的__proto__与其构造函数的prototype指向的是同一个对象。

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student('jack');
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true

63.使用ES5实现一个继承？

组合继承(最常用的继承方式)

function SuperType() {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {
    console.log(this.age);
}

64.取数组的最大值（ES5、ES6）

// ES5 的写法
Math.max.apply(null, [14, 3, 77, 30]);

// ES6 的写法
Math.max(...[14, 3, 77, 30]);

// reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ? accumulator : currentValue
});

65. ES6 新的特性有哪些？

  1. 新增了块级作用域(let,const)
  2. 提供了定义类的语法糖(class)
  3. 新增了一种基本数据类型(Symbol)
  4. 新增了变量的解构赋值
  5. 函数参数允许设置默认值，引入了rest参数，新增了箭头函数
  6. 数组新增了一些API，如 isArray / from / of 方法;数组实例新增了 entries()，keys() 和 values() 等方法
  7. 对象和数组新增了扩展运算符
  8. ES6 新增了模块化(import/export)
  9. ES6 新增了 Set 和 Map 数据结构
  10. ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例
  11. ES6 新增了生成器(Generator)和遍历器(Iterator)

66. promise 有几种状态, Promise 有什么优缺点 ?

promise有三种状态: fulfilled, rejected, pending.

Promise 的优点:

  1. 一旦状态改变，就不会再变，任何时候都可以得到这个结果
  2. 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

Promise 的缺点:

  1. 无法取消 Promise
  2. 当处于pending状态时，无法得知目前进展到哪一个阶段

67. Promise构造函数是同步还是异步执行，then呢 ?promise如何实现then处理 ?

Promise的构造函数是同步执行的。then 是异步执行的。

68. Promise和 setTimeout的区别 ?

Promise 是微任务，setTimeout 是宏任务，同一个事件循环中，promise.then总是先于 setTimeout 执行。

69.如何实现 Promise.all ?

要实现 Promise.all,首先我们需要知道 Promise.all 的功能：

  1. 如果传入的参数是一个空的可迭代对象，那么此promise对象回调完成(resolve),只有此情况，是同步执行的，其它都是异步返回的。
  2. 如果传入的参数不包含任何 promise，则返回一个异步完成.

promises 中所有的promise都“完成”时或参数中不包含 promise 时回调完成。

  1. 如果参数中有一个promise失败，那么Promise.all返回的promise对象失败
  2. 在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组
Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let index = 0;
        let result = [];
        if (promises.length === 0) {
            resolve(result);
        } else {
            setTimeout(() => {
                function processValue(i, data) {
                    result[i] = data;
                    if (++index === promises.length) {
                        resolve(result);
                    }
                }
                for (let i = 0; i < promises.length; i++) {
                    //promises[i] 可能是普通值
                    Promise.resolve(promises[i]).then((data) => {
                        processValue(i, data);
                    }, (err) => {
                        reject(err);
                        return;
                    });
                }
            })
        }
    });
}

70.如何实现 Promise.finally ?

不管成功还是失败，都会走到finally中,并且finally之后，还可以继续then。并且会将值原封不动的传递给后面的then.

Promise.prototype.finally = function (callback) {
    return this.then((value) => {
        return Promise.resolve(callback()).then(() => {
            return value;
        });
    }, (err) => {
        return Promise.resolve(callback()).then(() => {
            throw err;
        });
    });
}

71.如何判断img加载完成

一、load事件


<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - load event</title>

</head> 

<body>

    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        img1.onload = function() {

            p1.innerHTML = 'loaded'

        }

    </script>

</body>

</html>

测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。

二、readystatechange事件

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - readystatechange event</title>

</head> 

<body>

    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        img1.onreadystatechange = function() {

            if(img1.readyState=="complete"||img1.readyState=="loaded"){ 

                p1.innerHTML = 'readystatechange:loaded'

            }

        }

    </script>

</body>

</html>

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。

三、img的complete属性

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - complete attribute</title>

</head> 

<body>

    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        function imgLoad(img, callback) {

            var timer = setInterval(function() {

                if (img.complete) {

                    callback(img)

                    clearInterval(timer)

                }

            }, 50)

        }

        imgLoad(img1, function() {

            p1.innerHTML('加载完毕')

        })

    </script>

</body>

</html>

轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。

72.如何阻止冒泡？

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。

//阻止冒泡行为 
function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

73.如何阻止默认事件？

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

74. ajax 请求时，如何解释 json 数据

75.json和jsonp的区别?

json返回的是一串json格式数据；而jsonp返回的是脚本代码（包含一个函数调用）

jsonp的全名叫做json with padding，就是把json对象用符合js语法的形式包裹起来以使其他的网站可以请求到，也就是将json封装成js文件传过去。

76.如何用原生js给一个按钮绑定两个onclick事件？

Var  btn=document.getElementById(‘btn’);
//事件监听 绑定多个事件
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}

77.拖拽会用到哪些事件

· dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

· dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

· dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

· dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

· drag:拖拽期间在被拖拽元素上连续触发

· drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.

· dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

78. document.write和 innerHTML的区别

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

79.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？

(1)、bind 【jQuery 1.3之前】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：bind(type,[data],function(eventObject))；

特点：

(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。

(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。

实例如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之后】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：live(type, [data], fn);

特点：

(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。

(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。

(3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即(“ul”").live...可以，但("body").find("ul").live...不行；

实例如下：$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定义和用法：将监听事件绑定在就近的父级元素上

语法：delegate(selector,type,[data],fn)

特点：

(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。

(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。

实例如下：

$("#info_table").delegate("td","click",function(){/显示更多信息/});

$("table").find("#info").delegate("td","click",function(){/显示更多信息/});

(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

定义和用法：将监听事件绑定到指定元素上。

语法：on(type,[selector],[data],fn)

实例如下：$("#info_table").on("click","td",function(){/显示更多信息/});参数的位置写法与delegate不一样。

说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。

总结 ：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()

80.浏览器是如何渲染页面的？

渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

81.$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

82. jquery中.get()提交和.post()提交有区别吗？

相同点：都是异步请求的方式来获取服务端的数据；

异同点：

1、请求方式不同：.get() 方法使用GET方法来进行异步请求的。.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

83.对前端路由的理解？前后端路由的区别？

前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。

http://10.0.0.1/
http://10.0.0.1/#/about
http://10.0.0.1/#/concat

服务端路由：每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端JS再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。

前端路由：每跳转到不同的URL都是使用前端的锚点路由，实际上只是JS根据URL来操作DOM元素，根据每个页面需要的去服务端请求数据，返回数据后和模板进行组合，当然模板有可能是请求服务端返回的，这就是 SPA 单页程序。

在js可以通过window.location.hash读取到路径加以解析之后就可以响应不同路径的逻辑处理。

history 是 HTML5 才有的新 API，可以用来操作浏览器的 session history (会话历史)。基于 history 来实现的路由可以和最初的例子中提到的路径规则一样。

H5还新增了一个hashchange事件，也是很有用途的一个新事件：

当页面hash(#)变化时，即会触发hashchange。锚点Hash起到引导浏览器将这次记录推入历史记录栈顶的作用，window.location对象处理“#”的改变并不会重新加载页面，而是将之当成新页面，放入历史栈里。并且，当前进或者后退或者触发hashchange事件时，我们可以在对应的事件处理函数中注册ajax等操作！
但是hashchange这个事件不是每个浏览器都有，低级浏览器需要用轮询检测URL是否在变化，来检测锚点的变化。当锚点内容(location.hash)被操作时，如果锚点内容发生改变浏览器才会将其放入历史栈中，如果锚点内容没发生变化，历史栈并不会增加，并且也不会触发hashchange事件。

84.手写一个类的继承

继承的形式有很多中，js高程里面归纳了其中，我简单说一下前三种。
1.原型继承

function Parent(){
    this.name = "parent";
}
Parent.prototype.getName = function(){
    return this.name;
}

function Child(){
    this.name = "child";
}

//继承parent
Child.prototype = new Parent();

2.构造函数继承

function Animal(name){
    this.name = name;
    this.eat = function(){
        consoel.log(this.name + "吃饭");
    }
}
var cat = new Animal("maomi");
cat.name;
cat.eat();

3.组合继承

85.XMLHttpRequest：XMLHttpRequest.readyState;状态码的意思

XmlHttpRequest(Ajax)状态码readyState
当一个XMLHttpRequest初次创建时，这个属性的值是从0开始，知道接收完整的HTTP响应，这个值增加到4。有五种状态：

状态0 (请求未初始化)： (XMLHttpRequest)对象已经创建或已被abort()方法重置，但还没有调用open()方法；

状态1 (载入服务器连接已建立)：已经调用open() 方法，但是send()方法未调用，尚未发送请求；

状态2 (载入完成，请求已接收)： send()方法已调用，HTTP请求已发送到web服务器，请求已经发送完成，未接收到响应；

状态3 (交互，请求处理中)：所有响应头部都已经接收到。响应体开始接收但未完成，即可以接收到部分响应数据；

状态4 (请求完成，且相应已就绪)：已经接收到了全部数据，并且连接已经关闭。

上一篇 下一篇

猜你喜欢

热点阅读