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

起因
在网上无意间看到这么一道题,第一次实践,直接报错,所以记录下来加深记忆
过程
一看到数字可以调用函数,最先想到的类似的场景就是(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));

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理