js的函数调用this指向问题

灰太狼 2021-11-29 07:46 404阅读 0赞

this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。  
1.如果是call，apply,with，指定的this是谁，就是谁。  
2.普通的函数调用，函数被谁调用，this就是谁。

## js的函数调用 ##

###### 1.作为函数方法调用函数 ######

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。  
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。this指向函数的本身

function myFunction(a, b) { 
            console.log(a*b);
        }
        var myArray = [10, 2];
         var myObject = myFunction.apply(myObject, myArray);
         // 同: myFunction.apply(this, myArray); this指向函数本身

function myFn(a,b) { 
             console.log(a+b)
         }
         var myobj=myFn.call(myobj,2,3);
         // myFn.call(this,2,3);

###### 2.作为一个函数调用 ######

当函数没有被自身的对象调用时 this 的值就会变成全局对象。在 web 浏览器中全局对象是浏览器窗口（window 对象）。

function myFunction(a, b) { 
        return a * b;
    }
    myFunction(10, 2);// 返回 20
    //window.myFunction(10, 2);

//全局对象
    function myFunction(a, b) { 
        return this;//返回window this指向浏览器窗口
    }
    myFunction();

###### 3.函数作为方法被调用 ######

this指向函数所有者对象 对象

var myObject = { 
        firstName:"John",
        lastName: "Doe",
        fullName: function () { 
        console.log(this）//this指向myObject
            return this.firstName + " " + this.lastName;
        }
    }
    myObject.fullName(); // 返回 "John Doe"

###### 4.使用构造函数调用函数 ######

构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new object)时创建。

function myFunction(arg1, arg2) { 
        this.firstName = arg1;
        this.lastName  = arg2;
    }
     
    // This creates a new object
    var x = new myFunction("John","Doe");
    x.firstName;  // 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。