Javascript对this的理解

最新推荐文章于 2022-07-13 20:06:23 发布

菠萝香

最新推荐文章于 2022-07-13 20:06:23 发布

阅读量228

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/pinena/article/details/90208831

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境，并非函数被声明是的环境。换一句话说就是：this被谁调用就指向谁。

this大致分为下面4种情况：

1、作为对象的方法调用

var obj= {
    name: 'merry',
    getName: function(){
        return this.name;
    }
};
obj.getName();   //merry

当函数作为对象的方法被调用时，this指向改对象

2、作为普通函数的调用

window.name = 'mx';
var obj= {
    name: 'merry',
    getName: function(){
        return this.name;
    }
};
var myName = obj.getName;
myName();  //mx

当函数用普通函数方式调用时，此时的this总是指向全局对象，也就是window对象。

为了在函数调用过程中this不指向window，可以先将this对象缓存下来：

<html> 
 <body> 
 <div id="div1">我是一个 div</div> 
 </body> 
 <script> 
     window.id = 'window'; 
     document.getElementById( 'div1' ).onclick = function(){ 
         console.log ( this.id ); // 输出：'div1' 
         var callback = function(){ 
             console.log( this.id ); // 输出：'window' 
         } 
         callback(); 
     }; 
 </script> 
</html>

<html> 
 <body> 
 <div id="div1">我是一个 div</div> 
 </body> 
 <script> 
     var that = this;
     window.id = 'window'; 
     document.getElementById( 'div1' ).onclick = function(){ 
         console.log ( that.id ); // 输出：'div1' 
         var callback = function(){ 
             console.log( that.id ); // 输出：'div1' 
         } 
         callback(); 
     }; 
 </script> 
</html>

3、构造器调用

当用new运算符调用函数时，改函数总会返回一个对象，通常情况下，构造器里的this就指向返回的这个对象

var MyClass = function(){
    this.name = 'merry';
    return this.name;
  };
var obj = new MyClass();
console.log(obj);  //merry

但是当构造器返回了一个object类型的对象，那么此次运算最终会返回这个对象，而不是我们之前期待的this

var MyClass = function(){
    this.name = 'merry';
    return {
        name: 'mx'
    }
  };
var obj = new MyClass();
console.log(obj);  //mx

4、Function.prototype.call 或 Function.prototype.apply调用

var obj1 = {
    name: 'merry',
    getName: function(){
      return this.name;
    }
  };
  var obj2 = {
    name: 'mx'
  };
  console.log(obj1.getName());   //merry
  console.log(obj1.getName.call(obj2));  //mx

菠萝香

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript对this的理解

this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境，并非函数被声明是的环境。换一句话说就是：this被谁调用就指向谁。this大致分为下面4种情况：1、作为对象的方法调用var obj= { name: 'merry', getName: function(){ return this.name; }};obj.get...
复制链接

扫一扫