基于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 相关文章推荐
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
vue小白入门教程
Apr 02 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
解读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
dedecms中常见问题修改方法总结
2007/03/21 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
php递归实现无限分类的方法
2015/07/28 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jQuery示例收集
2010/11/05 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
深入探讨前端框架react
2015/12/09 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python模块smtplib学习
2018/05/22 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python 实现dict转json并保存文件
2019/12/05 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
市场安全管理制度
2014/01/26 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
建筑学专业自荐书
2014/07/09 职场文书
违章停车检讨书
2014/10/21 职场文书
工作犯错保证书
2015/05/11 职场文书
国家助学金受助感言
2015/08/01 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python