Javascript中的this的指向

Javascript中的this的指向

初学javascript都会对js的this有很多迷惑比如如下的例子:

 

var a = 'jack';
var obj = {
    a: 'tom',
    b: function(){
        console.log(this.a);
    }
};

var c = obj.b;
c();//输出jack

 

刚接触js的人可能会用一些其他面向对象的语言理解,觉得这里输出的应该是tom,但实际上这里输出的时jack , 但这是问什么了?且楼主来一步步的分析.

在js中常见的this的指向分为4种:

1. 对象中的this指向

什么是对象中的this ,  也就是对象的属性是function, 而function中存在对this的使用 , 比如说如下例子:

var obj = {
    a: 'tom',
    b: function(){
        console.log(this.a);
    }
};

obj.b();//输出的是tom

 

这种情况this指向的调用该函数的对象 , 这里就是obj , 再比如如下例子:

var obj = {
    a: 'tom',
    b: function(){
        console.log(this.a);
    },
    c: {
        c0: 'rose',
        c1: function(){
            console.log(this.c0);
        }
    }
};

obj.c.c1();//输出jack

 

 函数调用时包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

 

但是在开篇的例子中又是为什么呢?

 

var a = 'jack';
var obj = {
    a: 'tom',
    b: function(){
        console.log(this.a);
    }
};

var c = obj.b;
c();//输出jack

 

大家要记住一句话this指向它最后调用它的对象,也就是这里的c虽然被赋予了obj.b的值,但是变量c依然是被挂在全局的window对象上,所以最后this的指向是全局的window对象

 

2. 直接调用函数

也就直接使用声明式或变量式声明函数 , 在全局中直接调用函数

var name = 'tom';
var a = function(){
    var name = 'jack';
    console.log(this.name);
};
console.log(a());//输出tom

 

这里的a是在全局的window在声明, 调用时也是等价于window.a()所以this的指向为全局的window对象,包括这种情况:

var name = 'tom';
var a = function(){
    var name = 'jack';
    function b(){
        console.log(this.name);
    }
    b();//输出tom
    console.log(this.name);
};
console.log(a());//输出tom

 

a和b输出的都是tom , 函数b 在函数a中随后调用时却还是指向全局的window对象 , 这是为什么呢? 大家可以记住一句话 , js中只要没有对象直接调用函数 , 函数调用时this的指向都会被指向到全局的window对象

像之前的例子调用时都是 ,  obect.function() , this的指向都会被指向到object上, 如

var obj = {
    a: 'tom',
    b: function(){
        console.log(this.a);
    }
};

obj.b();//输出tom

 

像开篇的例子用这句话也很好理解 , 函数c的调用并没有对象的调用所以会被指向到全局的window对象上

var a = 'jack';
var obj = {
    a: 'tom',
    b: function(){
        console.log(this.a);
    }
};

var c = obj.b;
c();//输出jack

 

3. 构造函数中的this的指向

Js中的构造函数跟普通函数并没有明显的划分 , 当任意一个普通函数用于创建一类对象时，它就被称作构造函数，或构造器。一个函数要作为一个真正意义上的构造函数，需要满足下列条件：

1、 在函数内部对新对象（this）的属性进行设置，通常是添加属性和方法。

2、 构造函数可以包含返回语句（不推荐），但返回值必须是this，或者其它非对象类型的值。

 

例如:

function People(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex= sex;
}

var p = new People('tom',12,'男');
console.log(p.name + p.sex + p.age); //输出tom男12

 

这里的this指向的就是当前被创建的对象

 

当然构造函数也有特殊情况, 例如:

 

function People(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex= sex;

    return {};
}

var p = new People('tom',12,'男');
console.log(p.name);//输出undefined

 

这里也不难理解构造函数要求返回值为this或非对象类型 , 所以这里的People并不是严格意义上的构造函数 , 这里声明的p其实只是函数People的返回值 , 所以最后的输出为undefined , 如果把这里的返回值改成非对象类型 , 最后的结果就不一样了

function People(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex= sex;

    return 1;
}

var p = new People('tom',12,'男');
console.log(p.name);//输出tom

这里的People就是严格意义上的构造函数了 , 所以this还是指向当前被创建的对象

 

4. call或apply调用函数

Call和apply函数其实用法差不多 , 第一参数都是调用函数的对象 , 后面的参数都是函数的参数 , 只是call函数的传参方式为不限个数的传参 , 即call([thisObject[,arg1 [,arg2 [,...,argn]]]]) 后面的参数分别对应函数的调用的参数 , 而apply函数第一个参数和call的一样 , 第二个参数为数组类型 , apply([thisObj [,argArray] ]) 数组的每一个元素也分别对应函数调用的参数 , 当使用call或apply函数是 , 方法中的this会被重新指向到call或apply函数的第一个参数 , 例如:

var a = 1;
var b = 2;

var c = {
    a: 3,
    b: 4
};

function add(){
    console.log(this.a + this.b)
}

add();//输出3
add.apply(c);//输出7

 

第一add调用时并没有对象的直接调用所以会被指向到全局的window对象所以输出结果为3 , 而第一add函数的调用是通过apply函数所以this的指向会被引向到c 所以最后的输出结果为 7

 

Es6拓展:

 Es6中的箭头函数的this指向与es5的this有所不同 , 我们这里提一下: 由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值，所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。考虑到 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。

 

1 . 对象中的箭头函数

 

var a = {
    name: 'tom',
    b: {
        c: () => {
            console.log(this);
        }
    },
};

a.b.c(); //输出window

 

对象中使用this会被指向到全局的window对象 , 所以在对象中使用箭头函数它this的指向也会被指向到全局的window对象.

 

2. 方法中箭头函数的调用

var test  = function(){
    this.time = 1;
    setTimeout(()=>{
        console.log(this.time);
    },100)
};
var t = new test();//输出1

箭头函数中没有this指针 , 所以指向只和他创建时所处的上下文环境有关 , 这里的是构造函数的调用所以test中this的指向为t对象 , 所以箭头函数中的this也是指向还对象