This points to related issues-JavaScript (definitely worth understanding)

code

        <script>
            var num = 100;

            var obj = {
                num: 200,
                inner: {
                    num: 300,
                    print: function () {
                        console.log(this.num);
                    }
                }
            }

            obj.inner.print(); //300

            var func = obj.inner.print;
            func();  //100

            (obj.inner.print)(); //300

            (obj.inner.print = obj.inner.print)(); //100
        </script>

question

what"s the difference between the first and the third?
what"s the difference between the third and the fourth?

This javascript

Mar.02,2021

1. There is no difference between the first one and the third one. The this in obj.inner.print (), points to obj.inner.num

2. The fourth

first of all, you need to know that the copy operation returns the assigned value

var a;
console.log(a = 5); //5

so the result of (obj.inner.print = obj.inner.print) is a function with the content

function () {
    console.log(this.num);
}

run this function globally, and the this in it points to window, so the result of (obj.inner.print = obj.inner.print) (); ) is

var num = 100;
function () {
    console.log(this.num);
}()
// 100

looking at the answer, the main confusion lies in the third formula. In fact, it is easy to understand, do not be involved in the second and fourth.

the second is an assignment, and the assigned func is just a function reference, which loses the context information of the function, so it ends up running

in the global context.

Why not the fourth one? The reason is that the side effect of the assignment expression : the assignment expression returns the value to the right of the equal sign! So the result of the entire assignment expression is a function that also loses its context. So the result is the same as 2. If you replace the equal sign with a comma, you will get the same result, because the comma expression has the same side effect.

what's the problem with looking at 3pr 3 again? No problem! Because include! Number! no! Yes! Deputy! Do it! Use ! You said it would return an expression, an expression is an expression, and whatever, alone looks at the parenthesis of the first formula and the part before it is also an expression, isn't it?

post other people's blog answers . I think starfish

is the "mentioned on the home page of banner to thoroughly understand the this mechanism in JS

explain it in the way" you don't understand js ":
first, third, implicit binding. This binds to inner object
two and four are default bindings, and this binds to window object

Previous: Will mongodb $set produce dirty data when updating different fields of the same document?

Next: Mini Program uses canvas to draw pictures and uses developer tools to achieve editing, but it is not possible to upload them online. Why?

The pointing problem of this in data return function and mounted function in Vue
Test and reflection triggered by the "Communication between non-parent and Child components " section of the official website tutorial: is about creating two child components, and the value of component an is passed to component b. <!DOCTYPE html&...

Vue.js this javascript

Mar.06,2021
Why are the printed _ self,this objects in the code all nested in a property?
1, commonfun.js: export default { va:{ 000 : "0", 001 : "1", 002 : "2 }, func:(retcode)=>{ console.log(this); return this.va[retcode]; } } 2, main.js: import vue related dependencies im...

Es6 this javascript

Apr.22,2021