JavaScript这样写的好处是什么?
怪我咯
怪我咯 2017-04-10 14:43:48
[JavaScript讨论组]

function Rectangle(w,h){ this.width=w; this.height=h; this.area=function () { return this.width*this.height; } } function Rectangle1(w,h){ this.width=w; this.height=h; Rectangle1.prototype.area=function () { return this.width*this.height; } } var a= new Rectangle(3,4); alert(a.area());

使用原型有哪些好处呢?节省内存?我感觉第一种方法定义类就够用了啊!!
求大神解惑传道

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(5)
PHPz

@魔尼尼ongogoda点com 把这段代码复制到chrome的控制台中运行下看看:

function Rectangle1(w,h){
    var $width=w,
        $height=h;

    //每实例化一个对象都会重写prototype中的area,
    //个人认为这样写有问题,除非有理由要这么写
    Rectangle1.prototype.area=function  ()  {
        return   $width*$height;
    }
}

var r1 = new Rectangle1(1, 2);
console.log(r1.area()); //输出2

var r2 = new Rectangle1(3, 4);
console.log(r1.area(), r2.area());//输出12,12

我不知道这样写是有意为之,还是一个失误,如果要模拟私有变量可以这样写:

function Rectangle(w, h) {
  var width = w;
  var height = h;

  this.area = function () {
    return width * height;
  };
}
黄舟

考虑了下,还是把答案删除比较好,免得起误导作用,之前的代码实验性太强,没有什么可操作性。

第一段代码是正确,而第二段代码是错误的。至于为什么 KevinYue 已经给了解答,原型的好处之一是可以共用函数,因为当你访问某个ins实例上没有的方法而恰好proto上有的话,函数会以ins -> proto -> func的顺序访问,来返回你需要的结果。

而通常,我们都是这样定义prototype的,也就是放在外面定义。

function fn(){ }
fn.prototype.method=function(){/* code */}
黄舟

个人感觉第二种写法有问题。
应该是像下面这样的吧?

function   Rectangle1(w,h){
     this.width=w;
     this.height=h;
}
Rectangle1.prototype.area=function  ()  {
     return   this.width*this.height;
}

至于为什么要这样,是因为像有些时候需要的实例没有必要用到area这个方法,所以就不用把他放到构造函数中,这样就不会再new实例的时候都会在每个实例内带有area这个方法,节省资源,对性能有好处。放到原型上,就可以在需要用到该方法的时候再去查找原型,就能使用该方法。

PHP中文网

嗯。。第二种方法是有问题的,Rectangle1.prototype.area=function...应该放在Rectangle1构造函数的外面。

function   Rectangle1(w,h){
this.width=w;
this.height=h;
}
}
Rectangle1.prototype.area=function  ()  {
    return   this.width*this.height;
}

至于为什么设置prototype好……标准吧,因为函数不属于对象啊

巴扎黑

使用原型的话,内存里只需要一份 area function 的拷贝就可以了。

如果是每次在构造函数里赋值的话,那样每 new 一次就会产生一个 area function, 是一种浪费。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号