The problem of this point in JavaScript and the method of changing this point

The problem of this point in JavaScript and the method of changing this point

1. The point of this in various situations

1. This points to window when ordinary function calls

function fn() {
       console.log(this);
}
fn();  //window

2. When the constructor is called, this points to the instantiated object, and this in the prototype object also points to the instantiated object

        function Star(name, age) {
            this.name = name;
            this.age = age;
            console.log(this);
        }
        var star = new Star('jisoo', 25);  //Star {name: "jisoo", age: 25}

3. When the object method is called, this points to the object to which the method belongs

        var obj = {
            name: 'jisoo',
            age: 25,
            fn: function() {
                console.log(this);
            }
        }
        obj.fn();  //Star {name: "jisoo", age: 25}

4. The this of the event binding method points to the binding event object

        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            console.log(this);
        })  //<button>点击<button>

5. This of the timer function points to window
6. This point of the immediate execution function points to window

2. Change the direction of this

1. The function of apply() method
   apply(): It can hijack the method of another object and inherit the properties of another object. The
   function.apply(obj,args) method receives two parameters:
   obj: This object will replace the this object in the function
   args: array, it will be passed to function as parameters (args–>arguments)

//首先定义一个Star对象
        function Star(name, age) {
            this.name = name;
            this.age = age;
        }
//在定义一个歌手对象
        function Singer(name, age, song) {
            Star.apply(this, arguments);
            this.song = song;
        }
        var singer = new Singer('张韶涵', 39, '隐形的翅膀');
        console.log(singer.name);//'张韶涵'
        console.log(singer.age);//39
        console.log(singer.song);//‘隐形的翅膀’

We can see that it was not written in the singer object this.name=name;this.age=age, but it singer.name，singer.agewas printed out at the end. This is the function of apply().
Analyze Star.apply(this, arguments)this line of code:
this: when creating the object, it represents Singer
arguments: an array , That is, ['Zhang Shaohan', 39,'Invisible Wings']; in
layman's terms: use Singer to execute the content in the Star class, and there are statements such as this.name in the Star class, so that The properties are created in the Singer object
2.
The role of call() method call(): It can hijack the method of another object and inherit the properties of another object.
function.call(obj,[param1[,param2[,…[, paramN]]]]) method receives two parameters:
obj: this object will replace the this object in the function class
params: this is a parameter list

        function Star(name, age) {
            this.name = name;
            this.age = age;
        }
        function Singer(name, age, song) {
            Star.call(this, name, age);
            this.song = song;
        }
        var singer = new Singer('张韶涵', 39, '隐形的翅膀');
        console.log(singer.name);
        console.log(singer.age);
        console.log(singer.song);

Will be Star.apply(this, arguments);replaced withStar.call(this, name, age);