对javascript函数调用中不好理解的部分做了解析,和对this的再次理解
(1)调用函数没有传递参数,那么参数是undefined
(2)的返回值是0,1,2,3。。。。(有一组元素的id都为checkbox),一开始的时候觉得很是奇怪,转换一个思路也就说的通了。$("#checkbox").each(click_fn);等价于以下:
(3)同样的思路来理解上面第三处调用地方的代码,自然this就是每个触发事件的对象,也就是id为checkbox的一组元素。
(4)this表示的是"all_check"。按照上面的思路来理解,是不是就容易多了,那假如想要在调用check_param_fn时传递的是$("#checkbox"),怎么办?
(5)触发事件的对象是$("#checkbox")。并且只有在用户点击时才能触发事件
(6)触发事件的对象是$("#checkbox")。并且只有在用户点击时才能触发事件
(7)在load的时候触发事件
此外,对于this的学习,还要注意下面几点:
1.在用户自定义的函数内部使用this是有区别的
使用new关键字实例化的对象为this赋值才可以成功。
2.当this值的宿主函数被封装在另一个函数内时,this永远是对head的引用
3.使用变量控制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