JS中的this指向

目录

一、this关键字      

二、this理解：

三、this案例：

四、构造函数：

---

一、this关键字      

        （1）在方法中，this表示该方法所属的对象

        （2）若单独使用，this表示全局对象

        （3）在函数中，this表示全局变量

        （4）在事件中，this表示接受事件的元素

二、this理解：

        （1）this是js的一个关键字，指向一个对象，然后替代this；函数中的this指向行为发生的主体，函数外的this指向window

        （2）函数内的this和函数在什么环境下定义的没有关系，意思是和他的作用域没有关系，而是和自己执行时候的主体有关

        （3）主体：看函数调用前面有没有点(.)，若有则就是其前面的对象，若没有就指向window

        （4）一般来说，this指向的是哪个最后调用它的对象

        （5）若函数中有this，但他没有被上一级对象所调用，那么this就指向window；若被上一级对象调用，则this就指向上一级对象

三、this案例：

案例一：

var name = 'su';
var person = {
    name:'wan',
    showName:function(){
        console.log(this.name)
    }
}
person.showName();//输出wan 
//person.showName();函数调用：函数名之后有括号就是调用，没有就等同于赋值
//这里是person对象调用showName方法，所以this指针指向的就是person对象(.前面的对象)

var showNameA = person.showName;//没有括号，等于赋值，赋给showNameA变量
//而showNameA变量相当于一个window对象的属性，因此showNameA()执行相当于window.showNameA()，
//即全局变量，所以this指向的是window
showNameA();//输出su

 案例二：

var personA = {
    name:'GaoWX',
    sayNameA:function(){
        console.log(this.name)
    }
}
var personB = {
    name:'SuwanH',
    sayNameB:personA.sayName
//认为将sayNameA的方法赋给sayNameB(person.sayName没有括号，相当于赋值过程
//相当于personB中的personB为sayNameA:function(){console.log(this.name)}
    }
}
personB.sayNameB();//输出SuwanH
//虽然sayNameA是在personA中定义的，但在调用时却是在personB这个对象调用的
//因此this是指向personB的

实例三

var i = 12;
function test(){
    console.log(this.i)
    }
}

var obj = {
    i : 45,
    ss : function(){
        console.log(this.i);
        test()
    }
}
obj.ss();//输出45 12

obj.ss()指向的是obj中的ss方法，因此ss方法中的this指向的是obj对象，而ss方法中调用test()方法，但test方法之前没有指定对象，即默认全局对象，所以test方法中的this指向的是全局中的i

实例四：

var val = 1;
var obj = {
    val:2,
    dbl:function(){
        var val = 45;
        console.log(this.val);//1
        this.val *= 2;
        console.log(val);//45
        console.log(this.val);//2
    }
}
var ss = obj.dbl;//相当于赋值过程
ss();//ss方法前没有. 默认全局变量

因为ss()前面没有点(.) 所以默认是全局变量，因此dbl中的this指向的是全局window对象

实例五：

var name = '222';
var a = {
    name:'111',
    say:function(){
        console.log(this.name);
    }
}
var fun = a.say;
fun();//222
a.say();//111
var b = {
    name:'333',
    say:function(fun){
        fun()
    }
}
b.say(a.say);
b.say = a.say;
b.say();//333

        （1）将a的say赋值给fun，fun前面没有(.)，所以默认是全局变量，即指向window，所以调用fun()函数时，this指向的是全局变量的name，即222；

        （2）调用a.say()；say方法前面有a对象，所以此时的this指向的是a对象的name，即111

        （3）b.say = a.say，即b中的say函数也是function(){console.log(this.name);},所以调用b.say()函数时，say指向的是b对象，所以此时的this指向的是b对象的name，即333

案例六

var obj = {
    foo:'test',
    fn:function(){
        var mine = this;
        console.log(this.foo);
        console.log(mine.foo);
    }
}
obj.fn();//test test

fn()中的this是指向obj的，所以输出的是test test

四、构造函数：

        （1）构造函数的new关键字可以改变this的指向，将这个this指向new关键字创建的对象实例

        （2）若返回值是一个对象，那么this指向的就是返回的对象，若返回值不是一个对象，那么this还是指向函数的实例

        案例七：

var name = 'su';
function Person(name,age){
    this.name = name;
    this.age = age;
    console.log(this.name);//test
}
Person(name);//su
Person.prototype.getName = function(){
    console.log(this.name);
}
var p1 = new Person('test',18);
p1.getNmae();//test

        (1)Person(name)调用Person函数，且前面无(.)，即为全局变量下的，默认是window的，所以输出‘su’

        （2）var p1 = new Person('test',18);使用了new关键字，则this指向的就是创建的实例对象p1，而p1的参数是test，所以this指向的name就是test

        案例八：

function Person(name){
    this.name = name;
}
var personA = person('su');
console.log(personA.name);//undefind
console.log(window.name);//su
var personB = new Person('wan');
console.log(personB.name);//wan

         (1)因为var personA = person('su');没有使用new关键字，方法前面也没有指定的对象，所以默认是window对象调用的，全局变量name为su，因此第一个输出语句personA的name没有定义，输出undefined；第二个输出语句是window调用的，而window调用的name是传入的参数‘su’，输出‘su’

        （2）var personB = new Person('wan');使用了new关键字，所以this指向的是personB，输出'wan'