HTML、CSS、Javascript基础

142 阅读6分钟

1、javascript的闭包

  简单来说就是一个函数能访问外部函数的变量,这就是闭包。

function a(x){
    var item = 3;
    function b(y){
        console.log(x+y+item);
    }
}

  a函数中的b函数就是闭包了,b函数可以使用a函数的局部变量,参数。最典型的闭包如下所示,将定义在函数中的函数作为返回值。

function a(x){
    var item = 3;
    function b(y){
        console.log(x+y+item);
    }
    return b;
}

闭包的缺点:因为内部闭包函数可以访问外部函数的变量,所以外部函数的变量不能被释放,如果闭包嵌套过多,会导致内存占用大,要合理使用闭包。


2、new操作符到底做了什么?

首先,new操作符为我们创建了一个新的空对象,然后this变量指向该对象。
其次,空对象的原型指向构造函数的原型。
最后,改变构造函数内部的this指向。


3、改变函数内部this指针的指向函数。

  call和apply,假设要改变fn函数内部的this指向,指向obj,那么可以 fn.call(obj);或者 fn.apply(obj);那么问题来了,call和apply的区别是什么?
  其实call和apply的区别在于参数,他们两个的第一个参数都是一样的,表示调用该函数的对象,apply的第二个参数是数组,是[arg1, arg2, arg3]这种形式,而call是 arg1, arg2, arg3 这样的形式。还有一个bind函数。
  var bar = fn.bind(obj);那么fn中的this就指向obj对象了,bind函数返回新的函数,这个函数内的this指针指向obj对象。


4、javascript的作用域和作用域链。

  Javascript的作用域指的是变量的作用范围,内部作用域由函数的形参、实参、局部变量和函数构成,内部作用域和外部作用域一层层的链接起来形成作用域链。
  当在函数内部要访问一个变量的时候,首先查找自己内部作用域有没有这个变量,如果没有就到外部的作用域去查找,还是没有的话,就到再外面一层作用域中找,直到window所在的作用域,每个函数在声明的时候就默认有一个外部作用域链存在了。


5、ajax的优缺点

优点:
(1)无刷新更新数据:ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。
(2)异步与服务器通信:ajax使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。
(3)前端和后端负载平衡:ajax可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带的租用成本,并且减轻服务器的负担。ajax的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。
(4)基于标准被广泛支持:ajax是基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户端允许Javascript在浏览器上执行。
(5)界面与应用分离:ajax使Web中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的Web应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点:
(1)ajax干掉了back和history功能,即对浏览器机制的破坏
  在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差距非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在ajax应用程序中,这将无法实现。
  后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的。

解决方案:可以使用url片段标识符(通常被称为锚点,即url中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏览器允许Javascript动态更新锚点,这使得ajax应用程序能够在更新显示内容的同时更新锚点。)这个解决方法也同时解决了不支持后退按钮的问题。

(2)ajax的安全问题
  ajax技术带来很好用户体验的同时也给IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露出比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚本攻击、sql注入和基于Credentials的安全漏洞等等。

(3)对搜索引擎支持比较弱
  如果使用不当,ajax会增大网络数据的流量,从而降低整个系统的性能。

(4)破坏程序的异常处理机制
  

(5)违背url和资源定位的初衷
  例如,我给你一个url地址,如果采用了ajax技术,也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。


6、用代码实现一个简易的jsonp demo

export function jsonp(url, data, callback) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data);
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    const callbackSymbol = `cb${Math.floor(Math.random() * 1000)}`;
    if (callback) {
      url += `&${callback}=${callbackSymbol}`;
    } else {
      url += `&callback=${callbackSymbol}`;
    }
    window[callbackSymbol] = function(res) {
      document.querySelector('head').removeChild(script);
      delete window[callbackSymbol];
      resolve(res);
    };
    script.setAttribute('src', url);
    document.querySelector('head').appendChild(script);
  });
}