如何用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设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
JavaScript函数模式详解
Nov 07 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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 zend解密软件绿色版测试可用
2008/04/14 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
python执行外部程序的常用方法小结
2015/03/21 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python 切分数组实例解析
2019/11/07 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
python绘制分布折线图的示例
2020/09/24 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
用python批量下载apk
2020/12/29 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
师德学习感言
2014/01/31 职场文书
教师节宣传方案
2014/05/23 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
色戒观后感
2015/06/12 职场文书
小学英语课教学反思
2016/02/15 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js