数字直接调用函数:(5).fn1(2).fn2(3)实现5-2+3

36次阅读

共计 1249 个字符,预计需要花费 4 分钟才能阅读完成。

起因
在网上无意间看到这么一道题,第一次实践,直接报错,所以记录下来加深记忆
过程
一看到数字可以调用函数,最先想到的类似的场景就是(5).toFixed(2),那么接下来,有两个思路了 1、重写 Number 原型对象中的方法 2、在 Number 的原型对象中添加方法 思路一在实践过程中,终于在 bind 方法中迷失了自我,最后放弃治疗,先记下来以后再战。思路二,本人没有仔细考虑,直接写了下面一段代码
Number.prototype.fn1 = function (item){
const value = this.valueOf(); // value

const result = value – item;

return result;
};

Number.prototype.fn2 = function (item){
const value = this.valueOf(); // value

const result = value + item;

return result;
}

console.log((5).fn1(2).fn2(3));
结果就是报错:fn1 未定义 打断点,发现没有调用 fn1,而是在 fn2 定义的时候直接报错,在控制台打印 Number.prototype,发现 fn1 在打印出的对象中,fn2 却没有出现。一番死脑筋的查询资料,最终在 mdn 上,发现 Number.prototype 的 configurable 属性为 false

解决
那么问题好办了,Number.prototype 继承于 Object.prototype,Object.prototype 的 configurable 属性值是 true。更改代码如下
Object.prototype.fn1 = function (item){
const value = this.valueOf(); // value

const result = value – item;

return (result);
// return result; 不加 () 的话,后面的. 会被识别为小数点哦
};

Object.prototype.fn2 = function (item){
const value = this.valueOf(); // value

const result = value + item;

return result;
}

console.log((5).fn1(2).fn2(3));
ok, 问题到这里结束,另外,随手查了 String.prototype 和 Boolean.prototype,它们的 configurable 属性值也是 false。
遗留问题
其实,删除掉上述 Number.prototype.fn2,只执行 (5).fn1(2) 是可以的,为什么加一个属性可以,加两个却不行,正在研究,也希望有高人解答。
Number.prototype.fn1 = function (item){
const value = this.valueOf(); // value

const result = value – item;

return (result);
};

console.log((5).fn1(2));

正文完
 0