JS中this的指向

小课堂【成都第144期】

分享人：王帅

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

JavaScript 中的 this 含义十分丰富，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式：作为对象方法调用，作为函数调用，作为构造函数调用，和使用 apply 或 call 调用。下面我们将按照调用方式的不同，分别讨论 this 的含义。

2.知识剖析

全局环境中的this

                    this.a2 = 20;

                    console.log(this);

总结：在全局作用域中它的 this 执行当前的全局对象（浏览器端是 Window）

严格模式与非严格模式下的this

                    function fn() {

                    'use strict';   //严格模式

                    console.log(this);

                    }

                    fn();  //  undefined

                    window.fn();  // Window

                    function fn() {

                    console.log(this);

                    }

                    fn();  // Window

                    window.fn();  // Window

原因：在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

this由调用者提供，由调用函数的方式来决定。如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

普通的例子

                    var a = 20;

                    var foo = {

                        a: 10,

                        getA: function () {

                        return this.a;

                        }

                    }

                    console.log(foo.getA()); // 10

                    var test = foo.getA;

                    console.log(test());  // 20

foo.getA()中，getA是调用者，他不是独立调用，被对象foo所拥有，因此它的this指向了foo。而test()作为调用者，尽管他与foo.getA的引用相同，但是它是独立调用的，因此this指向undefined，在非严格模式，自动转向全局window。

使用call，apply显示指定this

                    var a = 4;

                    function fn() {

                    console.log(this.a);

                    }

                    var obj = {

                    a: 20

                    };

                    fn();

                    fn.call(obj);

call：调用一个对象的一个方法用另一个对象替换当前对象。

apply：应用某一对象的一个方法用另一个对象替换当前对象。

构造函数与原型方法上的this

                    //构造函数

                    function Person(name, age) {

                        this.name = name;

                        this.age = age;

                    }

                    //原型方法

                    Person.prototype.getName = function() {

                        return this.name;

                    }

                    var p1 = new Person('Nick', 20);

                    console.log(p1.getName());

当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最后又将新的对象返回出来，被实例对象p1接收。而原型方法上的this，p1.getName()中的getName为调用者，他被p1所拥有，因此getName中的this，也是指向了p1。

3、常见问题

特殊的例子

                    var a = 20;

                    var obj = {

                    a: 10,

                    c: this.a + 20,

                    fn: function () {

                    return this.a;

                    }

                    }

                    console.log(obj.c);  //40

                    console.log(obj.fn()); //10

4、解决方案

                    var a = 20;

                    var obj = {

                    a: 10,

                    c: this.a + 20,

                    fn: function () {

                    return this.a;

                    }

                    }

                    console.log(obj.c);  //40

                    console.log(obj.fn()); //20

对象obj中的c属性使用this.a + 20来计算，而他的调用者obj.c并非是一个函数。因此他不适用调用者的规则。当obj在全局声明时，无论obj.c在什么地方调用，这里的this都指向全局对象，而当obj在函数环境中声明时，这个this指向undefined，在非严格模式下，会自动转向全局对象。

5、编码实战

6.扩展思考

如何理解this？

当一个函数被调用时，拥有它的object会作为this传入。在全局下，就是window，其他时候就是相应的object。总结来说，谁使用函数，this就是谁的，没人使用函数时，严格模式下，this指向undefined，非严格模式下this指向Window。

7.参考文献

参考一：全方位解读this

参考二：JavaScript中的this用法与指向

8、更多讨论

鸣谢

感谢大家观看

BY : 王帅