两次打印的this值为什么不同

Question

var VElement=function(tagName,props,children){
        this.tagName=tagName;
        this.props=props||{};
        this.children=children||{};
        this.key=props?props.key:void 666;
        var count=0;
        console.log(this);
        $.each(this.children,function(i,child){
            console.log(this);
        });
        this.count=count;
    }

    var vdom=VElement('div',{'id':'container'},['最外层']);

Answer 1

首先你要明白this是谁调用它它就指向谁。

在循环外面的那个console的this因为是window调用了VElement这个函数，所以this指向window。

在循环里面$.each对this做了修改变成了this.children，所以循环里面的console的this是指向this.children即传进来的['最外层']

Answer 2

//$.each 对于遍历函数的 this 指向做了修改。

var VElement=function(tagName,props,children){
        this.tagName=tagName;
        this.props=props||{};
        this.children=children||{};
        this.key=props?props.key:void 666;
        var count=0;
        console.log(this);
        var _this=this;
        $.each(this.children,function(i,child){
            console.log(_this);
        });
        this.count=count;
    }

    var vdom=VElement('div',{'id':'container'},['最外层']);
    

Answer 3

$.each 对于遍历函数的 this 指向做了修改. 你可以这么书写:

// ...
var context = this;
$.each(this.children, function(i, child) {
    console.log(context);
});
this.count = count;
// ...