每一个Function对象都有一个apply()方法和一个call()方法
A对象有一个方法，而B对象因为某种不可言说的情况也需要用到一样的方法，那么这时候我们是单独为B扩展个方法呢，还是借用一下A的方法呢？当然是借用A的啦，既完成了需求，又减少了内存的占用
apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
function.apply(obj[,argArray])只接收两个参数，其中第二个参数必须是一个数组或者类数组，这也是这两个方法很重要的一个区别
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
function.call(obj[,arg1[, arg2[, [,.argN]]]]])- 调用
call的对象必须是个函数function call的第一个参数将会是function改变上下文后指向的对象，如果不传，将会默认是全局对象window
- 第二个参数开始可以接收任意个参数，这些参数将会作为function的参数传入function
- 调用
call的方法会立即执行
function add(a,b){
return a+b;
}
function sub(a,b){
return a-b;
}
var a1 = add.apply(sub,[4,2]); //sub调用add的方法
var a2 = sub.apply(add,[4,2]);
alert(a1); //6
alert(a2); //2
/*call的用法*/
var a1 = add.call(sub,4,2);相同点
都能够改变方法的执行上下文（执行环境），将一个对象的方法交给另一个对象来执行，并且是立即执行.
一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。
var Pet = {
words : '...',
speak : function (say) {
console.log(say + ''+ this.words)
}
}
Pet.speak('Speak'); // 结果：Speak...
var Dog = {
words:'Wang'
}
//将this的指向改变成了Dog
Pet.speak.call(Dog, 'Speak'); //结果： SpeakWang
---------------------
function Pet(words){
this.words = words;
this.speak = function () {
console.log( this.words)
}
}
function Dog(words){
//Pet.call(this, words); //结果： Wang
Pet.apply(this, arguments); //结果： Wang
}
var dog = new Dog('Wang');
dog.speak();
---------------------
不同点
call方法从第二个参数开始可以接收任意个参数，每个参数会映射到相应位置的func的参数上，可以通过参数名调用，但是如果将所有的参数作为数组传入，它们会作为一个整体映射到func对应的第一个参数上，之后参数都为空
function func (a,b,c) {}
func.call(obj, 1,2,3)
// function接收到的参数实际上是 1,2,3
func.call(obj, [1,2,3])
// function接收到的参数实际上是 [1,2,3],undefined,undefined
apply方法最多只有两个参数，第二个参数接收数组或者类数组，但是都会被转换成类数组传入func中，并且会被映射到func对应的参数上
func.apply(obj, [1,2,3])
// function接收到的参数实际上是 1,2,3
func.apply(obj, {
0: 1,
1: 2,
2: 3,
length: 3
})
// function接收到的参数实际上是 1,2,3跟简单，根据你要传入的参数来做选择，不需要传参或者只有1个参数的时候，用call，当要传入多个对象时，用apply
或者，如果需要传入的参数已经是一个数组或者类数组了，就用apply，如果还是单独的需要逐个传入的，可以考虑使用call（如果你不嫌麻烦的话 ）
jquery中apply的使用
(function (window, $, undefined) {
// 定义 通用工具方法 扩展对象基元
coreUtil = function () { return Object.apply(this, arguments); },
// 定义 jQuery 扩展对象基元
coreJquery = function () { return $.apply(this, arguments); },
coreUtil.fn = coreUtil.prototype = {};
coreJquery.fn = coreJquery.prototype = {};
coreJquery.util = coreUtil;
// 获取当前页面 url 参数。
// 返回值：该方法返回一个数组，数组中的每个元素都是一个 JSON 对象，该 JSON 对象包含如下属性：
// name: 表示 url 参数的名称；
// value: 表示 url 参数的值；
// 也可以通过数组访问器快速访问某个特定名称的参数值，方法如：coreUtil.getRequest()["id"]。
coreUtil.getRequest = function () {
var search = location.search;
if (search.substr(0, 1) == "?") { search = search.substr(1, search.length - 1); }
var result = [];
if (search.length > 0) {
var params = search.split("&");
for (var i = 0; i < params.length; i++) {
var param = params[i];
var pos = param.indexOf("=");
var name = param.substring(0, pos);
var value = param.substr(pos + 1);
result.push({ name: name, value: value });
result[name] = value;
}
}
return result;
};
coreUtil.request = coreUtil.getRequest();
})(window, jQuery);
var url = "approve.html?s=" + Math.random()+"&installApplyId="+rows[0].installApplyId;
var installApplyId = $.util.request.installApplyId;
function Animal(name,age){
this.name=name;
this.age=age;
this.shout=function(){
alert("我是："+this.name+",今年："+this.age);
};
this.action=function(){
alert("会吃");
};
}
function Dog(name,age){
Animal.apply(this, [name,age]);
}
var jack=new Dog("jack",1);
alert(jack.name);
alert(jack.age);
jack.shout();
jack.action();
layui框架实现属性与方法的继承
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function(){
//initializing是为了解决我们之前说的继承导致原型有多余参数的问题。当我们直接将父类的实例赋值给子类原型时。是会调用一次父类的构造函数的。所以这边会把真正的构造流程放到init函数里面，通过initializing来表示当前是不是处于构造原型阶段，为true的话就不会调用init。
//fnTest用来匹配代码里面有没有使用super关键字。对于一些浏览器`function(){xyz;}`会生成个字符串，并且会把里面的代码弄出来，有的浏览器就不会。`/xyz/.test(function(){xyz;})`为true代表浏览器支持看到函数的内部代码，所以用`/\b_super\b/`来匹配。如果不行，就不管三七二十一。所有的函数都算有super关键字，于是就是个必定匹配的正则。
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
// 超级父类
this.Class = function(){};
// Create a new Class that inherits from this class
// 生成一个类，这个类会具有extend方法用于继续继承下去
Class.extend = function(prop) {
//保留当前类，一般是父类的原型
//this指向父类。初次时指向Class超级父类
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
//开关 用来使原型赋值时不调用真正的构成流程
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we're overwriting an existing function
//这边其实就是很简单的将prop的属性混入到子类的原型上。如果是函数我们就要做一些特殊处理
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
//通过闭包，返回一个新的操作函数.在外面包一层，这样我们可以做些额外的处理
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
// 调用一个函数时，会给this注入一个_super方法用来调用父类的同名方法
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
//因为上面的赋值，是的这边的fn里面可以通过_super调用到父类同名方法
var ret = fn.apply(this, arguments);
//离开时 保存现场环境，恢复值。
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// 这边是返回的类，其实就是我们返回的子类
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// 赋值原型链，完成继承
Class.prototype = prototype;
// 改变constructor引用
Class.prototype.constructor = Class;
// 为子类也添加extend方法
Class.extend = arguments.callee;
return Class;
};
})();(function(scope){
var ListPager = Class.extend({
init: function(){},
render: function(){
var _self = this;
//弹出卡片界面的大小[60%,80%]
_self.cardSize = _self.cardSize || ['80%','80%'];
//弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2
_self.cardPopStyle = _self.cardPopStyle || LayuiPopStyle.LAYUI_IFRAME_LAYER;
_self.tableId = _self.container + "." + _self.primaryKey;
//plugins 这个可以不传，但是请不要传空数组过来
var plugins = _self.plugins || ['table','form'];
var p = _self.assemblyFormPrams();
//利用layui 绘制列表 ( url : _self.url+"?decAjaxReq=yes", 给ajax请求加密)
layui.use(plugins, function(){
var option = $.extend({elem: "#" + _self.container,
url : _self.url,
cols: _self.title,
method: RequestMethod.METHOD_POST,
id : _self.tableId,
even: true,
page: true, //是否显示分页
pageNum: 1,
limit: _self.pageSize, //每页默认显示的数量
limits:[5,10,15,20,30]}, _self.layOption);
//展示已知数据
layui.table.render(option);
//渲染部分layui组件
_self.initLayuiPlugin();
//监听工具条
layui.table.on('tool(' + _self.container + ')', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
if(_self.hookMethod && $.isFunction(_self.hookMethod)){
_self.hookMethod(obj); //回调 子类中的 钩子方法
}
});
//复选框事件选中以后回调
layui.table.on('checkbox(' + _self.container + ')', function(obj){
if(_self.tableAfterChecked && $.isFunction(_self.tableAfterChecked)){
_self.tableAfterChecked(obj); //回调 子类中的 钩子方法
}
});
});
//界面绘制完成， 初始化界面事件
_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);
});
},
assemblyFormPrams: function(){ //组装列表模糊查询表单数据
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(){
var _self = this;
layui.table.reload(_self.tableId, {
where: _self.assemblyFormPrams()
});
},
/**
* 获取选中的数据
*/
getSelectRows: function(){
var checkStatus = layui.table.checkStatus(this.tableId);
return checkStatus.data;
},
getSelectIds: function(){
var data = this.getSelectRows();
var ids = [];
if($.isEmptyArray(data))
return ids;
for(var i = 0; i < data.length; i++){
ids.push(data[i][this.primaryKey]);
}
return ids;
},
view: function(curDom, event){
var _self = this;
var data = _self.getSelectRows();
if (data.length != 1) {
layer.msg("请选中一条数据进行查看");
return;
}
var url = $(curDom).attr("url") + "?act=" + WebConst.READ + "&entityId=" + data[0][_self.primaryKey];
var title = $(curDom).attr("title");
var layIndex = layer.open({
type: this.cardPopStyle,
title: title,
maxmin: true,
shadeClose: true, //开启遮罩关闭
area : this.cardSize,
content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,
success: function(layero){
layero = _self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? layero : layer.getChildFrame('body', layIndex);
if(_self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER){
layero.setValues(data[0]);
}
layui.form.render();
}
});
},
add: function(curDom, event){
var _self = this;
//新增之前回调函数
if(_self.beforeAdd && $.isFunction(_self.beforeAdd)){
_self.beforeAdd();
}
var url = $(curDom).attr("url") + "?act=" + WebConst.ADD;
var title = $(curDom).attr("title");
layer.open({
type: this.cardPopStyle,
title: title,
area: this.cardSize,
maxmin: true,
shadeClose: false, //开启遮罩关闭
content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,
success : function(layero){
layui.form.render();
},
end: function(){ //销毁列表回调方法
layui.table.reload(_self.tableId)
if(_self.closeCard && $.isFunction(_self.closeCard)){
return _self.closeCard();
}
return false;
},
cancel: function(){
}
});
},
edit: function(curDom, event){
var _self = this;
var data = _self.getSelectRows();
if (data.length != 1) {
layer.msg("请选中一条数据进行修改");
return;
}
//修改之前回调函数
if(_self.beforeUpd && $.isFunction(_self.beforeUpd)){
_self.beforeUpd();
}
var url = $(curDom).attr("url") + "?act=" + WebConst.EDIT + "&entityId=" + data[0][_self.primaryKey];
var title = $(curDom).attr("title");
var layIndex = layer.open({
type: this.cardPopStyle,
title: title,
maxmin: true,
shadeClose: false, //开启遮罩关闭
area : this.cardSize,
content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,
success: function(layero){
layero = _self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? layero : layer.getChildFrame('body', layIndex);
if(_self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER){
layero.setValues(data[0]);
layui.form.render();
}
},
end: function(){ //销毁列表回调方法
layui.table.reload(_self.tableId)
if(_self.closeCard && $.isFunction(_self.closeCard)){
return _self.closeCard();
}
return false;
},
cancel: function(){ //点击左上角关闭按钮回调方法
if(_self.cardPopStyle == LayuiPopStyle.LAYUI_IFRAME_LAYER){ //从列表调用卡片页面数据
var frameId = document.getElementById('layui-layer' + layIndex).getElementsByTagName("iframe")[0].id,
closeCallback = $('#'+frameId)[0].contentWindow.beforeClose;
if(closeCallback && $.isFunction(closeCallback)){
return closeCallback();
}
}
}
});
},
del: function(curDom, event){
var _self = this;
var data = _self.getSelectIds();
if(data.length == 0){
layer.msg("请至少选择一条需要删除的数据");
return;
}
var url = $(curDom).attr("url") + "?act=" + WebConst.DELETE;
layer.confirm('确定删除吗', function(index){
layer.close(index);
$.ajaxReq(url,$.toJSON(data),function(){
layui.table.reload(_self.tableId)
});
});
}
});
scope.ListPager = ListPager;
})(window);
ShowPipeList = ListPager.extend({
init : function(container, primaryKey, url){
debugger;
//列表容器
this.container = container;
//主键字段
this.primaryKey = primaryKey;
//数据请求地址
this.url = url;
//界面需要引用的插件
this.plugins = ['table', 'element', 'form', 'laydate', 'layer','carousel'];
// //弹出卡片界面的大小[60%,80%]
// this.cardSize = ['100%','100%'];
// //弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2
this.cardPopStyle = 2;
//每页大小
this.pageSize = 5;
//列表头
this.title = [[
{field: 'checkDate', title: '运行日期', width: 160},
{field: 'userRegion', title: '用户区域', width: 160},
{field: 'runUser', title: '运行人员', width: 160},
{field: 'dayCovRate', title: '党日覆盖率', width: 160},
{field: 'cycleCovRate', title: '周期覆盖率', width: 160},
{field: 'startTime', title: '开始时间', width: 160},
{field: 'endTime', title: '结束时间', width: 160},
{field: 'organization', title: '部门', width: 160},
{fixed: 'right', title: '轨迹查看', align:'center',width: 80, toolbar: '#scanPipe'}
]];
//插件是基于layui封装的， layOption是对layui的参数扩展（具体api参照layui属性）
this.layOption = {
};
},
initLayuiPlugin: function(){
this._super();
var table = layui.table;
var laydate = layui.laydate;
//时间选择器
laydate.render({
elem: '#test5'
,type: 'time'
,theme: '#050a3c'
});
laydate.render({
elem: '#test6'
,type: 'time'
,theme: '#050a3c'
});
},
initEvent: function(){
this._super();
//TODO 父类仅仅绑定了工具条通用按钮事件， 如有其他事件请在这里定义
},
hookMethod:function(obj){
var data = obj.data,
url = CONTEXT_PATH + '/cusviews/pipe/listPipePoint';
var param = {
cobwebId : data.cobwebId
}
var retData = $.getData(url,param);
if(1000 != retData.status){
layer.msg('获取数据失败', {icon: 5});
return;
}
var points = [];
pipe.removePoint();
pipe.removeLine();
pipe.closeInfoWindow();
var data = retData.data;
if(!$.isEmptyArray(data)){
for(var i=0;i
关注
打赏
![]()
1665965058
查看更多评论
最近更新
- 深拷贝和浅拷贝的区别（重点）
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state，props，refs（你学废了吗）
- 【脚手架VueCLI】从零开始，创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解（含代码）
- 【React】DOM的Diffing算法是什么？以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面？
