js中this的使用与代码编写
我们在写一个方法的时候，总是会用到一个关键字this，而this的指向就是我们这里所说的执行上下文（执行环境）
首先我们要知道，this指向的永远是调用该方法的对象
function func () {
this.a = 1;
console.log(this.a);
}
func(); // 1代码中方法执行后控制台输出1，由于func是全局对象window下的一个方法，那么调用该方法的对象就应该是全局对象window，所以this理论上指向的对象就应该是window
如果理论成立，而this.a==1，也就是说变量a是一个全局变量。在控制台上直接输入a或window.a后回车，会发现输出了1，所以在func这个方法中，this的指向就是window
var person = {
name: 'xiao ming',
age: 18,
who: function () {
console.log( 'my name is ' + this.name + ' , ' + this.age + ' years old' );
console.log( person === this);
}
}
person.who();
上面这段代码中who方法是person对象的一个属性，被person对象调用，所以this的指向也就是person
通过this实现全选全不选
<ul style="display:block;">
<li class="parent expanded"><span><input type="checkbox" checked="checked" id="all"/></span><b><img src="${ctx}/static/images/icon_fold_f.png"/></b>
<a href="javascript:;">网址</a>
<ul class="Item" style="display:block">
</ul>
</li> $("#all").change(function() {
if ($(this).attr("checked")) {
$(".Item").each(function() {
$(this).attr("checked", true);
});
} else {
$(".Item").each(function() {
$(this).attr("checked", false);
});
}
})this可以重写'父类'的方法
var EditView = function(){
var _this = null;
var $id = null;
var key = null;
var $submit_form = $("#submit_form");
var $url = "notification/notificationtype";
var type = null;
var $add = null;
var $getById = null;
var $upd = null;
this.url = null;
this.dicurl = "system/dic/getDicByCode/";
this.uploadUrl = getUploadUrl();
this.createCusView = null;
this.getMainData = null;
this.init = function(){
if(parent.$("#addwind_frame").contents().length>0){
$id = $("#cntenIdKey",parent.$("#addwind_frame").parent().parent().parent()).val();
$url = $("#cntenUrl",parent.$("#addwind_frame").parent().parent().parent()).val();
$upd = $("#cntenUpd",parent.$("#addwind_frame").parent().parent().parent()).val();
$add = $("#cntenAdd",parent.$("#addwind_frame").parent().parent().parent()).val();
$getById = $("#cntenById",parent.$("#addwind_frame").parent().parent().parent()).val();
}else if(parent.$("#editwind_frame").contents().length>0) {
$id = $("#cntenIdKey",parent.$("#editwind_frame").parent().parent().parent()).val();
$url = $("#cntenUrl",parent.$("#editwind_frame").parent().parent().parent()).val();
$upd = $("#cntenUpd",parent.$("#editwind_frame").parent().parent().parent()).val();
$add = $("#cntenAdd",parent.$("#editwind_frame").parent().parent().parent()).val();
$getById = $("#cntenById",parent.$("#editwind_frame").parent().parent().parent()).val();
}else{
$id = $("#cntenIdKey",parent.$("#redwind_frame").parent().parent().parent()).val();
$url = $("#cntenUrl",parent.$("#redwind_frame").parent().parent().parent()).val();
$upd = $("#cntenUpd",parent.$("#redwind_frame").parent().parent().parent()).val();
$add = $("#cntenAdd",parent.$("#redwind_frame").parent().parent().parent()).val();
$getById = $("#cntenById",parent.$("#redwind_frame").parent().parent().parent()).val();
}
key = $.util.request[$id];
type = $.util.request["type"];
_this = this;
$Core.OnPageLoad(function () {
$Core.Loading.HidePageLoading();
});
if (key&&key!="") {
var url = $url+"/getById/" + key;
if($getById != null && $getById != "" && $getById != "null"){
url = $getById+"/"+key;
}
$.get(url, function (data) {
_this.getMainData = data;
$submit_form.form("load", data.data);
if(type=="red"){
$submit_form.form("load", data.data);
$("input").attr("readonly", "readonly");
$(".easyui-combobox").combo('readonly', true);
$(".easyui-combotree").combotree('readonly', true);
$('.easyui-textbox').textbox('readonly');
$(".easyui-my97").my97('disable');
$("#btnSave").hide();
$("button").hide();
/*$("input",$submit_form).each(function(i,n) {
$(n).textbox('disable');
});*/
}
if(type != "add" && _this.renderSelectors){
for(var i=0,len=_this.renderSelectors.length; i<len; i++){
var renderSelector = _this.renderSelectors[i],
dictDatas = $Core.DicCache.get(renderSelector.settings.dictCode);
renderSelector.echoSelect(data, dictDatas);
}
}
});
if(_this.createCusView){
_this.createCusView();
}
}
function getUploadUrl() {
var serviceUrl = $Core.SERVICEPATH();
var preffix = serviceUrl.substring(0,serviceUrl.lastIndexOf("cnten"));
var uploadUrl = preffix + "zuul/cnten/plugs/attachment/fileUpload";
return uploadUrl;
}
};var _self = new EditView();
$(function () {
_self.createCusView = function(){
$("#approveState").combobox({
url: _self.dicurl+'userdevState'
});
$("#customerType").combobox({
url: _self.dicurl+'customerType'
});
$("#bottleLibraryWindowFire").combobox({
url: _self.dicurl+'yesno'
});
$("#bottleLibraryWindowOutOpen").combobox({
url: _self.dicurl+'yesno'
});
$("#bottleLibraryGroove").combobox({
url: _self.dicurl+'yesno'
});
$("#installDate").my97({
minDate:'#F{$(\'#productionDate\').my97(\'getValue\')}'
});
}
_self.init = function(){
key = $.util.request["deviceInstallCheckId"];
type = $.util.request["type"];
_this = this;
$Core.OnPageLoad(function () {
$Core.Loading.HidePageLoading();
});
if (key&&key!="") {
$.get("security/installapplyvo/getById/" + key, function (data) {
debugger;
_this.getMainData = data;
$("#submit_form").form("load", data.data);
if(type=="red"){
$("input").attr("readonly", "readonly");
$(".easyui-combobox").combo('readonly', true);
$(".easyui-my97").my97('disable');
$(".easyui-combotree").combotree('readonly', true);
$("#btnSave").hide();
$("button").hide();
}
if(type=="edit"){
}
});
}
if(_this.createCusView){
_this.createCusView();
}
}
_self.init();
});
调用重写的createCusView方法
var EditView = function(){
this.uploadUrl = getUploadUrl();
function getUploadUrl() {
var serviceUrl = $Core.SERVICEPATH();
var preffix = serviceUrl.substring(0,serviceUrl.lastIndexOf("cnten"));
var uploadUrl = preffix + "zuul/plugs/attachment/fileUpload";
return uploadUrl;
}
}
var _self = new EditView();
$(function () {
_self.uploadUrl
});
this._super();
(function(scope){
var ListPager = Class.extend({
init: function(){},
render: function(){
var _self = this;
//展示已知数据
layui.table.render(option);
//渲染部分layui组件
_self.initLayuiPlugin();
});
//界面绘制完成， 初始化界面事件
_self.initEvent();
},
initLayuiPlugin: function(){
var _self = this;
},
initEvent: function(){
var _self = this;
//列表 增删改查
$("div[name='listBtns'] button").unbind('click').bind('click', function(){
var action = "_self." + $(this).attr("action");
eval（action);
});
//列表查询、重置
$("div button[type='button']",$("#" + _self.container + "-QueryForm"))
.unbind('click')
.bind('click', function(){
var action = "_self." + $(this).attr("action");
eval（action);
});
//二级页面查询a标签
$("div a[id='search']",$("#" + _self.container + "-QueryForm"))
.unbind('click')
.bind('click', function(){
debugger;
var action = "_self." + $(this).attr("action");
eval（action);
});
},
assemblyFormPrams: function(){
//组装列表模糊查询表单数据
debugger;
var _self = this;
var formParam = $("#" + _self.container + "-QueryForm").serializeArray(),
reqParam = {};
for(var o in formParam){
if(formParam[o]["name"]){
reqParam[formParam[o]["name"]] = formParam[o]["value"];
}
}
return reqParam;
},
listQuery: function(){
debugger;
var _self = this;
layui.table.reload(_self.tableId, {
where: _self.assemblyFormPrams()
});
},
scope.ListPager = ListPager;
})(window);
<form id="pipeList-QueryForm">
<div class="side_search">
<label>开始时间：</label>
<input type="text" name="startTime" id="test5" placeholder="开始时间"/>
<label>结束时间：</label>
<input type="text" name="endTime" id="test6" placeholder="结束事假"/>
<label>组织机构：</label>
<select name="organization">
<option value="一分公司">一分公司</option>
<option value="二分公司">二分公司</option>
<option value="三分公司">三分公司</option>
<option value="四分公司">四分公司</option>
<option value="五分公司">五分公司</option>
</select>
<a id="search" action="listQuery(this,event)">搜索</a>
</div>
</form>
initLayuiPlugin: function(){
this._super();
var table = layui.table;
var laydate = layui.laydate;
//时间选择器
laydate.render({
elem: '#test5'
,type: 'time'
});
laydate.render({
elem: '#test6'
,type: 'time'
});
},
如果没有super调用不了父类的方法
