利用原型对原始对象的方法进行扩展(javascript面试题)

xiaoxiao2021-02-28  115

来源: 这是一个很常见的javascript面试题目。

通常喜欢出的题目是: 对String对象定义一个重复n次数的方法。或者是对Array对象扩展一个求和的方法。

下面我就以扩展Array的求和方法作为例子。有兴趣的同学可以自己写写第一个题目。

分析:由于扩展原始对象的方法,我们就必须在原型链(prototype)上面添加方法了。如果你不懂什么是原型,那就先去看我的博客面向对象。(暂时还没有写,嘻嘻!)

Array.prototype.sum = function() { var result = 0; //此处必须要赋值一个0,不能为空,否则会返回NaN for(var i = 0; i < this[length]; i++){ reslut += this[i]; //这里需要注意的是arguments已经不能使用了,要用this。 } }

写到这里,我们可以随便声明一个数组去求和!

let test = [1,2,34,5,6]; console.log(test.sum());

至此!扩展的sum方法就算完成了!到此就结束了?

其实不然,试想如果我们的数组里面出现了字符串,怎么办?如同这样:

let test = [1,2,'str',34,5,6]; console.log(test.sum()); // 输出:3str3456

显然结果并不是我们想要的!我们应该过滤掉数组中的字符串。(当然具体看需求,比如字符就拼接,数值就相加)

扩展版:

Array.prototype.sum = function() { var result = 0; for(var i =0; i<this.length;i++){ if(typeof this[i] === 'number'){ result += this[i]; }else{ console.log('Tips: ['+ this[i] + '] isn\'t Number!'); } } return result; }

至此!算是结束了?其实还有一处问题。 试问: 如果原型链上面的sum已经被调用,那该怎么办? 比如这样:

Array.prototype.sum = function(){ return 'The sum was already occupied!' } //如果在求和之前已经定义过了sum函数。我们再次定义! Array.prototype.sum = function(){ var result = 0; for(var i =0; i<this.length;i++){ if(typeof this[i] === 'number'){ result += this[i]; }else{ console.log('Tips: ['+ this[i] + '] isn\'t Number!'); } } return result; } let test = [1,2,34,5,6]; console.log(test.sum()); // 48

此时,是可以正常求和。但是已经与之前定义的sum方法冲突。无法得到第一个sum()方法的return 的值了!

为了解决兼容的问题,我们利用一个 “||”。虽然不能解决兼容问题!但是我们就可以知道sum方法名是否被使用了。后期做出改变。

Array.prototype.sum = Array.prototype.sum || function(argument){ var result = 0; for(var i =0; i<this.length;i++){ if(typeof this[i] === 'number'){ result += this[i]; }else{ console.log('Tips: ['+ this[i] + '] isn\'t Number!'); } } return result; }

至此,一个原始对象的方法扩展就到这里了! 如发现不妥之处,请留言指正!

附上: string对象的repeatify()

String.prototype.repeatify = String.prototype.repeatify || function(n){ var str = ''; for (var i = 0; i < n; i++) { str += this; } return str; } let str = 'test'; console.log(str.repeatify(3)); //testtesttest
转载请注明原文地址: https://www.6miu.com/read-64301.html

最新回复(0)