如何在jQuery的each函数内部使用this访问所属类对象

首先先修正你原代码的两处语法问题：

1. 对象声明缺少赋值等号，应为var dog = { ... }
2. jQuery的html()是方法，设置内容需要把值作为参数传入，写法为$(元素).html(内容)，而非$(元素).html() = 内容

以下是几种无需直接调用对象名、通用引用外层实例的方案： #

方案1：外部作用域缓存this（兼容性最好） #

在方法开头将当前实例的this缓存到变量中（通常命名为self/that/_this），回调里直接访问该变量即可，这是兼容性最强的通用写法，不依赖ES6特性：

var dog = {
    breed: "huskey",
    printBreed: function(){
      const self = this;
      $("ul li").each(function() {
            $(this).html(self.breed);
        });
    }
}

方案2：使用箭头函数作为each回调（ES6+支持） #

箭头函数没有独立的this指向，会继承外层作用域的this，因此不需要额外缓存变量：

var dog = {
    breed: "huskey",
    printBreed: function(){
      $("ul li").each((index, el) => {
            // 此处this直接指向dog实例
            $(el).html(this.breed);
        });
    }
}

注意：箭头函数内的this不再指向当前遍历的li元素，你可以通过回调的第二个参数获取当前DOM元素。 #

方案3：给回调函数绑定外层this #

通过Function.prototype.bind方法，手动将回调函数的this绑定为外层的实例对象：

var dog = {
    breed: "huskey",
    printBreed: function(){
      $("ul li").each(function(index, el) {
            $(el).html(this.breed);
        }.bind(this));
    }
}

额外优化 #

你的需求是给所有匹配的li元素设置相同内容，其实不需要手动写each遍历，jQuery的html方法会自动给所有匹配元素赋值，可以直接简化为：

var dog = {
    breed: "huskey",
    printBreed: function(){
        $("ul li").html(this.breed);
    }
}

内容的提问来源于stack exchange，提问作者Rongeegee