文档章节

Javascript的面相对象编程

k
 keepthinker
发布于 2016/06/09 18:23
字数 503
阅读 68
收藏 5

对象生成

   1. 使用闭包方式模拟对象生成

// Use closure to simulate class
function CalculatorClosure (name){
	var id = 1;
	return {
		plus : function(a, b){
			return a + b;
		},
		minus : function(a, b){
			return a - b;
		},
		setName : function(_name){
			name = _name;
		},
		getName : function(){
			return name;
		},
		getId : function(){
			return id;
		}

	}
}

//Run the example:
var obj = CalculatorClosure("Name");
console.log(obj.getName());
console.log(obj.minus(2,6));

    代码中可以看到,是通过调用函数返回一个对象。该被返回的对象里有对应属性名的函数,这些函数类似于面向对象语言中pulic作用范围的函数。

    2. 一般生成对象

function CalculatorNormal (name){
	this.id = 2;
	var battery = 0.99;
	function getDisplayBattery(){
		return battery * 100 + "%";
	}
	this.plus = function(a, b){
		return a + b;
	}
	this.minus = function(a, b){
		return a - b;
	}
	this.setName = function(_name){
		name = _name;
	}
	this.getName = function(){
		return name;
	}
	this.getId = function(){
		return this.id;
	}
	this.getBattery = function(display = false){
		if(false == display){
			return battery;
		}else{
			return getDisplayBattery();
		}
	}
}
//Run example
var obj = new CalculatorNormal("Air");
console.log(obj.getBattery());
console.log(obj.getId());
console.log(obj.getBattery(true));

    这里凡是带this.的成员变量与函数都是public作用域,反之,则是private作用域。

    3. 通过prototype来实现对象的生成

// class implemented with prototype
function CalculatorPrototype (name){
	this.id = 2;
	this.name = name;
}
(function(){
	this.plus = function(a, b){
		return a + b;
	}
	this.minus = function(a, b){
		return a - b;
	}
	this.setName = function(_name){
		this.name = _name;
	}
	this.getName = function(){
		return this.name;
	}
	this.getId = function(){
		return id;
	}
}).call(CalculatorPrototype.prototype);

    因为每次new一个对象时,可以复用成员函数,这里建议采用prototype方式实现对象的生成,可以减少function建立的开销。

 

继承

// class inheritance
function Employee() {
	this.name = "";
	this.department = "general";
	this.sayHello = function(){
		return "Hello!";
	}
}

function Manager() {
	Employee.call(this);
	this.reports = ["a", "b", "c"];
}

Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;

//Run example
var obj = new Manager();
console.log(obj.sayHello());
console.log(obj instanceof Manager);
console.log(obj instanceof Employee);

   以上的例子,采用this定义的成员作用域都为public, 反之,由于闭包特性,则为private作用域,可被所有该方法里所有成员可见,但对闭包外不可见。

 

    由于JS是一种灵活的语言,以上只是简要概述几种面向对象编程的实现方法。若要深入了解Javascript面相对象编程方法,可以访问https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

© 著作权归作者所有

共有 人打赏支持
k
粉丝 3
博文 6
码字总数 5073
作品 0
深圳
程序员
一个javascript继承的基础类Base.js

一个javascript继承的基础类Base.js 官网:http://dean.edwards.name http://dean.edwards.name/weblog/2006/03/base/ 一个javascript继承的基础类 首先我是一个面向对象的程序员,并且javascr...

暗之幻影
2014/12/17
0
0
JavaScript入门(六)

对象 对象是我们使用JavaScript的核心。JavaScript中的对象在许多方面和编程外的现实世界中的对象是相似的(它并不存在,我只是做个设想)。在现实的世界中,一个对象就是一个“事物”(许多...

晨曦之光
2012/03/09
0
0
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster
05/29
0
0
DOM对象和js对象以及jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别 一、DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修...

奋斗的雲
09/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MySQL 到底支不支持事务嵌套?

最近开发中遇到了使用MySQL,多次开启事务,出现了数据错乱问题,伪代码如下: begin; # 操作1 begin; # 操作2 rollback; 执行完后出现了操作1的数据真正写入,只有操作2的数据回滚...

宇润
40分钟前
5
0
fastDfs应用(安装过程待写)

1.效果 2.安装 2.1 导入已经安装好fastDFS的镜像 2.1.1 导入镜像 2.1.2 更改系统兼容性 2.1.3 开机 2.1.4 修改 一下内容 2.1.4.1 修改系统的ip 原来系统ip...

Lucky_Me
44分钟前
3
0
5. Python3源码—字符串(str)对象

5.1. 字符串对象 字符串对象是“变长对象”。 5.1.1. Python中的创建 Python中字符串(strs)对象最重要的创建方法为PyUnicode_DecodeUTF8Stateful,如下Python语句最终会调用到PyUnicode_D...

Mr_zebra
今天
4
0
第十章:路由网关(Zuul)进阶:过滤器、异常处理

第十章:路由网关(Zuul)进阶:过滤器、异常处理 简单介绍了关于Zuul的一些简单使用以及一些路由规则的简单说明。而对于一个统一网关而言,需要处理各种各类的请求,对不同的url进行拦截,或者...

DemonsI
今天
2
0
nginx屏蔽指定接口(URL)

Step1:需求 web平台上线后,需要屏蔽某个服务接口,但又不想重新上线,可以采用nginx屏蔽指定平台接口的办法 Step2:具体操作 location /dist/views/landing/UNIQUE_BEACON_URL { re...

Linux_Anna
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部