基于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 iframe的相互操作浅析
Oct 14 Javascript
ASP Json Parser修正版
Dec 06 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
Bootstrap table使用方法总结
May 10 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
用js实现放大镜效果
Oct 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
Zerg建筑一览
2020/03/14 星际争霸
php adodb操作mysql数据库
2009/03/19 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
Laravel下生成验证码的类
2017/11/15 PHP
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
2014/12/31 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python基础语法(Python基础知识点)
2016/02/28 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python如何将字符串转换为日期
2020/07/31 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
幼儿园见习报告范文
2014/10/30 职场文书
业务内勤岗位职责
2015/04/13 职场文书
学校证明范文
2015/06/24 职场文书
运动会通讯稿300字
2015/07/20 职场文书
厉行节约工作总结
2015/08/12 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
比较node.js和Deno
2021/04/27 Javascript
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS