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的继承的理解

js的原型继承原型链是实现js继承的主要方法,他的原理是让利用原型让一个引用类型继承另一个引用类型的属性和方法。如果我们让一个原型对象等于一个实例,那么,此时的原型对象将包含指向另一个原型的指针假如另...
  • jyd820226378
  • jyd820226378
  • 2016年07月19日 19:19
  • 1132

谈谈对js面向对象的理解

感谢阮一峰的网络日志分享了面向对象的理解:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.h...
  • cao3743438532
  • cao3743438532
  • 2017年02月14日 17:37
  • 1153

对js数组的理解以及数组的一些习惯用法

对js数组的理解以及数组的一些习惯用法 在js中,数组可以通过字面量和new 表达式两种方法来生成。 通过字面量的例子// 通过字面量的例子 var arr = [3,4,5]; console....
  • Nelly0616
  • Nelly0616
  • 2016年10月24日 23:31
  • 281

js中对this关键字的理解

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

我对js原型链的理解

从关键字 new 说起 __proto__与prototype Function与Object
  • prince_of_
  • prince_of_
  • 2016年04月26日 02:55
  • 408

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

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

深入理解js 闭包

要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 Js代码  v...
  • java_goodstudy
  • java_goodstudy
  • 2016年07月20日 17:53
  • 2555

深入理解js面向对象之继承

先前整理过js作用域和this关键字的用法,以及分析过js面向对象各种方式,这些都是实现js面向对象所必须的。忘记的话看这里:js面向对象 首先来分析一下js中实现面向对象的重要成员protot...
  • u012545279
  • u012545279
  • 2013年10月23日 13:33
  • 1210

深入理解JS事件委托

概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各...
  • zls986992484
  • zls986992484
  • 2017年03月12日 22:47
  • 320

深入理解JavaScript函数参数(推荐)

js的函数很特变,懂得一下这些才能玩转js函数的奥妙。。 正文开始~ ---------------------------------------------------------------...
  • u012028371
  • u012028371
  • 2017年04月13日 09:57
  • 379
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js中this的理解
举报原因:
原因补充:

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