JavaScript中的this

2018-01-22  本文已影响0人  机场等轮船

    this一直是JavaScript中的一个疑点难点。了解this以及掌握this的使用,是作为一个前端人必须的一项能力。跟别的语言大相庭径的是,JavaScript中的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数声明时的环境。

1.1  this的指向

除去不常用的with和eval的情况,this的指向大概可以分为4类:

    作为对象的方法调用。

    作为普通函数调用。

    构造器调用。

    Function.prototype.call 或者 Function.prototype.apply 调用。

1.作为对象的方法调用,this指向该对象。

    var obj = {

        a: 1,

       getA: function() {

            alert(this === obj);        //true

            alert(this.a);        //1

        }

    };

2.作为普通函数调用

当函数不作为对象的属性被调用时,也就是我们常说的普通函数方式,此时的this总是指向全局对象。在浏览器的JavaScript中,这个全局对象就是window。

window.name = 'globalName';

var getName = function() {

    return this.name

};

console.log(getName());    //globalName

作为普通函数调用时,如果是在dom元素的回调中,回调内部的this指向的是window;如果想this指向dom元素,可以在回调函数中,使用 “var self = this;",此类的方法,使用一个变量来保存对dom元素的引用。需要注意的时,在严格模式中,此时的this,不是指向全局对象,而是undefined。

3.构造器调用

var MyClass = function() {

    this.name = "lily";

};

var obj = new MyClass();

alert(obj.name);        //lily

但是new调用构造器时,还要注意一个问题,如果构造器显式的返回了一个object类型的对象,那么此次运算最终结果会返回这个对象,而不是this。

var MyClass = function() {

    this.name = "lily";

    return {

        name: "lucy"

    }

};

var obj = new MyClass();

alert(obj.name)        //lucy

4.Function.prototype.call 和 Function.prototype.apply 调用

跟普通的函数调用相比,用Function.prototype.call 和 Function.prototype.apply 可以动态的改变传入函数的this。

var obj1 = {

    name: "lily",

    getName: function() {

        return this.name;

    }

};

var obj2 = {

    name: "lucy"

};

console.log( obj1.getName() );    // lily

console.log( obj1.getName.call( obj2 ) );    //lucy

上一篇 下一篇

猜你喜欢

热点阅读