js的函数调用this指向问题-蒲公英云

js的函数调用this指向问题

灰太狼 2021-11-29 07:46 508阅读 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"