JavaScript函数中this的指向 £神魔★判官ぃ 2023-08-17 15:23 78阅读 0赞 ## JavaScript函数中this的指向 ## this的取值在函数真正被调用执行的时候确定,函数定义时无法确定。分为四种情况。 ### 1、构造函数 ### 所谓构造函数就是用来new对象的函数。 function Foo() { this.name = 'mayandev'; this.year = 1997; console.log(this); // Foo {name: "mayandev", year: 1997} } var f1 = new Foo(); console.log(f1.name); console.log(f1.year); 上面的代码中,如果函数作为构造函数使用,那么其中的this就代码它即将new出来的对象。 如果是直接调用函数,则: function Foo() { this.name = 'mayandev'; this.year = 1997; console.log(this); // Foo {name: "mayandev", year: 1997} } var f1 = new Foo(); console.log(f1.name); console.log(f1.year); 上面的代码中,如果函数作为构造函数使用,那么其中的this就代码它即将new出来的对象。 如果是直接调用函数,则: function Foo() { this.name = 'mayandev'; this.year = 1997; console.log(this); //Window } Foo(); 在这种情况下,this指向window ### 2、函数作为对象的一个属性 ### 如果函数作为对象的一个属性,并作为对象的属性被调用时,this指向该对象。 var obj = { x: 10, fn: function () { console.log(this); // Object {x: 10, fn: } console.log(this.x) // 10 } }; obj.fn(); 如果fn函数不作为obj的一个属性被调用,this就是指向window。 下面代码中的this就是指向window。 var obj = { x: 10, fn: function () { console.log(this); // Window console.log(this.x) // undefined } }; var fn1 = obj.fn; fn1(); 因此this的指向由函数所在域确定。 ### 3、函数用call或者apply调用 ### 当一个函数被call或者apply调用时,this的值就取传入的的对象的值。 var obj = { x: 10 }; var fn = function () { console.log(this); // Object {x: 10} console.log(this.x); // 10 } fn.call(obj); ### 4、在全局&调用普通函数 ### 在全局环境下,this永远时windows。 console.log(this === window); 下面的代码需要注意: var obj = { x : 10, fn: function () { function f() { console.log(this); console.log(this.x); } f(); } }; obj.fn(); 上面的代码中,虽然f是在obj.fn内部定义的,但它仍然是一个普通的函数,this仍然指向window。
还没有评论,来说两句吧...