基于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之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
Seajs源码详解分析
Apr 02 Javascript
vuex入门最详细整理
Mar 04 Javascript
js模拟实现百度搜索
Jun 28 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
js实现纯前端压缩图片
Nov 16 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调用Java对象的方法
2006/10/09 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
js中传递特殊字符(+,&)的方法
2014/01/16 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
node.js的事件机制
2017/02/08 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Python  连接字符串(join %)
2008/09/06 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python实现人机五子棋
2020/03/25 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python的pip有什么用
2020/06/17 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
中学教师岗位职责
2013/11/26 职场文书
中学生自我鉴定
2014/02/04 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
任命书模板
2014/06/04 职场文书
物业管理专业求职信
2014/06/11 职场文书
个人创业事迹材料
2014/12/30 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
基于Python实现的购物商城管理系统
2021/04/27 Python