首页 > 代码库 > Javascript中this的用法

Javascript中this的用法

2024-10-16 17:43:39   216人阅读

this 的指向

this 是 js 中定义的关键字，它自动定义于每一个函数域内，但是它的指向却让人很迷惑。在实际应用中，this 的指向大致可以分为以下四种情况。

1.作为普通函数调用

当函数作为一个普通函数被调用，this 指向全局对象。在浏览器里，全局对象就是 window。

1 window.name = ‘linxin‘;
2 function getName(){
3     console.log(this.name);
4 }
5 getName();                   // 输出结果应该是linxin

 

可以看出，此时 this 指向了全局对象 window。 在ECMAScript5的严格模式下，这种情况 this 已经被规定不会指向全局对象了，而是 undefined。

1 ‘use strict‘;
2 function fun(){
3     console.log(this);     
4 }
5 fun();    //输出undefined

2.作为对象的方法调用

当函数作为一个对象里的方法被调用，this 指向该对象

1 var obj = {
2     name : ‘linxin‘,
3     getName : function(){
4         console.log(this.name);
5     }
6 }
   obj.getName();              // linxin

如果把对象的方法赋值给一个变量，再调用这个变量：

1 var obj = {
2     fun1 : function(){
3         console.log(this);
4     }
5 }
6 var fun2 = obj.fun1;
7 fun2();                     // window

此时调用 fun2 方法 输出了 window 对象，说明此时 this 指向了全局对象。给 fun2 赋值，其实是相当于：

 1 var fun2 = function(){

2    console.log(this);

3   } 

可以看出，此时的 this 已经跟 obj 没有任何关系了。这时 fun2 是作为普通函数调用。

3.作为构造函数调用

js中没有类，但是可以从构造器中创建对象，并提供了 new 运算符来进行调用该构造器。构造器的外表跟普通函数一样，大部分的函数都可以当做构造器使用。当构造函数被调用时，this 指向了该构造函数实例化出来的对象。

1 var Person = function(){
2     this.name = ‘linxin‘;
3 }
4 var obj = new Person();
5 console.log(obj.name);      // linxin

如果构造函数显式的返回一个对象，那么 this 则会指向该对象。

1 var Person = function(){
2     this.name = ‘linxin‘;
3     return {
4         name : ‘linshuai‘
5     }
6 }
7 var obj = new Person();
8 console.log(obj.name);      // linshuai

如果该函数不用 new 调用，当作普通函数执行，那么 this 依然指向全局对象。

4.call() 或 apply() 调用

 1 var obj1 = {
 2     name : ‘linxin‘,
 3     getName : function(){
 4         console.log(this.name);
 5     }
 6 }
 7 var obj2 = {
 8     name : ‘linshuai‘
 9 }
10 
11 obj1.getName();             // linxin
12 obj1.getName.call(obj2);    // linshuai
13 obj1.getName.apply(obj2);   // linshuai

 

Javascript中this的用法


联系
我们