阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 高级函数

      JS是一种极其灵活的语言,具有多种使用风格。一般来说,编写 JavaScript 要么使用过程方式,要么使用面向对象方式。然而,由于它天生的动态属性,这种语言还能使用更为复杂和有趣的模式。这些技巧要利用 ECMAScript 的语言特点、BOM扩展和 DOM 功能来获得强大的效果。

      高级函数

      函数是JS中常用的功能;本质是十分简单的,实现高内聚,低耦合;因为用在不同的场景有不同的功能;一些额外的功能可以通过使用闭包来实现。此外,由于所有的函数都是对象,所以使用函数指针非常简单。这些令 JavaScript 函数不仅有趣而且强大。以下几节描绘了几种在 JavaScript 中使用函数的高级方法。

      • 数据类型的安全检测
      • 构造函数的安全作用域
      • 惰性载入函数
      • 函数绑定
      • 函数柯里化

      数据类型的安全检测

      检测数据类型,最简单的检测方法是typeof , 但是typeof在检测对象数据类型的时候,太笼统了,不精确;

      instanceof 操作符在存在多个全局作用域(像一个页面包含多个 frame)的情况下,也是问题多多。

      console.log(value instanceof Array);
      

      以上代码要返回 true , value 必须是一个数组,而且还必须与 Array 构造函数在同个全局作用域中。(别忘了, Array 是 window 的属性。)如果 value 是在另个 frame 中定义的数组,那么以上代码就会返回 false 。

      解决办法

      在任何值上调用 Object 原生的 toString() 方法,都会返回一个 [object NativeConstructorName] 格式的字符串。每个类在内部都有一个 [[Class]] 属性,这个属性中就指定了上述字符串中的构造函数名。

      var testStr = 'cccccccc';
      var testAry = [2,3,4,5];
      var testObj = {
          name:"zhu",
          age:26,
          gender:"man"
      };
      
      console.log(Object.prototype.toString.call(testStr));//[object String]
      console.log({}.toString.call(testAry));//[object Array]
      console.log({}.toString.call(testObj));//[object Object]
      

      其中 Object.prototype.toString,可以简写为**{}.toString.**;

      function isArray(value){
          return {}.toString.call(value) == "[object Array]";
      }
      

      这样就可以安全检测是不是数组了;

      “[object Array]“的

      • 第一个object是因为用的是对象的原型上的;所以是object(小写的o);
      • 第二个Array是因为属于数组类,所以Array第一个字母是大写的A;

      这一技巧也广泛应用于检测原生 JSON 对象。 Object 的 toString() 方法不能检测非原生构造函数的构造函数名。因此,开发人员定义的任何构造函数都将返回[object Object]。有些 JavaScript 库会包含与下面类似的代码。

      var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON) =="[object JSON]";
      

      在 Web 开发中能够区分原生与非原生 JavaScript 对象非常重要。只有这样才能确切知道某个对象到底有哪些功能。这个技巧可以对任何对象给出正确的结论。

      请注意, Object.prototpye.toString() 本身也可能会被修改。上面的技巧假设 Object.prototpye.toString() 是未被修改过的原生版本。

      构造函数的安全作用域

      当构造函数没有使用new生成实例,直接使用的时候;由于构造函数中 this 对象是在运行时绑定的 ; this关键字会映射到全局对象window上;导致错误对象属性的意外增加。

      function Person(name,age,job){
          this.name=name;
          this.age=age;
          this.job=job;
      }
      
      var person=Person("zhu",26,"WEB");
      console.log(person);//undefined;
      console.log(window.name);//"zhu;
      console.log(window.age);//26;
      console.log(window.job);//WEB";
      

      这里,原本针对 Person 实例的三个属性被加到 window 对象上,因为构造函数是作为普通函数调用的,忽略了 new 操作符。这个问题是由 this 对象的晚绑定造成的,在这里 this 被解析成了 window对象。由于 window 的 name 属性是用于识别链接目标和 frame 的,所以这里对该属性的偶然覆盖可能会导致该页面上出现其他错误。这个问题的解决方法就是创建一个作用域安全的构造函数

      作用域安全的构造函数在进行任何更改前,首先确认 this 对象是正确类型的实例。如果不是,那么会创建新的实例并返回。

      如下:

      function Person(name,age,job){
          if(this instanceof Person){
              console.log("Person用法 - 正确");
              this.name=name;
              this.age=age;
              this.job=job;
          }else{
              console.log("Person用法 - 不正确");
              return new Person(name,age,job);
          }
      }
      var person=Person("hahahah",26,"WEB");
      console.log(person);
      console.log(person.name);//"hahahah";
      console.log(window.name);//""
      console.log(typeof window.name);//string
      console.log(window.age);//26;
      console.log(window.job);//WEB";
      

      这段代码中的 Person 构造函数添加了一个检查并确保 this 对象是 Person 实例的 if 语句,它表示要么使用 new 操作符,要么在现有的 Person 实例环境中调用构造函数。任何一种情况下,对象初始化都能正常进行。如果 this 并非 Person 的实例,那么会再次使用 new 操作符调用构造函数并返回结果。最后的结果是,调用 Person 构造函数时无论是否使用 new 操作符,都会返回一个 Person 的新实例,这就避免了在全局对象上意外设置属性。

      ** 实现这个模式后,你就锁定了可以调用构造函数的环境。如果你使用构造函数窃取模式的继承且不使用原型链,那么这个继承很可能被破坏。**

      function Parent(name,age,job){
          if(this instanceof Parent){
              console.log("Chilren用法 - 正确");
              this.name=name;
              this.age=age;
              this.job=job;
          }else{
              console.log("Chilren用法 - 不正确");
              return new Parent(name,age,job);
          }
      }
      function Chilren(parentName){
          Parent.call(this,"child","1","null");
          this.name=parentName;
      }
      
      var target=new Chilren("ooooo");
      console.log(target);//{name: "ooooo"}
      console.log(target.age);//undefined
      

      在这段代码中, Parent 构造函数是作用域安全的,然而 Chilren 构造函数则不是。新创建一个 Chilren 实例之后,这个实例应该通过 Parent.call() 来继承 Parent 的 age 属性。但是,由于 Parent 构造函数是作用域安全的, this 对象并非 Parent 的实例,所以会创建并返回一个新的 Parent 对象。 Chilren 构造函数中的 this 对象并没有得到增长,同时 Parent.call() 返回的值也没有用到,所以 Chilren 实例中就不会有 age 属性。

      function Parent(name,age,job){
          if(this instanceof Parent){
              console.log("Chilren用法 - 正确");
              this.name=name;
              this.age=age;
              this.job=job;
          }else{
              console.log("Chilren用法 - 不正确");
              return new Parent(name,age,job);
          }
      }
      function Chilren(parentName){
          Parent.call(this,"child","1","null");
          this.name=parentName;
      }
      Chilren.prototype = new Parent();//【加上这一行代码,让Chilren的实例可以指到Chilren即可】
      var target=new Chilren("ooooo");
      console.log(target);//Chilren {name: "ooooo", age: "1", job: "null"}
      console.log(target.age);//1
      

      上面这段重写的代码中,一个 Chilren 实例也同时是一个 Parent 实例,所以 Parent.call()会照原意执行,最终为 Chilren 实例添加了 age 属性。

      多个程序员在同一个页面上写 JavaScript 代码的环境中,作用域安全构造函数就很有用了。届时,对全局对象意外的更改可能会导致一些常常难以追踪的错误。除非你单纯基于构造函数窃取来实现继承,推荐作用域安全的构造函数作为最佳实践。

      惰性载入函数

      惰性载入表示函数执行的分支仅会发生一次

      function createXHR(){
          if(typeof XMLHttpRequest != 'undefined'){
              console.log("支持 XMLHttpRequest");
              return new XMLHttpRequest();
          }else if(typeof ActiveXObject != "undefined"){
              console.log("支持 ActiveXObject");
              if (typeof arguments.callee.activeXString != "string"){
                  var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
                  for (var i=0,len=versions.length; i < len; i++){
                      try {
                          new ActiveXObject(versions[i]);
                          arguments.callee.activeXString = versions[i];
                          break;
                      } catch (ex){
                          //跳过
                      }
                  }
              }
              return new ActiveXObject(arguments.callee.activeXString);
          }else{
              throw new Error("浏览器不支持XHR")
          }
      }
      

      每次调用 createXHR() 的时候,它都要对浏览器所支持的能力仔细检查。首先检查内置的 XHR,然后测试有没有基于 ActiveX 的 XHR,最后如果都没有发现的话就抛出一个错误。每次调用该函数都是这样,即使每次调用时分支的结果都不变:如果浏览器支持内置 XHR,那么它就一直支持了,那么这种测试就变得没必要了。即使只有一个 if 语句的代码,也肯定要比没有 if 语句的慢,所以如果 if 语句不必每次执行,那么代码可以运行地更快一些。解决方案就是称之为惰性载入的技巧

      有两种实现惰性载入的方式

      • ** 第一种方法是函数的重写;**,执行一次后再重写;

      在函数被调用时再处理函数。在第一次调用的过程中,该函数会被覆盖为另外一个按合适方式执行的函数,这样任何对原函数的调用都不用再经过执行的分支了。

      function createXHR(){
          if(typeof XMLHttpRequest != 'undefined'){
              /*return new XMLHttpRequest();*/
              createXHR=function(){
                  return new XMLHttpRequest();
              }
          }else if(typeof ActiveXObject != "undefined"){
              createXHR=function(){
                  if (typeof arguments.callee.activeXString != "string"){
                      var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
                      for (var i=0,len=versions.length; i < len; i++){
                          try {
                              new ActiveXObject(versions[i]);
                              arguments.callee.activeXString = versions[i];
                              break;
                          } catch (ex){
                              //跳过
                          }
                      }
                  }
                  return new ActiveXObject(arguments.callee.activeXString);
              };
          }else{
              createXHR=function(){
                  throw new Error("浏览器不支持XHR")
              };
          }
      }
      console.log(createXHR.toString());//createXHR原样打印出来;
      
      //执行后,createXHR更改为最终的结果;
      createXHR();
      console.log(createXHR.toString());//createXHR已经是改写后的createXHR了
      

      createXHR运行之前,打印的时候,会把这个函数原样打印出来;

      createXHR运行之后,会被重新改写了,之后的createXHR是改写后的createXHR;

      在chrome等标准浏览器会改写为下面这样的;

      function (){
          return new XMLHttpRequest();
      }
      

      在这个惰性载入的 createXHR() 中, if 语句的每一个分支都会为 createXHR 变量赋值,有效覆盖了原有的函数。最后一步便是调用新赋的函数。下一次调用 createXHR() 的时候,就会直接调用被分配的函数,这样就不用再次执行 if 语句了。

      第二种方法是:变量接收自执行函数

      是在声明函数时就指定适当的函数。这样,第一次调用函数时就不会损失性能了,而在代码首次加载时会损失一点性能。

      //console.log(createXHR.toString());//这么写会报错
      var createXHR=(function (){
          if(typeof XMLHttpRequest != 'undefined'){
              /*return new XMLHttpRequest();*/
              return function(){
                  return new XMLHttpRequest();
              }
          }else if(typeof ActiveXObject != "undefined"){
              return function(){
                  if (typeof arguments.callee.activeXString != "string"){
                      var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
                      for (var i=0,len=versions.length; i < len; i++){
                          try {
                              new ActiveXObject(versions[i]);
                              arguments.callee.activeXString = versions[i];
                              break;
                          } catch (ex){
                              //跳过
                          }
                      }
                  }
                  return new ActiveXObject(arguments.callee.activeXString);
              };
          }else{
              return function(){
                  throw new Error("浏览器不支持XHR")
              };
          }
      })();
      console.log(createXHR.toString());//createXHR已经是改写后的createXHR了
      
      //执行后,createXHR
      createXHR();
      
      console.log(createXHR.toString());//createXHR已经是改写后的createXHR了
      

      使用的技巧是创建一个匿名、自执行的函数,用以确定应该使用哪一个函数实现。实际的逻辑都一样。不一样的地方就是第一行代码(使用 var 定义函数)、新增了自执行的匿名函数,另外每个分支都返回正确的函数定义,以便立即将其赋值给 createXHR() 。

      惰性载入函数的优点是只在执行分支代码时牺牲一点儿性能。至于哪种方式更合适,就要看你的具体需求而定了。不过这两种方式都能避免执行不必要的代码

      函数绑定

      函数绑定要创建一个函数,可以在特定的 this 环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用,以便在将函数作为变量传递的同时保留代码执行环境。

      <script>
          //这里是事件工具库;
          var EventUtil = {
              addHandler: function (element, type, handler) {
                  if (element.addEventListener) {
                      element.addEventListener(type, handler, false);
                  } else if (element.attachEvent) {
                      element.attachEvent("on" + type, handler);
                  } else {
                      element["on" + type] = handler;
                  }
              },
              removeHandler: function (element, type, handler) {
                  if (element.removeEventListener) {
                      element.removeEventListener(type, handler, false);
                  } else if (element.detachEvent) {
                      element.detachEvent("on" + type, handler);
                  } else {
                      element["on" + type] = null;
                  }
              },
      
              getEvent: function (event) {
                  return event ? event : window.event;
              },
              getTarget: function (event) {
                  return event.target || event.srcElement;
              },
              preventDefault: function (event) {
                  if (event.preventDefault) {
                      event.preventDefault();
                  } else {
                      event.returnValue = false;
                  }
              },
              stopPropagation: function (event) {
                  if (event.stopPropagation) {
                      event.stopPropagation();
                  } else {
                      event.cancelBubbles = true;
                  }
              },
              getRelatedTarget: function (event) {
                  if (event.relatedTarger) {
                      return event.relatedTarget;
                  } else if (event.toElement) {
                      return event.toElement;
                  } else if (event.fromElement) {
                      return event.fromElement;
                  } else { return null; }
      
              }
      
          };
          //这里是绑定函数的代码;
          var handler={
              message:"Event handler",
              handleClick:function(e){
                  console.log(this.message);
              }
          };
          var oBtn=document.getElementById("btn");
          EventUtil.addHandler(oBtn,"click",handler.handleClick);
      
      </script>
      

      点击后,输出的是undefined;并不是"Event hanler”;原因是没有保存handler.handClick()的运行环境,this对象最后指的是btn这个ID的按钮;而非hanler; 可以通过代码验证;

      var oBtn=document.getElementById("btn");
      oBtn.message="这是ID为btn的message属性";
      EventUtil.addHandler(oBtn,"click",handler.handleClick);
      

      解决办法:包一层函数

      var oBtn=document.getElementById("btn");
      oBtn.message="这是ID为btn的message属性";
      EventUtil.addHandler(oBtn,"click",function(e){
          handler.handleClick(e)
      });
      

      这个解决方案在 onclick 事件处理程序内使用了一个闭包直接调用 handler.handleClick() 。当然,这是特定于这段代码的解决方案。创建多个闭包可能会令代码变得难于理解和调试。因此,很多JavaScript 库实现了一个可以将函数绑定到指定环境的函数。这个函数一般都叫 bind() 。

      function bind(fn,context){
          return function(){
              return fn.apply(context,arguments);
          }
      }
      //这里是绑定函数的代码;
      var handler={
          message:"Event handler",
          handleClick:function(e){
              console.log(this.message+":"+ e.type);
          }
      };
      var oBtn=document.getElementById("btn");
      oBtn.message="这是ID为btn的message属性";
      EventUtil.addHandler(oBtn,"click",bind(handler.handleClick,handler));
      

      handler.handleClick() 方法和平时一样获得了 event 对象,因为所有的参数都通过被绑定的函数直接传给了它。

      ECMAScript 5 为所有函数定义了一个原生的 bind() 方法,进一步简单了操作。换句话说,你不用再自己定义 bind() 函数了,而是可以直接在函数上调用这个方法。

      通过输出到控制台查看下;

      console.dir(bind);
      

      //这里是绑定函数的代码;
      var handler={
          message:"Event handler",
          handleClick:function(e){
              console.log(this.message+":"+ e.type);
          }
      };
      var oBtn=document.getElementById("btn");
      oBtn.message="这是ID为btn的message属性";
      //EventUtil.addHandler(oBtn,"click",bind(handler.handleClick,handler));
      EventUtil.addHandler(oBtn,"click",handler.handleClick.bind(handler));//原生的bind方法;
      

      原生的 bind() 方法与前面介绍的自定义 bind() 方法类似,都是要传入作为 this 值的对象。支持原生 bind() 方法的浏览器有 IE9+、Firefox 4+和 Chrome。

      只要是将某个函数指针以值的形式进行传递,同时该函数必须在特定环境中执行,被绑定函数的效用就突显出来了。它们主要用于**事件处理程序以及 setTimeout() 和 setInterval() **。然而,被绑定函数与普通函数相比有更多的开销,它们需要更多内存,同时也因为多重函数调用稍微慢一点,所以最好只在必要时使用。

      函数柯里化

      与函数绑定紧密相关的主题是函数柯里化(function currying),它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的:使用一个闭包返回一个函数。两者的区别在于,当函数被调用时,返回的函数还需要设置一些传入的参数

      function add(arg1,arg2){
          return arg1+arg2;
      }
      
      function curriesAdd(num2){
          return add(5,num2);
      }
      console.log(add(2,3));//5
      console.log(curriesAdd(5));//10
      

      这段代码定义了两个函数: add() 和 curriedAdd() 。后者本质上是在任何情况下第一个参数为 5的 add() 版本。尽管从技术上来说 curriedAdd() 并非柯里化的函数,但它很好地展示了其概念

      柯里化函数通常由以下步骤动态创建:调用另一个函数并为它传入要柯里化的函数和必要参数。下面是创建柯里化函数的通用方式。

      function curry(fn){
          var args=Array.prototype.slice.call(arguments,1);
          return function (){
              var innerArgs=Array.prototype.slice.call(arguments);
              var finnalArgs=args.concat(innerArgs);
              console.log("args->"+args+"  innerArgs->"+innerArgs+"   finnalArgs->"+finnalArgs);
              return fn.apply(null,finnalArgs);
          }
      }
      
      function add(arg1,arg2){
          return arg1+arg2;
      }
      
      var curriedAdd = curry(add, 5);
      console.log(curriedAdd(3)); //当调用 curriedAdd() 并传入3时,3会成为add()的第二个参数,同时第一个参数依然是5,最后结果便是和8。
      

      也可以第一次直接把2个参数传进去;

      var curriedAdd = curry(add, 5, 12);
      console.log(curriedAdd()); //17 	在这里,柯里化的 add() 函数两个参数都提供了,所以以后就无需再传递它们了。
      

      函数柯里化还常常作为函数绑定的一部分包含在其中,构造出更为复杂的 bind() 函数。

      //这里是绑定函数的代码;
      var handler = {
          message: "Event handled",
          handleClick: function(name, event){
              console.log(this.message + ":"+ name + ":"+ event.type);
          }
      };
      function bind(fn,context){
          var args=Array.prototype.slice.call(arguments,2);
          return function (){
              var innerArgs=Array.prototype.slice.call(arguments);
              var finnalArgs=args.concat(innerArgs);
              console.log("args->"+args+"  innerArgs->"+innerArgs+"   finnalArgs->"+finnalArgs);
              return fn.apply(context,finnalArgs);
          }
      }
      
      var oBtn=document.getElementById("btn");
      EventUtil.addHandler(oBtn,"click",bind(handler.handleClick, handler, "btn"));
      

      JavaScript 中的柯里化函数和绑定函数提供了强大的动态函数创建功能。使用 bind() 还是 curry()要根据是否需要 object 对象响应来决定。它们都能用于创建复杂的算法和功能,当然两者都不应滥用,因为每个函数都会带来额外的开销。

      目录
      目录