关闭

js中this的理解

标签: javascript
75人阅读 评论(0) 收藏 举报
分类:

网上关于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)。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8689次
    • 积分:357
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类