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

Posted 猎人在吃肉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 关于回调函数中 this 的指向相关的知识,希望对你有一定的参考价值。

问题描述

开发一个 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

以上是关于jQuery 关于回调函数中 this 的指向的主要内容,如果未能解决你的问题,请参考以下文章

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

jQuery AJAX回调函数this指向问题

关于this的指向

关于this

vue 中的this问题

关于this指向,翻到的