基于JavaScript 类的使用详解


Posted in Javascript onMay 07, 2013

以下为构造函数方法创建类:

function className (prop_1, prop_2, prop_3) {  
this.prop1 = prop_1;  
this.prop2 = prop_2;  
this.prop3 = prop_3;}

有了上面的类,我们就可以为类创建实例:
var obj_1 = new className(v1, v2, v3)
var obj_2 = new className(v1, v2, v3)

我们也可以给类添加方法(method),其实就是Function里的Function。
function className (prop_1, prop_2, prop_3) {
  this.prop1 = prop_1;
  this.prop2 = prop_2;
  this.prop3 = prop_3;
  this.func = function new_meth (property) {
        //coding here
  }
}

属性访问域:

在JavaScript里,对象的属性默认都是全局的,也就是说,对象内外都可以直接访问该属性。上面例子里this.prop1, this.prop2, this.prop3都是全局属性。

如何定义私有属性呢?使用var,下面的例子里,price就变成了私有属性!

function Car( listedPrice, color ) {
    var price = listedPrice;
    this.color = color;
    this.honk = function() {
        console.log("BEEP BEEP!!");
    };
}

如果你想访问私有属性,那么你可以在对象内添加一个方法去返回这个私有属性,因为方法在对象内,所以可以访问对象的私有属性。在外部调用该方法,就可以访问到这个私有属性了。但是在方法里,就不能再用this.了,像上面的例子,要访问price,就可以在对象里添加方法:
this.getPrice = function() {
//return price here!        
return price;
--------------------------------------------------------------------------------

继承:

使用以下语法继承:

ElectricCar.prototype = new Car();

使用instanceOf检查对象是否某对象的继承,返回true或false。
myElectricCar instanceof Car

给继承后的对象添加方法:
// 使用构造函数定义一个新的对象
function ElectricCar( listedPrice ) {
    this.electricity=100;
    var price = listedPrice;
}
// 使新对象继承Car
ElectricCar.prototype = new Car();
// 为新对象添加方法
ElectricCar.prototype.refuel = function(numHours) {
    this.electricity =+ 5*numHours;
};

重写原型对象的值或方法:
当我们继承原型对象后,我们会继承原型的值和方法。但有的时候,我们的对象值或方法可能会不同,这时候,我们可以通过重写原型对象的值和方法来改变新对象的内容
function Car( listedPrice ) {
   var price = listedPrice;
   this.speed = 0;
   this.numWheels = 4;   this.getPrice = function() {
       return price;
   };
}

Car.prototype.accelerate = function() {
   this.speed += 10;
};
function ElectricCar( listedPrice ) {
   var price = listedPrice;
   this.electricity = 100;
}
ElectricCar.prototype = new Car();
// 重写accelerate方法
ElectricCar.prototype.accelerate = function() {
  this.speed += 20;  
};
// 添加新方法decelerateElectricCar.prototype.decelerate = function(secondsStepped) {
    this.speed -= 5*secondsStepped;
};
myElectricCar = new ElectricCar(500);
myElectricCar.accelerate();
console.log("myElectricCar has speed " + myElectricCar.speed);
myElectricCar.decelerate(3);
console.log("myElectricCar has speed " + myElectricCar.speed);

Javascript 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
Js 随机数产生6位数字
May 13 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
js实现简易聊天对话框
Aug 17 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
解读JavaScript中 For, While与递归的用法
May 07 #Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 #Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 #Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 #Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 #Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 #Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 #Javascript
You might like
php 函数中使用static的说明
2012/06/01 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
python数组过滤实现方法
2015/07/27 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
django富文本编辑器的实现示例
2019/04/10 Python
Python 实现自动导入缺失的库
2019/10/29 Python
5款实用的python 工具推荐
2020/10/13 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
教师节促销方案
2014/03/22 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
2015年中秋寄语
2015/07/31 职场文书
django 认证类配置实现
2021/11/11 Python