首页 > js的扩展原型的问题

js的扩展原型的问题


这么写报错,内存溢出,我在哪里写了死循环啊?


~如果Function原型中没有或String的原型中没有trim方法~
~那么你这个不是在不停调用trim方法,而trim方法在反复往prototype中添加trim方法,实际的工作一点没~有,永远没有机会执行else~~~
~因为 'trim' in this 语法会在其原始链中寻找trim属性,不光在当前对象上~
~那就结果是一直都是true~

Function.prototype.method=function(name,func){
    this.prototype[name]=func;
    return this;
}
String.method('trim',function(){
    if('trim' in this){
        return this.trim);
    }else{
        return this.replace(/^\s+|\s+$/g,'');
    }
    
});

上面的代码为Function原型提供了一个method方法,通过它可以为原型添加新的方法

为String原型添加一个trim方法
原意为当调用对象或上下文存在trim属性的话,就调用原来的trim方法,否则就调用replace方法

可是你要知道在你调用了String.method后,在String的原型链中就添加了一个trim方法,即使原String原型链中有trim方法,也被你覆盖啦~~~
等价为

String.prototype.trim=function A(){
    if('trim' in this){//a
        return this.trim();//b
    }else{
        return this.replace(/^\s+|\s+$/g,'');
    }
}

再看下实际运行过程中出现了什么问题
a处被执行 in操作符会在当前对象及其原型链中去寻找是否有相应的属性;结果为true,这个属性对应的就是刚刚定义的函数A,
b处被调用 函数A被作为方法被调用,this指向同一个对象,回到a处

这样就一直在不停的递归调用,而没有退出的机会

修改方法2种

方法:1
覆盖原型链的同名属性对应的方法,不管其是否存在;有破坏性

Function.prototype.method=function(name,func){
    this.prototype[name]=func;
    return this;
}
String.method('trim',function(){
    return this.replace(/^\s+|\s+$/g,'');
});

方法2:
保持原型链中原属性对象的方法;如果不存在这个属性,那么将传入的赋值给它;相对温柔

Function.prototype.method=function(name,func){
    if(!this.prototype[name]){
        this.prototype[name]=func;
    }
    return this;
};
String.method('trim',function(){
    return this.replace(/^\s+|\s+$/g,'');
});
Function.prototype.method=function(name,func){
    this.prototype[name]=func;
    return this;
}
String.method('trim',function(){
    if('trim' in this){
        return this.trim();
    }else{
        return this.replace(/^\s+|\s+$/g,'');
    }
    
});

if (this.hasOwnProperty('trim')) {
    return this.trim();
  } else {
【热门文章】
【热门文章】