关于javascript:一句有趣的JS代码

6次阅读

共计 3433 个字符，预计需要花费 9 分钟才能阅读完成。

难度：中等

咱们常常在框架级的源码中看到相似如下的一句代码，比方：

var toStr1 = Function.prototype.call.bind(Object.prototype.toString);

在这一句代码中既应用 call 办法，同时也应用 bind 办法，乍看之下，有点晕！这到底是想干嘛？

不妨，咱们调用看看，传入不同的类型试试，成果如下：

console.log(toStr1({}));      // "[object Object]"
console.log(toStr1([]));      // "[object Array]"
console.log(toStr1(123));     // "[object Number]"
console.log(toStr1("abc"));   // "[object String]"
console.log(toStr1(new Date));// "[object Date]"

从后果中能够看到该办法的次要性能是用于检测对象的类型。但通常类型检测，咱们可能更多地看到如下代码实现：

var toStr2 = obj => Object.prototype.toString.call(obj);

console.log(toStr2({}));      // "[object Object]"
console.log(toStr2([]));      // "[object Array]"
console.log(toStr2(123));     // "[object Number]"
console.log(toStr2("abc"));   // "[object String]"
console.log(toStr2(new Date));// "[object Date]"

相熟 bind 和 call 的同学应该晓得，两种办法实质上是雷同的，而第二种办法更简洁，仅仅应用一次 call 就能取得咱们想要的性能，且代码逻辑清晰，了解起来更加容易，可在泛滥框架中为何更多应用第一种呢？

其实次要的起因是 避免原型净化 ，比方咱们在业务代码中覆写了Object.prototype.toString 办法，第二种写法将得不到正确的后果，而第一种写法依然能够。咱们用代码来来试试：

var toStr1 = Function.prototype.call.bind(Object.prototype.toString);

var toStr2 = obj => Object.prototype.toString.call(obj);

Object.prototype.toString = function(){return'toString 办法被笼罩！';}
// 接着咱们再调用上述办法

// toStr1 调用后果如下：console.log(toStr1({}));      // "[object Object]"
console.log(toStr1([]));      // "[object Array]"
console.log(toStr1(123));     // "[object Number]"
console.log(toStr1("abc"));   // "[object String]"
console.log(toStr1("abc"));   // "[object String]"
console.log(toStr1(new Date));// "[object Date]"

// toStr2 调用后果如下：console.log(toStr2({}));      // "toString 办法被笼罩！"
console.log(toStr2([]));      // "toString 办法被笼罩！"
console.log(toStr2(123));     // "toString 办法被笼罩！"
console.log(toStr2("abc"));   // "toString 办法被笼罩！"
console.log(toStr2(new Date));// "toString 办法被笼罩！"

后果很显著。第一种办法依然能正确失去后果，而第二种则不行！那么为什么会这样呢？咱们晓得 bind 函数返回后果是一个函数，这个函数是函数外部的函数，会被提早执行，那么很天然联想到这里可能存在闭包！因为闭包能够放弃外部函数执行时的上下文状态。不过在现代版浏览器中 call 和 bind 都曾经被 js 引擎外部实现了，咱们没有方法调试！然而咱们能够通过 polly-fill 提供的近似实现的源码来了解引擎外部的逻辑，上面是本文调试的 demo，大家能够尝试下：

// 模仿实现 call
// ES6 实现
Function.prototype.mycall = function (context) {context = context ? Object(context) : window;
 var fn = Symbol();
 context[fn] = this;

 let args = [...arguments].slice(1);
 let result = context[fn](...args);

 delete context[fn]
 return result;
}

// 模仿实现 bind
Function.prototype.mybind = function (context) {if (typeof this !== "function") {throw new Error("请应用函数对象调用我，谢谢！");
 }

 var self = this;
 var args = Array.prototype.slice.call(arguments, 1);

 var fNOP = function () {};

 var fBound = function () {var bindArgs = Array.prototype.slice.call(arguments);
 return self.myapply(this instanceof fNOP ? this : context, args.concat(bindArgs));
 }

 fNOP.prototype = this.prototype;
 fBound.prototype = new fNOP();
 return fBound;
}

// 模仿实现 apply
// ES6 实现
Function.prototype.myapply = function (context, arr) {context = context ? Object(context) : window;
 var fn = Symbol();
 context[fn] = this;
 let result;
 if (!arr) {result = context[fn]();} else {result = context[fn](...arr);
 }

 delete context[fn]
 return result;
}

var toStr1 = Function.prototype.mycall.mybind(Object.prototype.toString);

console.log(toStr1({}));      // "[object Object]"
console.log(toStr1([]));      // "[object Array]"
console.log(toStr1(123));     // "[object Number]"
console.log(toStr1("abc"));   // "[object String]"
console.log(toStr1(new Date));// "[object Date]"

上述的实现略去一些健壮性的代码，仅保留外围逻辑，具体的实现细节这里不做解释，有趣味的同学能够本人钻研，从 devtools 咱们看到 mybind 造成的闭包的确在函数对象 toStr1 的作用域上！

当然如果你对原型链有深刻理解的话，其实这句乏味的代码还能够写成如下形式：

var toStr3 = Function.call.bind(Object.prototype.toString);
var toStr4 = Function.call.call.bind(Object.prototype.toString);
var toStr5 = Function.call.call.call.bind(Object.prototype.toString);

// 甚至能够这么写。。。var toStr6 = (()=>{}).call.bind(Object.prototype.toString);

-END-

正文完