The difference between the new call of js function and this in ordinary call

First look at a piece of code to feel the role of this.

        place='out';                    
            function where(){
                    var place='in';
                    alert(place);         //in
                    alert(this.place);    //out
                    }

                    where();

It can be seen from this that place obtains the variables inside the function, while this.place obtains the external variable value. Why is this? In fact, the role of this is to point to the external environment object that executes the current function. The environment when executing where here is the global environment, so this points to global (window in the browser), then this.place gets the global variable place.

Verify through the following code.

       place='out';
                    passer={                        var place: 'in',
                        askWhere: function(){
                            alert(this.place);   //in
                        },
                    };

                    passer.askWhere();

This here is in the function pointed to by askWhere. The external environment for function execution is the passer object, so this points to the passer object, and what this.place gets is in.

Then look at the following piece of code, what differences will new cause in this in the function?

                    function Passer(){
                        this.place = 'in';                        this.askWhere = function(){
                            alert( this.place );    //in
                        }
                    }
                    alert(window.place);            //undefined
                    Tom = new Passer();
                    Tom.askWhere();

If according to the previous theoretical analysis, this in Passer points to global, then this.place should define place in the global environment. Why does window.place = undefined appear?

The difference between new call and ordinary call is reflected here. In fact, several steps are performed during the new operation:

                1.创建一个新的对象（并把空对象的__proto__属性设置为Passer.prototype)。

                2.将构造函数的作用域赋给新对象（此时this 指向了这个新对象）。

                3.执行构造函数中的代码（通过this 为这个新对象添加属性）

                4.返回新对象。

So this here does not actually point to the global world, but a new object. Then when executing askWhere, this in the function also points to the inside of this new object.

If the constructor Passer here makes a normal call, the result is consistent with our initial analysis.

Summary: The fundamental reason for the behavior of this when calling new on a function is that a new object is created and the scope of the constructor is assigned to the new object, which makes this point to the new object. In fact, the role of this pointing to the external environment object that executes the current function has not changed.

The above is the detailed content of The difference between the new call of js function and this in ordinary call. For more information, please follow other related articles on the PHP Chinese website!