javascript关于this的用法

拖泥羊

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

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

阅读 308

27 声望
3 粉丝
0 条评论
你知道吗?

27 声望
3 粉丝
宣传栏