js中this的理解

原创 2016年08月29日 15:40:03

网上关于js中this的详解有很多,但是的确自己看了之后受益很深,所以我打算根据自己理解再写一篇,因为其中还有些自己不懂的,这样来加深一下印象。
关于this,平时我都是这样用的:

<body>
    <div onclick="youClick(this)">12345</div>
    <script type="text/javascript">
       function youClick (obj) {
         console.log(obj);
       }
    </script>
</body>

以前总是很简单的理解为this就是调用函数的那个对象,的确这样理解没有错,但是它有四种用法,分别是方法调用,函数调用,构造器调用和Apply调用。
1.方法调用。
方法感觉和函数很像,都是执行一定功能的代码片段,但是方法是指作为一个属性的函数。

<script type="text/javascript">
    var myObject = {
      value : 0,
      func : function(n){
        this.value += n;
      }
    };
    myObject.func(1);
    console.log(myObject.value);//1
    myObject.func(2);
    console.log(myObject.value);//3
</script>

方法可以使用this来访问自己所属的对象,所以它能对对象里的内容进行修改或者进行其他操作。
2.函数调用。
this在函数调用时被绑定为全局对象,举个例子:

     var x = 0;
     function test () {
        this.x = 1;
     }
     test();
     console.log(x);//1

来看看这段代码:

<script type="text/javascript">
    var myObject = {
        x : 0,
        y : 0,
        func : function(x,y){
            var funX = function (x) {
                        this.x = x;
                    };
            var funY = function (y) {
                        this.y = y;
                    };
            funX(x);
            funY(y);
        }
    };
    myObject.func(1,2);
    console.log(myObject.x);//0
    console.log(myObject.y);//0
    console.log(x);//1
    console.log(y);//2
</script>

为什么是这个结果呢?我来解析一下,首先这里的this是通过函数调用的,所以这个this指的是全局对象也就是window,等于就是添加了全局变量,所以在调用myObject的func的方法时传进去的参数实际上是被赋值给了全局对象而不是myObject里的x和y,所以结果是这样子的。
那么怎么解决呢:

 <script type="text/javascript">
    var myObject = {
        x : 0,
        y : 0,
        func : function(x,y){
            var that = this;
            var funX = function (x) {
                        that.x = x;
                    };
            var funY = function (y) {
                        that.y = y;
                    };
            funX(x);
            funY(y);
        }
    };
    myObject.func(1,2);
    console.log(myObject.x);//0
    console.log(myObject.y);//0
</script>

原理很简单就是在函数里调用this之前先把对象的this赋值给一个中间变量that,此时that就代表着myObject这个对象。

3.构造器调用。
构造器这个东西听起来有点懵逼,但是构造函数就很熟悉了,看代码吧:

<script type="text/javascript">
     var x = 1;
     function test(){
       this.x = 0;
     }
     var obj = new test();
     console.log(x);//1
</script>

不对啊,这明明是函数调用的this,为啥不是改变全局变量x的值呢,因为后面还有一句,道理是如果在一个函数前面带上new来调用,那么背地里将会创建一个连接到该函数的prototype成员的新对象,同时this会被绑定到那个新对象上,这里的this的值是test {x: 0}。

 <script type="text/javascript">
     var test = function (inc){
       this.x = inc;
     }
     test.prototype.getX = function(){
       console.log(this.x);//2
     };
     var obj = new test(2);
     obj.getX();
</script>

这里的this指向test{x:2},所以可以在新添加的方法中也可以获取x值,因为他们都属于对象test的一个属性。
4.apply调用。
apply是什么啊,我的天,还有Call,现在一并一说吧。
apply:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。如果没传进去参数则默认为全局对象。

 <script type="text/javascript">
       function funX (a,b) {
        this.x = a;
        this.y = b;
       }
       function funY(a,b,c) {
       funX.apply(this,arguments);
       this.z = c;
       }
       var f = new funY(1,2,3);
       console.log(f.x + " " + f.y + " " + f.z);//1 2 3
</script>

然而我并没有给funY中的x和y赋值啊,这就要问apply了,apply能够劫持另外一个对象的方法,继承另外一个对象的属性,这个this就是funY(){}这个函数。
call:
call()与apply()功能一样,第二个参数形式不一样,call传递多个参数,是任意形式,apply第二个参数必须是数组形式 例如:上面的代码用call写的话就是funX.apply(this,a,b,c)。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS中的this理解

JS this
  • mysjx
  • mysjx
  • 2015年10月13日 20:28
  • 298

js中this的理解

js this

js的this指针理解

js的this指针理解 JavaScript  因为发现身边的一些朋友对js的this指针的理解不是很全面。下面本人简单的讲解一下js的this指针的相关内容,仅供需要的朋友学习参考。...
  • zhytry
  • zhytry
  • 2016年04月07日 14:44
  • 131

由浅至深理解js中的this

this在Js中非常重要,要理解this如何让使用,首先要知道this到底是什么 this是Javascript语言的一个关键字,它是函数运行时自动生成的一个内部对象,只能在函数内部使用。this...
  • dovlie
  • dovlie
  • 2017年07月28日 09:22
  • 107

如何理解JS中的this指向问题

如何理解JS中的this指向问题this中的最终指向的是那个调用它的函数(一定要记住这句话,但是这句话仍然有问题,下文会做解释) this在函数式编程和面向对象编程的过程中,能帮助简化我们的代码,...

深入理解JS之this进阶篇

Douglas Crockford大师把this古怪的行为解释为和函数的调用模式有关。 js中有四种调用模式---方法、函数、构造器以及apply调用模式,它们在初始化this时候是不一样的。 ...

彻底理解 JS 中 this 的指向

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象...
  • zsr1860
  • zsr1860
  • 2017年08月03日 10:15
  • 61

理解js中this的指向问题

在前端的飞速发展的过程中,各种框架层出不穷,但是当大家看到这些框架的源码时,大家也许会发现很多框架都有this 这个问题,由此看来this的指向是多么的重要,但是关于this问题许多人对于他的指向问题...

js中对this关键字的理解

this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在**函数内部使用**。 比如, 理解this指代什么的关键点在与: 看这个this指的是局部对象还是全局...

彻底理解JS中this的指向

【转载地址】https://mp.weixin.qq.com/s/LwnhJYQPVt1rSzjTjEDjBQ初步理解:谁调用的就指向谁(后面会介绍到这句话不完全正确)进一步解析: 如果一个函数中有t...
  • web_hwg
  • web_hwg
  • 2017年08月03日 14:57
  • 76
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js中this的理解
举报原因:
原因补充:

(最多只允许输入30个字)