JavaScript之this详解

this是什么？

JavaScript中的this本质上是一个对象，当一个函数（方法）被调用之时会产生一个对象，而this就可以指向全局作用域或局部作用域下当前的使用对象。

• 任何函数本质上都是通过某个对象来调用的，如果没有直接指定对象，那么该对象就是window。
• 所有函数内部都有一个变量this。
• this的值是调用函数的当前对象。

this不同使用场景

作为一般函数执行

函数的所属者默认绑定到 this 上，其指向全局(Global)对象，在浏览器中，window 就是该全局对象为 [object Window]。

// 作为一般函数执行
function Benz(price) {
        console.log("Benz中的this: " + this); // Benz中的this: [object Window]
        this.price = price;

        // getter
        this.getPrice = function () {
            console.log("getPrice 中的this: " + this); // 未执行，不输出
            return this.price;
        };

        // setter
        this.setPrice = function (price) {
            console.log("setPrice 中的this: " + this); // 未执行，不输出
            this.price = price;
        }
    }

    Benz(500000); // this -> [object Window]

作为构造函数执行

作为构造函数使用时，this指向new出来的新对象。

function Benz(price) {
        console.log("Benz中的this: " + this); // Benz中的this即benz: [object Object]
        this.price = price;

        // getter
        this.getPrice = function () {
            console.log("getPrice 中的this: " + this);
            return this.price;
        };

        // setter
        this.setPrice = function (price) {
            console.log("setPrice 中的this: " + this);
            this.price = price;
        }
    }
    // 作为构造函数
    let benz = new Benz(489800); // this -> benz

作为对象属性执行

作为对象的属性方法执行时候，this指向调用者。

• new 出来对象的属性方法。
• 将方法赋值给其他对象的某个属性，再进行调用。

function Benz(price) {
        console.log("Benz中的this: " + this);
        this.price = price;

        // getter
        this.getPrice = function () {
            console.log("getPrice 中的this: " + this); // getPrice 中的this: [object Object]
            return this.price;
        };

        // setter
        this.setPrice = function (price) {
            console.log("setPrice 中的this: " + this);
            this.price = price;
        }
    }
    // 作为构造函数
    let benz = new Benz(489800); // this -> benz

     // 作为对象的属性方法调用
    benz.getPrice(); // this -> benz

function getBrand() {
        console.log("getBrand中的this：" + this + "，name: " + this.brandName) // getBrand中的this：[object Object]，name: 奔驰
    }

    let benz = {};
    benz.brandName = "奔驰";
    benz.getBrand = getBrand;
    benz.getBrand();

通过call / apply / bind 来调用

apply() 方法接受两个参数第一个是函数运行的作用域，另外一个是一个参数数组(arguments)。
call() 方法第一个参数的意义与 apply() 方法相同，只是其他的参数需要一个个列举出来。

此种情况，无论绑定多少次，this均指向绑定的对象。

let benz = {brandName: "奔驰品牌"};
    let bmw = {brandName: "宝马品牌"}
    let getPrice = function () {
        console.log("getPrice中的this: " + this + ", 品牌名：" + this.brandName);
        return 500000;
    }
    getPrice.call(benz);
    getPrice.apply(benz);

    // bind可以绑定多次，但是this始终指向第一次绑定的benz
    let newGetPrice = getPrice.bind(benz).bind(bmw);
    newGetPrice();

输出：

getPrice中的this: [object Object], 品牌名：奔驰品牌
getPrice中的this: [object Object], 品牌名：奔驰品牌
getPrice中的this: [object Object], 品牌名：奔驰品牌

可见，以上几种调用方式，thsi都是指向了绑定对象benz。

箭头函数中的this

• 函数体内的 this 对象，是定义时所在的对象：箭头函数内的 this 对象，是在定义时，指向词法作用域内的父级对象。
• this在箭头函数中，是固定的：普通函数的 this 对象是执行是指定的，是可变的。箭头函数中 this 是固定的，是固定指向父级上下文 this。
• 箭头函数中的this引用的就是最近作用域中的this。
• 向外层作用域中，一层一层查找this，直到有this的定义。

this的原理

可参考阮一峰的文章。

参考文档：
对阮一峰《ES6 入门》中箭头函数 THIS 描述的探究

JavaScript 的 this 原理