如何用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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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的array_multisort()使用方法介绍
2012/05/16 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
jQuery参数列表集合
2011/04/06 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python利用IPython提高开发效率
2016/08/10 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
应届生船舶驾驶求职信
2013/10/19 职场文书
客户接待方案
2014/02/26 职场文书
2014年工会工作总结
2014/11/12 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android
Python中第三方库Faker的使用详解
2022/04/02 Python