【坑】JavaScript 对象方法执行的上下文

这是一个因为对 JavaScript 函数上下文理解不够深刻而遇到的坑。

背景

在表单验证中，利用高阶函数，抽象一个能够返回特定验证逻辑的验证函数：

// 正则匹配
const getParser = (type) => {
  switch (type) {
    case 'chname':
      return /^([\u4e00-\u9fa5]+|([a-zA-Z]+\s?)+)$/g;
    case 'email':
      return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
    case 'phone':
      return /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    case 'password':
      return /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9!@#$%^&*()]{8,16}$/;
    default:
      return () => false;
  }
};
 
const getMatch = (value) => `${value}`.match;
const isValid = (value, type) => getMatch(value)(getParser(type));

isValid('12345678901', 'phone');

问题

执行 getMatch(value)(getParser(type)) 的时候，没法完成验证，程序陷入中止，没法往下执行。

缘由

在执行形如 var a = obj.func 的代码的时候，咱们觉得获得的变量 a 的上下文是 obj，而后执行 a() 的时候，就会跟执行 obj.func() 同样；然而实际上，获得的 a 只是一个单纯的函数，并不会自动绑定 obj 为上下文。

再来看上面的代码的最后一句：

const isValid = (value, type) => getMatch(value)(getParser(type));

经过 getMatch(value) 获得一个 match 方法，可是与预期不一样，此时获得的 match 方法的上下文并非 value，于是会执行失败。

解决办法

知道了缘由，很明显解决办法就是为要使用的 match 方法绑定上下文。在 Javascript 中，有不少种方法能够实现：

/// bind
const getMatch = (value) => `${value}`.match.bind(value);
const isValid = (value, type) => getMatch(value)(getParser(type));

/// call
const getMatch = (value) => `${value}`.match;
const isValid = (value, type) => getMatch(value).call(value, getParser(type));

/// apply
const getMatch = (value) => `${value}`.match;
const isValid = (value, type) => getMatch(value).apply(value, [getParser(type)]);

结论

JavaScript 的面向对象特性，比想象中还要弱一些。根本没有什么 “类方法” ，全部形如 obj.func1() 的点操做方法执行，只不过是将 obj 做为上下文去执行 func1 函数罢了。须要特别注意的是，只有在点操做以后立刻执行，才会有上下文，给人形成是 “调用了对象 obj 里面的 func1 方法” 的假象；若是如上文描述那样进行了赋值操做 func2 = obj.func1，则在执行 func2 的时候就不会有什么上下文了。

参考文章

Javascript 中的上下文，个人认识的三个阶段
Javascript中的Bind，Call和Apply