Java 语言中的 this
在 Java 中定义类经常会使用 this 关键字，多数情况下是为了避免命名冲突，比如在下面例子的中，定义一个 Point 类，很自然的，大家会使用 x，y 为其属性或成员变量命名，在构造函数中，使用 x，y 为参数命名，相比其他的名字，比如 a，b，也更有意义。这时候就需要使用 this 来避免命名上的冲突。另一种情况是为了方便的调用其他构造函数，比如定义在 x 轴上的点，其 x 值默认为 0，使用时只要提供 y 值就可以了，我们可以为此定义一个只需传入一个参数的构造函数。无论哪种情况，this 的含义是一样的，均指当前对象。
清单 1. Point.java
public class Point {
private int x = 0;
private int y = 0;
public Point(x, y){
this.x = x;
this.y = y;
}
public Point(y){
this(0, y);
}
}
JavaScript 语言中的 this
由于其运行期绑定的特性，JavaScript 中的 this 含义要丰富得多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式：作为对象方法调用，作为函数调用，作为构造函数调用，和使用 apply 或 call 调用。下面我们将按照调用方式的不同，分别讨论 this 的含义。
作为对象方法调用
在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象。
清单 2. point.js
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象
作为函数调用
函数也可以直接被调用，此时 this 绑定到全局对象。在浏览器中，window 就是该全局对象。比如下面的例子：函数被调用时，this 被绑定到全局对象，接下来执行赋值语句，相当于隐式的声明了一个全局变量，这显然不是调用者希望的。
清单 3. nonsense.js
function makeNoSense(x) {
this.x = x;
}
makeNoSense(5);
x;// x 已经成为一个值为 5 的全局变量
对于内部函数，即声明在另外一个函数体内的函数，这种绑定到全局对象的方式会产生另外一个问题。我们仍然以前面提到的 point 对象为例，这次我们希望在 moveTo 方法内定义两个函数，分别将 x，y 坐标进行平移。结果可能出乎大家意料，不仅 point 对象没有移动，反而多出两个全局变量 x，y。
清单 4. point.js
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
// 内部函数
var moveX = function(x) {
this.x = x;//this 绑定到了哪里？
};
// 内部函数
var moveY = function(y) {
this.y = y;//this 绑定到了哪里？
};
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1
这属于 JavaScript 的设计缺陷，正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上，为了规避这一设计缺陷，聪明的 JavaScript 程序员想出了变量替代的方法，约定俗成，该变量一般被命名为 that。
清单 5. point2.js
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this;
// 内部函数
var moveX = function(x) {
that.x = x;
};
// 内部函数
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1
补充一段代码：
<script type="text/javascript">
$(function() {
//获取页面高度
var winHeight=$(window).height();
//给主div赋页面高度
$(".main_div").css("height",winHeight-12);
// 统计指标历史曲线的js操作库
function StatKpi(){
this.kpiid = null;
this.kpiName = null;
this.kpiFreq = null;
this.corporationId = null;
this.dimensionId = null;
this.dataCfg = null;
this.startTime = null;
this.endTime = null;
this.comp_time_id = 0;
this.comp_unit_id = 0;
this.compType = null;
this.compArray = new Array();
this.corporation = new Array();
this.option = null;
this.disable = false;
this.data = null;
this.init();
};
// 初始化
StatKpi.prototype.init = function(){
var _this = this;
// 指标ID
console.log(1);
console.log(this);
_this.kpiid = "${kpiVo.historyKpi.id }";
// 更新指标名称
_this.kpiName = "${kpiVo.historyKpi.displayname }";
$("#kpi_name").textbox('setValue', _this.kpiName);
// 指标频率
_this.kpiFreq = "${kpiVo.historyKpi.frequency}";
// 更新指标频率
_this.dataCfg = new DateCfgUtil(_this.kpiFreq);
$("#kpi_frequency").textbox('setValue', _this.dataCfg.freqName);
// 指标维度
if(!isEmpty("${param.dimid}")) {
$("#dim_name").combobox("setValue", "${param.dimid}");
}
// 资源ID
if(!isEmpty("${param.resid}")) {
$("#org_name").combobox("setValue", "${param.resid}");
}
<c:forEach items="${kpiVo.corporationList}" var="item" varStatus="n">
if("${n.index}" == 0) {
// 区域ID
_this.corporationId = "${item.id}-${item.displayname}";
} else {
_this.corporation.push({"value": "${item.id}-${item.displayname}", "text": "${item.displayname}"});
}
</c:forEach>
// 设置开始时间
_this.startTime = $("#line_start_time");
_this.startTime.val(_this.dataCfg.startDate);
_this.startTime.bind('focus', function(){
WdatePicker(_this.dataCfg.getStartDateCfg());
});
// 设置截止时间
_this.endTime = $("#line_end_time");
_this.endTime.val(_this.dataCfg.endDate);
_this.endTime.bind('focus', function(){
WdatePicker(_this.dataCfg.getEndDateCfg());
});
// 设置按钮名称
$(".button-prev span:last").html("上一"+_this.dataCfg.buttonName);
$(".button-curr span:last").html("当"+_this.dataCfg.buttonName);
$(".button-next span:last").html("下一"+_this.dataCfg.buttonName);
//触发事件的处理
_this.operate();
//_this.updateAfter();
_this.submit();
};
//触发事件的处理
StatKpi.prototype.operate = function(){
var _this = this;
console.log(this);
// 上一月按钮
$(".button-prev").click(function(){
_this.startTime.val(_this.dataCfg.getStartDate(_this.startTime.val(), -1));
_this.endTime.val(_this.dataCfg.getEndDate(_this.endTime.val(), -1));
});
// 当月按钮
$(".button-curr").click(function(){
_this.startTime.val(_this.dataCfg.startDate);
_this.endTime.val(_this.dataCfg.endDate);
});
// 下一月按钮
$(".button-next").click(function(){
_this.startTime.val(_this.dataCfg.getStartDate(_this.startTime.val(), 1));
_this.endTime.val(_this.dataCfg.getEndDate(_this.endTime.val(), 1));
});
$(".button-search").click(function(){
_this.submit();
});
};
//查询条件的提交
StatKpi.prototype.submit = function(){
var _this = this;
// 资源ID
_this.resourceId=$("#org_name").combobox("getValue");
if(!isEmpty(_this.resourceId)) {
_this.resourceId += "-"+$("#org_name").combobox("getText");
}
// 子资源ID
_this.subResourceId = $("#dim_name").val();
if(!isEmpty(_this.subResourceId)) {
_this.subResourceId += "-"+$("#dim_name").combobox("getText");
}
// 组装查询参数
_this.data = {
kpiid:_this.kpiid,
kpiName:_this.kpiName,
corporationId:_this.resourceId,
dimensionId:_this.subResourceId,
startTime:_this.startTime.val(),
endTime:_this.endTime.val(),
compType:_this.compType,
compArray:_this.compArray.join(",")
};
if(_this.disable){
return;
}
_this.disable = true;
//路径配置
require.config({paths:{echarts : '${ctxBase}/static/echarts'}});
// 发起Ajax异步请求
$.ajax({
type: "post",
url: "${ctxBase}/history/xline/perfkpi/data",
data: _this.data,
dataType:"json",
success: function(result){
// 绘制矩形状态图
var cellWidth = parseInt($("#his_box").width() / 24) - 1;
var cellHeight = 30;
// 在option中替换数据
var times = result.data.axis;
var values = result.data.series[0].value;
// 清空上次查询结果
$("#his_box").empty();
for(var i=0;i<values.length;i++){
// 添加时间
var color=null;
var title=null;
if(values[i]==1){
color="green";
title = times[i]+" 运行正常 ";
} else if(values[i]==2){
color="red";
title = times[i]+" 运行异常 ";
} else {
color="grey";
title = times[i]+" 无数据 ";
}
var html="<div style='width:" + cellWidth + "px; height:" + cellHeight + "px;background:"+color+";float:left;margin-right:1px;margin-bottom:1px;color:#fff;line-height:" + cellHeight + "px;' class='boxalt' title='"+title+"' align='center'>"+times[i]+"</div>"
$("#his_box").append(html);
}
}
});
_this.disable = false;
};
var statKpi = new StatKpi();
});
扫一扫
1820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
