189 8069 5689

实现JavaScript编写类的方式有哪些

这篇文章将为大家详细讲解有关实现JavaScript编写类的方式有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

企业建站必须是能够以充分展现企业形象为主要目的,是企业文化与产品对外扩展宣传的重要窗口,一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台,成都创新互联公司面向各种领域:报废汽车回收成都网站设计营销型网站解决方案、网站设计等建站排名服务。


网上实现javascript写类的方法有很多, 总结下不外乎以下几种. 我自己学习总结了一下.

构造方法方式;原型方式;构造方法+原型的混合方式

现在具体分析一下以上方式的优缺点:

构造方法方式

这是最基本的也是最像Java写class的方式. 上代码:

//创建一个Student类   function Student(name){        this.name = name;        this.sayName = function(){            alert(this.name);        };   }   //new两个不同的Student.   var jimmy = new Student('jimmy');   var henry = new Student('henry');   jimmy.sayName();//显示jimmy   henry.sayName();//显示henry

这样的方法简单明了, 也符合JAVAer的胃口, 但是每new一个新对象, 就会在内存中分配一个sayName方法, 性能不是很好.

原型方式

//创建一个Student类   //属性和方法都通过Student.prototype设置   function Student(name){       Student.prototype = name;       Student.prototype.sayName = function(){           alert(this.name);       }   }   //new两个不同的Student.   var jimmy = new Student('jimmy');   var henry = new Student('henry');   jimmy.sayName();//显示henry!!!   henry.sayName();//显示henry!!!

也许执行的代码和有些童鞋的期望有出入. 两次alert都弹出henry! 其实很好理解. 属性和方法都通过prototype设置. 不同对象的同一个属性或者方法都指向同一个内存, 所以henry是在jimmy后设置的. 所以henry把jimmy覆盖了.

混合方式

构造方法的方式可以为同一个类的每一个对象分配不同的内存, 这很适合写类的时候设置属性, 但是设置方法的时候我们就需要让同一个类的不同对象共享同一个内存了. 写方法用原型的方式***. 所以写类的时候需要把构造方法和原型两种方式混合着用. 废话少说, 看代码:

//创建一个Student类   //属性通过构造方法设置   //方法通过Student.prototype设置   function Student(name){       this.name = name;       Student.prototype.sayName = function(){           alert(this.name);       }   }   //new两个不同的Student.   var jimmy = new Student('jimmy');   var henry = new Student('henry');   jimmy.sayName();//显示jimmy   henry.sayName();//显示henry

so far so good. 同一类的不同对象, 属性各自占有内存, 方法共享同一内存. 其实这里还是有一个小问题:

每new一个新对象, 就会执行一次

Student.prototype.sayName = function(){       alert(this.name);  }

造成不必要的重复运算. 可以在类里面设置一个标记位, 第一次执行的时候给这个标志位设置true, 如果为true就不再为prototype设置方法。

关于实现JavaScript编写类的方式有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


文章题目:实现JavaScript编写类的方式有哪些
本文地址:http://cdxtjz.cn/article/pohise.html

其他资讯