javascript关于this的用法

Posted 2021-09-07 拖泥羊

1、三句话总结this用法：

1. 全局作用域：全局作用域中的 this 指向window。
2. 函数作用域：方法中的 this 指向调用它的对象；如果没有调用者就指向window。
3. 构造函数里：构造函数（或者ES6+的类）中的 this 指向新生成的实例对象。

2、全局作用域：全局中的this，指向window；

// 也是通过变量声明隐式声明的
// 因为全局上下文的变量对象是全局对象自身
var c = 30;
alert(this.c); // 30

var value = 200;
var fun2 = function(){
    // 输出 200
    console.log(this.value);
};

fun2();

3、函数作用域：方法中的 this 指向调用它的对象，如果没有调用者就指向window；

• 方法有所属对象：this指向调用它的对象

var obj = {
    value: 100,
    get: function () {
        // 输出 100
        console.log(this.value);
        // 输出 { value: 100, get: [Function] }，
        // 其实就是 obj 对象本身
        console.log(this);
        return this.value;
    }
};

console.log(obj.get()); // => 100

• 方法没有所属对象：this指向window，这属于系统设计。可以使用变量替代的方法，该变量一般被命名为 self/that等替换this。

var obj = {
    value: 100,
    get: function () {
        var fun1 = function(){
            // 输出 undefined
            console.log(this.value);
            // 输出 window
            console.log(this);
        };
        fun1();
    }
};

obj.get();

4、构造函数里：构造函数（或者ES6+的类）中的 this 指向新生成的实例对象。

// es5 构造函数
function NewClass(){
    this.name = "newClass";
}

var obj = new NewClass();
console.log(obj.name);// 输出newClass

// es6+ 类定义
class Es6Class{
    constructor(){
        this.name = "es6Class";
    }
}

let obj = new Es6Class();
console.log(obj.name);// 输出es6Class

特别鸣谢：拉勾教育前端高薪训练营