zoukankan      html  css  js  c++  java
  • How to function call using 'this' inside forEach loop

    How to function call using 'this' inside forEach loop

    In the following object, I have a problem using the 'this' reference:

    function SampleObject(){
        this.addObject = function(object){...}
        ...
        // more code here
        ...
        this.addNewObjects= function(arr){
            arr.forEach( function (obj) {
                this.addObject(new Obj(obj.prop1, obj.prop2));
            });
        }
    }
    

    I'm assuming the context is changing and that 'this' refers the iterated 'obj', and not 'SampleObject'. I've solved the problem using a normal for loop however, i'm curuois to why this is not working, and would like to know if there is another way to do this.

    回答

    You can store this in variable:

    var self = this;
    this.addNewObjects = function(arr){
        arr.forEach(function(obj) {
            self.addObject(new Obj(obj.prop1, obj.prop2));
        });
    }
    

    or use bind:

    this.addNewObjects = function(arr) {
        arr.forEach(function(obj) {
            this.addObject(new Obj(obj.prop1, obj.prop2));
        }.bind(this));
    }
    

    And side note, without those this will be window object not obj. This is always object that was created using new keyword or window object if it's normal function. In strict mode this will be undefined in this case.

    UPDATE: and with ES6 you can use arrow function:

    this.addNewObjects = function(arr) {
        arr.forEach((obj) => {
            this.addObject(new Obj(obj.prop1, obj.prop2));
        });
    }
    

    arrow functions don't have their own this and they get it from outer scope.

    UPDATE2: from @viery365 comment you can use this as second argument to forEach and it will make context for the function:

    this.addNewObjects = function(arr) {
        arr.forEach(function(obj) {
            this.addObject(new Obj(obj.prop1, obj.prop2));
        }, this);
    }
    

    You can read this on MDN forEach page

    Jquery $().each method obscures 'this' keyword

    I am creating a Javascript object that contains a function that executes a jQuery each method like the following:

    function MyClass {
    
      Method1 = function(obj) { 
        // Does something here
      }
    
      Method2 = function() {
        $(".SomeClass").each(function() {
    
           // 1          2
           this.Method1(this);
    
        });
      }
    
    }
    

    Which object is each THIS referring to? jQuery is referring to the item returned from the each iteration. However, I would like This[1] to refer to the containing class...

    How can I refer to the containing class from within the jQuery loop?

    回答:

    I guess you could do something like this:

    function MyClass {
         Method1 = function(obj) {
             //do something here
         } 
    
         Method2 = function () {
              var containingClass = this;
              $(".SomeClass").each(function () {
                 containingClass.Method1(this);
               });
            }
        }
    }
    
  • 相关阅读:
    vue如何将单页面改造成多页面应用
    css3动画基础详解(@keyframes和animation)
    《css揭秘》下(伪元素,文字背景,垂直居中技巧,文字环绕)
    Wavesurfer.js音频播放器插件的使用教程
    《CSS3揭秘》上(边框,投影,渐变,条纹效果,蚂蚁行军)
    复活hexo静态博客的方法
    基于svg.js实现对图形的拖拽、选择和编辑操作
    js 常用的工具函数
    linux 新机器的配置(git + nodejs+ mongodb)
    vue 不常见操作
  • 原文地址:https://www.cnblogs.com/chucklu/p/14246583.html
Copyright © 2011-2022 走看看