我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

事情还是续前面的一个话题,在前面的文字里面。苏南大叔写了改写setTimeout函数的一篇文章,里面有段没有被执行的参考代码。原理上就是使用了原型链,也就是Function.prototype.,这种写法很古老也很不常见。注意,本文描述的是Function,一般来说是相对于Class来说的。

苏南大叔:JS代码,原型链如何使用?Function.prototype的使用方式 - js原型链function
JS代码,原型链如何使用?Function.prototype的使用方式(图3-1)

大家好,苏南大叔的网络地盘,感谢您的光临。本文说的函数的原型链,函数和类是有区别的。函数的作用域相对比较小,而类则是函数和变量的组团,范围相对较大。函数一般都只是一个工具类的作用,是没有中心对象的。但是类一般都存在个this。本文测试环境:win10chrome@105.0.5195.102node@16.14.2

最基础的代码

下面是个例子,中观中矩最简单:

Function.prototype.goto = function(...args){
  console.log(args,"原型链执行输出");
  return "原型链 return";
}
function sunan(...args){
  console.log(args,"函数执行输出");
  return sunan;                 //注意这里有个return
}
a = sunan("唐山","燕郊").goto("北京");
b = sunan.goto("唐山","燕郊","北京");
console.log(a,b);

执行结果输出:

[ '唐山', '燕郊' ]          函数执行输出
[ '北京' ]                  原型链执行输出
[ '唐山', '燕郊', '北京' ]   原型链执行输出
原型链 return               原型链 return

这里需要说明的是:
goto是通过Function.prototype.定义在sunan这个函数上面的。函数如果需要执行的话,则主要要"return sunan"才能满足原型链的需求,注意()的存在。

苏南大叔:JS代码,原型链如何使用?Function.prototype的使用方式 - 原型链代码1
JS代码,原型链如何使用?Function.prototype的使用方式(图3-2)

稍稍复杂点的例子

Function.prototype.plus = function (...args) {
  console.log("plus输出", args);
  return this(...args);
}
function base(a, b) {
  console.log("base输出", a, b);
  return "base return "+ (a + b);
}
var result = base.plus(1, 2);
console.log(result);

输出为:

plus输出 [ 1, 2 ]
base输出 1 2
base return 3

相比较上一个例子,return 函数的行为,发生在原型链定义里面。return 结果的行为,发生在函数定义里面。

苏南大叔:JS代码,原型链如何使用?Function.prototype的使用方式 - 原型链代码2
JS代码,原型链如何使用?Function.prototype的使用方式(图3-3)

总结

位置return效果
Function.prototype.正常return结果任何函数都被扩展了这个自定义的功能
Function.prototype.正常this()会自动执行函数定义(),然后返回结果,就像劫持了这个函数一样
functionreturn自身名字函数()的结果值=>具有了可以执行原型链的能力

很早很早很早以前,有个js的类库,叫做“prototype.js”(省略500字)。下面的是相关文章,给个链接,自己看相关文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   node