• Javascript理解this对象


    this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象。

    通过以下几个例子加深对this的理解。

    (1)作为函数调用

    var name = 'Jenny';
    function person() {
        return this.name;
    }
    console.log(person());  //Jenny

    上面这个例子在全局作用域中调用person(),此时的调用对象为window,因此this指向window,在window中定义了name变量,因此this.name相当于window.name,为Jenny。

    再看下面一个例子:

    function a() {
        function b() {
            function c() {
                console.log(this);
            }
            c();
        }
        b();
    }
    a();    // window

    这个例子中,也同为函数调用,因此this指向window。

    (2)作为对象的方法调用

    var name = 'Jenny';
    var obj = {
        name: 'Danny',
        person: function() {
            return this.name;
        }
    };
    console.log(obj.person());  //Danny

    在这个例子中,person()函数在obj对象中定义,调用时是作为obj对象的方法进行调用,因此此时的this指向obj,obj里面定义了name属性,值为Danny,因此this.name = "Danny"。

    (3)作为构造函数调用

    作为构造函数调用和普通函数调用的区别是,构造函数使用new关键字创建一个实例,此时this指向实例对象。

    function person() {
        return new person.prototype.init();
    }
    person.prototype = {
        init: function() {
            return this.name;
        },
        name: 'Brain'
    };
    console.log(person().name); //undefined

    这是一个比较复杂的例子,涉及到了原型。

    首先,创建构造函数person,为函数重新定义原型,在原型上定义了两个方法init和name,其中init返回this.name。

    调用person函数的name属性,发现返回的是undefined,为什么不是Brain呢?

    我们看,调用person,返回person.prototype.init()的一个实例,假设返回的这个实例名为a,那么此时的this指向的就是a,a作为person.prototype.init()的一个实例,那么所有定义在person.prototype.init()中的方法等都可以被a调用,但是name属性定义在person的原型中,而非init函数中,因此返回undefined。

    (4)apply和call

    使用apply()和call()可以改变调用函数的对象,第一个参数为改变后调用这个函数的对象,其中apply()的第二个参数为一个数组,call的第二个参数为每个参数。

    function person() {
        return this.name;
    }
    var obj = {
        name: 'Jenny',
        age: 18
    };
    console.log(person.apply(obj));  //Jenny

    使用apply函数改变了调用person的对象,是在obj对象下面调用person,不再是在window对象下调用了,因此this指向obj,this.name = "Jenny";

    参考:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

    http://www.cnblogs.com/aaronjs/p/3278578.html

  • 相关阅读:
    .NET XmlNavigator with Namespace
    编程要素
    【FOJ】1962 新击鼓传花游戏
    【POJ】1389 Area of Simple Polygons
    【POJ】2482 Stars in Your Window
    【HDU】3265 Posters
    【HDU】1199 Color the Ball
    【HDU】3642 Get The Treasury
    【HDU】4027 Can you answer these queries?
    【HDU】1542 Atlantis
  • 原文地址:https://www.cnblogs.com/nuanriqingfeng/p/5794632.html
Copyright © 2020-2023  润新知