JS中this的几种使用情况 我就是我 2022-04-15 02:06 192阅读 0赞 this关键字是JavaScript中最复杂的机制之一,它是一个很特别的关键字,被自动定义在所有函数的作用域中。 在函数中this到底取何值, 是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。 一句话总结:**当前函数被谁调用,this则指向谁。看函数前面是否有调用者,没有则指向window** ## 情况一:构造函数 ## // 如果函数作为构造函数用,那么其中的this就代表它即将new出来的对象 function Foo(){ this.name='star'; this.year='1994'; console.log(this);//Foo {name: "star", year: "1994"} } var f1=new Foo(); console.log(f1.name);//star console.log(f1.year);//1994 // 如果直接调用Foo函数,this是window ## 情况二:函数作为对象的一个属性 ## // 如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对象 var obj={ x:10, fn:function(){ console.log(this);//Object {x: 10, fn: function} console.log(this.x);//10 } } obj.fn(); // 如果fn函数被赋值到另一个变量中,并没有作为obj的一个属性被调用,那么this的值就是window var obj={ x:10, fn:function(){ console.log(this);//window console.log(this.x);//undefined } } var fn1=obj.fn; fn1(); ## 情况三:函数用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); ## 情况四:全局&调用普通函数 ## // 在全局环境下,this永远是window console.log(this===window);//true // 普通函数在调用时,其中的this也都是window var x=10; var fn=function(){ console.log(this);//window console.log(this.x);//10 } fn(); //函数f虽然是在obj.fn内部定义的,但是它仍然是一个普通的函数 var obj={ x:10, fn:function(){ function f(){ console.log(this);//window console.log(this.x);//undefined } f(); } } obj.fn(); ## 情况五:构造函数在prototype中 ## // 在整个原型链中,this代表的都是当前对象的值。谁调用,this则代表谁。 function Fn(){ this.name='star'; this.year='1994'; } Fn.prototype.getName=function(){ console.log(this.name);//star } var f1=new Fn(); f1.getName(); ## 情况六:数组内 ## //数组中的this,如果是数组调用指向数组本身 function f1(){ console.log(this);//指向当前数组 } var arr = [f1,2,3]; arr[0](); ## 面试题 ## var length = 100; function f1(){ console.log(this.length); } var obj = { length:10, fn:function(f1){ f1();//f1之前没有调用者,指向window,100 arguments[0]();//arguments为伪数组,this指向数组本身,2 } } obj.fn(f1,1);
还没有评论,来说两句吧...