javascript函数调用和this解析

对javascript函数调用中不好理解的部分做了解析,和对this的再次理解

var click_fn = function(id){
alert(id);
};
var check_this_fn = function(){
alert($(this).val());
};
var check_param_fn = function(value){
alert(value);
};

click_fn();//undefined(1)

$("#all_checkbox").click(function () {
$("#checkbox").each(click_fn); //(2)
$("#checkbox").each(check_this_fn); //(3)
$("#checkbox").each(check_param_fn($(this).val()));//(4)
});

(1)调用函数没有传递参数,那么参数是undefined
(2)的返回值是0,1,2,3。。。。(有一组元素的id都为checkbox),一开始的时候觉得很是奇怪,转换一个思路也就说的通了。$("#checkbox").each(click_fn);等价于以下:

$("#checkbox").each(function(id){
alert(id);
});

(3)同样的思路来理解上面第三处调用地方的代码,自然this就是每个触发事件的对象,也就是id为checkbox的一组元素。

$("#checkbox").each(function(){
alert($(this).val());
});

(4)this表示的是"all_check"。按照上面的思路来理解,是不是就容易多了,那假如想要在调用check_param_fn时传递的是$("#checkbox"),怎么办?

$("#all_checkbox").click(function () {
var this_value = $(this).val();
$("#checkbox").each(function(this_value){
alert(value);
}); //all
});

//上面问题的解决方案:使用call()或者apply()控制this的值
var test_fn = function(id, flag){
this;//this is $checkbox not $("#all_checkbox")
};

$("#all_checkbox").click(function () {
var $checkbox = $("#checkbox");
test_fn.call($checkbox,id,flag);
});



$("#checkbox").click(check_this_fn);//(5)
$("#checkbox").click(function(){check_this_fn.call(this)}); //(6)
$("#checkbox").click(check_this_fn.call()); //(7)

(5)触发事件的对象是$("#checkbox")。并且只有在用户点击时才能触发事件
(6)触发事件的对象是$("#checkbox")。并且只有在用户点击时才能触发事件
(7)在load的时候触发事件

此外,对于this的学习,还要注意下面几点:
1.在用户自定义的函数内部使用this是有区别的

var fn_demo = function(name){
this.name = name;
};

var demo = new fn_demo("kkk");
demo.name;//"kkk"

var demo2 = fn_demo("kkkk");
demo2;//undefied
window.name;//"kkk"

使用new关键字实例化的对象为this赋值才可以成功。
2.当this值的宿主函数被封装在另一个函数内时,this永远是对head的引用

var fn = function(){
alert(this);
};
var test_1 = function(fn){
fn.call();
};

test_1(fn); //window

var obj = {};
obj.test_1 = test_1;
obj.test_1(fn); //window

obj.fn = fn;
obj.fn();//object

3.使用变量控制this的值

var obj = {};
var test_2 = function(){
var that = this;
var fn = function(){
alert(that);
}();
};

obj.test_2 = test_2;
obj.test_2(); //object
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值