如何用JavaScript定义一个类


Posted in Javascript onSeptember 12, 2014

我原来的写法都是这样:

function Dog(){
  this.name = 'hachi';
}

Dog.prototype = {
  makeNoise:function(){
    alert('wangwangwang');
  }
};

后来又看到另外一种复杂一点而且看起来好像没有必要的写法:

function Dog(){
  var privateVariable = 'secret';

  var fn = function(){
    //...
  }

  fn.prototype = {
    makeNoise:function(){
      alert('wangwangwang');
    }
  }

  return fn;
}

这里的Dog函数其实是一个 制造类 的函数,它返回了真正的Dog类。
感觉这样做的好处是更好的实现了封装。
例如这里的privateVariable就是一个私有变量:

var d = new Dog;
d.privateVariable //undefined

另外如果在第一个例子的最后加上一句:

Dog.prototype = {
  //e...WTF??
}

这样Dog就不是Dog了~

后来的理解:
上面这样新建类的方法直接重写了prototype对象。这样prototype原本内置的属性就没有了(arguments, call, apply等)。
下面这种新建类的方法好像更好一些:

var Dog = function(name){
  this.name = name;
  var privateVariable = 'you cannot see me.';
  this.getPrivate = function(){return privateVariable;};
}
Javascript 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 #Javascript
jquery根据锚点offset值实现动画切换
Sep 11 #Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 #Javascript
js通过location.search来获取页面传来的参数
Sep 11 #Javascript
Javascript中设置默认参数值示例
Sep 11 #Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 #Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 #Javascript
You might like
深入php list()函数的详解
2013/06/05 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
js 数组操作代码集锦
2009/04/28 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
Json解析的方法小结
2016/06/22 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
vue实现拖拽效果
2019/12/23 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
Python中的super()方法使用简介
2015/08/14 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
公司优秀员工获奖感言
2014/08/14 职场文书
防灾减灾活动总结
2014/08/30 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
Redis IP地址的绑定的实现
2021/05/08 Redis
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript