this

2017-12-11  本文已影响6人  memelook

this的指向

1.作为对象的方法调用

当函数作为对象的方法被调用时,this指向该对象

var obj = {
    a: 1,
    getA: function(){
        console.log(this === obj);
        console.log(this.a);
    }
};

obj.getA();

2.作为普通函数调用

当函数不作为对象的属性被调用时,也就是普通的函数方式,此时this总是指向全局对象-window

name = 'globalName';

var getName = function(){
    return this.name;
};
console.log(getName()); //globalName



var myObject = {
    name: 'seven',
    getName: function(){
        return this.name;
    }
};

var getName = myObject.getName;
console.log(getName()); //globalName
console.log(myObject.getName()); //seven

有时候局部callback方法被作为普通函数调用时,cb内部的this是指向window的,但想要指向外部对象的时候怎么办呢?

name = 'globalName';

var person = function(){
    this.name = 'tom';
    var _this = this;
    var callback1 = function(){
        console.log(this.name);
    }
    var callback2 = function(){
        console.log(_this.name);
    }
    callback1();              //globalName 
    callback2();                //tom
    callback1.call(this); //tom
}

var p = new person();

在ES6下,使用strict模式,这个时候this就不会指向window,而是undefined

function func(){
    "use strict"
    alert(this); //undefined
}

3.构造器调用

当用new运算符调用函数时,该函数总会返回一个对象,通常情况下,构造器里的this旧治乡返回的这个对象

var MyClass = function(){
    this.name = 'seven';
};
var obj = new MyClass();
alert(obj.name);  //'seven'

当时如果返回的是一个对象,那么此次结果最终会返回这个对象,而不是this

var MyClass = function(){
    this.name = 'seven';
    return {
        name: 'anne'
    }
};
var obj = new MyClass();
alert(obj.name);  //'anne'

如果返回不是一个对象,那么不会收到影响,还是返回this

var MyClass = function(){
    this.name = 'seven';
    return 'anne';
};
var obj = new MyClass();
alert(obj.name);  //'seven'

this的丢失

var obj = {
    myname: 'seven',
    getName: function(){
        return this.myname;
    }
}

console.log(obj.getName()); // 'seven'

var getName2 = obj.getName;
console.log(getName2()) // undefined

1).getName1是通过对象调用,所以this指向对象
2).getName2是通过函数调用,所以this指向window

上一篇 下一篇

猜你喜欢

热点阅读