javascript 写类方式之三


Posted in Javascript onJuly 05, 2009

取前面两种的优点:
a、用构造函数来定义类属性(字段)
b、用原型方式来定义类的方法。
就有了第三种方式。这种方式貌似采用的人较多。
3、综合构造函数/原型

/** 
* Person类:定义一个人,有个属性name,和一个getName方法 
* @param {String} name 
*/ 
function Person(name) { 
this.name = name; 
} 
Person.prototype.getName = function() { 
return this.name; 
}

这样,即可通过构造函数构造不同name的人,对象实例也都共享getName方法,不会造成内存浪费。
但似乎这样的代码风格似乎仍然没有java的类那么紧凑,把属性,构造方法(函数),方法都包在大括号内。
public class Person { 
//属性(字段) 
String name; 
//构造方法(函数) 
Person(String name) { 
this.name = name; 
} 
//方法 
String getName() { 
return this.name; 
} 
}

为了让js代码风格更紧凑,把挂在prototype的方法代码移到function Person的大括号内。
function Person(name) { 
this.name = name; 
Person.prototype.getName = function() { 
return this.name; 
} 
}

似乎很神奇,还能这么写啊!验证一下
var p1 = new Person("Jack"); 
var p2 = new Person("Tom"); 
console.log(p1.getName());//Jack 
console.log(p2.getName());//Tom

没有报错,控制台也正确输出了。说明可以这么写,呵呵。
嗯,似乎很完美。
a 、可以通过传参构造对象实例
b 、对象实例都共享同一份方法不造成内存浪费
c 、代码风格也比较紧凑
但每次new一个对象的时候都会执行
Person.prototype.getName = function() {
return this.name;
}
造成了不必要的重复的运算。因为getName方法挂在prototype上只需执行一次即可。只需稍微改造下:
function Person(name) { 
this.name = name; 
if(Person._init==undefined) { 
alert("我只执行一次!"); 
Person.prototype.getName = function() { 
return this.name; 
} 
Person._init = 1; 
} 
}

new两个对象,
var p1 = new Person("Andy");//第一次new会弹出'我只执行一次!' 
var p2 = new Person("Lily");//以后new的对象不会再执行了

Javascript 相关文章推荐
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
javascript的几种写法总结
Sep 30 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
javascript 写类方式之二
Jul 05 #Javascript
javascript 写类方式之一
Jul 05 #Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 #Javascript
jQuery DIV弹出效果实现代码
Jul 03 #Javascript
Javascript 遍历对象中的子对象
Jul 03 #Javascript
javascript web页面刷新的方法收集
Jul 02 #Javascript
javascript 操作文件 实现方法小结
Jul 02 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
php 中include()与require()的对比
2006/10/09 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python构建自定义回调函数详解
2017/06/20 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
学校后勤人员职责
2013/12/27 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
庆元旦活动总结
2014/07/09 职场文书
2014年检验员工作总结
2014/11/19 职场文书
小学庆六一主持词
2015/06/30 职场文书
银行工作心得体会范文
2016/01/23 职场文书
教学反思怎么写
2016/02/24 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
关于Vue中的options选项
2022/03/22 Vue.js