基于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 面向对象之重载
May 04 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
浅谈react路由传参的几种方式
Mar 23 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连接Oracle for NT 远程数据库
2006/10/09 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
详解js类型判断
2018/05/22 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
js实现验证码干扰(静态)
2021/02/22 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python正则表达式的使用
2017/06/12 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python 实现任务管理清单案例
2020/04/25 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
贷款委托书范本
2014/04/08 职场文书
建筑投标担保书
2014/05/20 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
单身证明格式样本
2015/06/15 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL