基于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 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
vue中英文切换实例代码
Jan 21 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 CURL post数据报错 failed creating formpost data
2016/10/16 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
js 调用百度分享功能
2017/02/27 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python判断完全平方数的方法
2018/11/13 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
作为网站管理者应当如何防范XSS
2014/08/16 面试题
大学生物业管理求职信
2013/10/24 职场文书
应用心理学个人的求职信
2013/12/08 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
初中成绩单评语
2014/12/29 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
辩护词范文大全
2015/05/21 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers