Javascript 在 onclick 事件中无法识别 self.function

Javascript not recognizing self.function when inside onclick event

本文关键字：识别 self function onclick 事件 Javascript      更新时间：2023-09-26

我有一个我添加的Javascript文件。这是用于推特插件的，我正在添加一个过滤功能。

这是我的脚本（相关部分）：

;(function ( $, window, document, undefined ) {
    var pluginName = "twitterFeed",
        defaults = {
            username: null,
            webservice_url: "/services/Scope/Country_United_States_Internet/TwitterService.svc/DoTwitterSearch",
            num_tweets: 3
        };    
    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }
    Plugin.prototype = {
        init: function() {
        //if username is unknown 
            if(this.options.username == null) {
                // do nothing
                try{console.log('twitter username not found')}catch(err){};
                return false;
            }
            // Get the tweets to display
            this.getTweets();
            $(".twitter-search input").on("change", function () {
                var filters = this.formatFilters($(this).val());
                this.getTweets(filters);
            });
        },
        formatFilters : function(filterString) {
            var hashtags = filterString.split(" ");
            var hashtagString = "";
            for (var i = 0; i < hashtags.length; i++) {
                var hashtag = hashtags[i];
                hashtag = hashtag.replace(",", "");
                if (hashtag[0] !== "#") {
                    hashtag = "#" + hashtag;
                }
                hashtagString += " " + hashtag;
            }
            return hashtagString;
        },
        getTweets : function(filters){
            var self = this;
            var query = "from:" + self.options.username;
            if (filters) {
                query += filters;
            }
            var post_data = JSON.stringify(
                {
                    "PageSize" : self.options.num_tweets,
                    "TwitterQuery" : query
                }
            );
            $.ajax({
                type: "POST",  // Change to POST for development environment
                url: this.options.webservice_url,
                data: post_data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                timeout:2000,
                success: function(data) { 
                    // render the tweets
                    self.renderTweets(data.ContentItems);
                },
                error: function(error, type){
                    try{console.log(type);}catch(err){}
                }
            });
        },

我添加了更改事件$(".twitter-search input")（init 年），并添加了formatFilters()函数。但是，在onchange函数中，我收到错误"this.formatFilters（）未定义"。我尝试删除this但仍然得到"格式过滤器（）未定义。

请记住，事件处理程序内部的this表示激活事件的任何 HTML 元素。

相反，您需要跟踪实际的Plugin对象，而不是 HTML 元素。

var self = this;
$(".twitter-search input").on("change", function () {
    var filters = self.formatFilters($(this).val());
    self.getTweets(filters);
});

您遇到的问题是函数作用域。当您在事件处理程序中引用它时，它指向回调范围，而不是 formatFilters 函数的作用域。

修复它 - 在 init 函数中，在第一行添加var self = this;，然后将调用更改为使用 self.formatFilters 而不是this.formatFilters

相关文章：