jQuery 关于回调函数中 this 的指向

Posted 2023-02-24 猎人在吃肉

问题描述

开发一个 jquery 插件，监听 input 、select 元素，根据 其值 或者 其值 发生变化时，执行回调函数。

jquery 插件模板如下：

;(function($)
	$.fn.myPluginName = function(options, callback) 
		var defaults = 
            param1: "aaa",
            param2: "bbb"
        ;
        var settings = $.extend(true, , defaults, options);
        		
		return this.each(function()			
			// some plugin works ..			
			callback();			
		);
	;
)(jQuery);

我写的回调函数：

;(function($) 

    $.fn.listenValue = function(callback) 
        return this.each(function() 
            var $this = $(this);
            
            //在页面加载完毕后，立即执行回调函数
            if (typeof(callback) == 'function') 
                callback();
            
            
            // 监听值有变化时，执行回调函数
            $this.bind('input propertychange change',function()
                if (typeof(callback) == 'function') 
                    callback();
                
            )
        );
    ;
)(jQuery);

在下面使用时，出现问题。

$("#xxxx").listenValue(function()
	var vv= $(this).val();
	console.log(vv)
)

$("#xxxx") 调用 listenValue方法时，在回调函数中，第二行的 this 代码会报错， this 不存在，无法使用 this 。

经过调试发现 this 不是指向 xxxx 元素，而是指向的是 window 。

解决方法

调用 回调函数，应该使用 callback.apply(this) ，使 回调函数 指定绑定的 当前元素。具体如下：

jquery 插件模板改进 如下：

;(function($)
	$.fn.myPluginName = function(options, callback) 
		var defaults = 
            param1: "aaa",
            param2: "bbb"
        ;
        
       var settings = $.extend(true, , defaults, options);
        		
		return this.each(function()			
			// some plugin works ..			
			callback.apply(this, [options]);			
		);
	;
)(jQuery);

使用方式：

$('p').myPluginName( thing: "thing1" , function(opts)
    alert(opts.thing);
);​

我写的回调函数改进如下：

;(function($) 

    $.fn.listenValue = function(callback) 
        return this.each(function() 
            var $this = $(this);
            if (typeof(callback) == 'function') 
                callback.apply(this);
            
            $this.bind('input propertychange change',function()
                if (typeof(callback) == 'function') 
                    callback.apply(this);
                
            )
        );
    ;
)(jQuery);

调用如下，

$("#xxxx").listenValue(function()
	var vv= $(this).val();
	console.log(vv)
)

可以使用 $(this) ，不报错，并且 $(this) 指向的是 $("#xxxx")。

参考： https://www.it1352.com/1755368.html