一行有趣的JS代码

.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:””}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body ul li{margin-bottom:0;list-style:inherit}.markdown-body ol li .task-list-item,.markdown-body ul li .task-list-item{list-style:none}.markdown-body ol li .task-list-item ol,.markdown-body ol li .task-list-item ul,.markdown-body ul li .task-list-item ol,.markdown-body ul li .task-list-item ul{margin-top:0}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:3px}.markdown-body ol li{padding-left:6px}@media (max-width:720px){.markdown-body h1{font-size:24px}.markdown-body h2{font-size:20px}.markdown-body h3{font-size:18px}}

javascript栏目详细介绍一句代码。

我们经常在框架级的源码中看到类似如下的一句代码，比如：

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("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("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("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;}// 模拟实现bindFunction.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-

相关免费学习推荐：javascript（视频）

以上就是一行有趣的JS代码的详细内容，更多请关注【创想鸟】其它相关文章！