Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

bind 不会破坏原型链

  bind 这个方法在之前的文章中也扯过好几波,但是之前的文章都是在扯 bind 本身的性质。如果把原型继承考虑上,bind 还有一些我没想到的特性。最近有一个需求是在一个保存了数据的函数上使用 bind,并且需要保留上面的数据。慢慢研究下来才让我领略到了 bind 的强大。
  如果我们直接在函数上保存一些数据,那么 bind 之后这些数据就会丢掉。比如:
<script> let f = function() {}; f.one = 1; f = f.bind(); console.log(f.one); // undefined </script>   但是它并不会破换 [[Prototype]] 内部属性 <script> let f = function() {}; f.__proto__ = { __proto__: Function.prototype, one: 1 }; f = f.bind(); console.log(f.one); // 1 </script>   以前研究的东西大多是贴近 ES5 的,不会去考虑函数继承这种东西。ES6 的 calss extends Function 并没有什么违和感,所以打开了我新世界的大门。上面的代码在 ES5 上写起来有点奇怪,换成 ES6 就会好一点,比如这样:
<script> class F extends Function { constructor() { let result = () => { console.log(result.one, result.two); /* to do something */ }; result.__proto__ = new.target.prototype; return result; } get one() { return 1; } get two() { return 2; } } var f = new F(); f(); // 1 2 console.log(f.one, f.two); // 1 2 console.log(f instanceof F && f instanceof Function); // true </script>   所以如果一个函数希望 bind 并且不丢失保存的变量,可以使用这种方式。当然,如果不介意老是要 new 的话使用静态方法和类继承也是不错的选择。 <script> class F { static get one() { return 1; } } class G extends F { constructor() { super(); console.log(new.target.one, new.target.two); } static get two() { return 2; } } new G(); console.log(G.one, G.two); </script>
网名:
34.203.245.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^