JS中this上下文对象使用方式

JS中的this代表当前函数的执行环境，即当前函数的上下文对象。一个函数的this值是在函数调用时确定的，也就是在运行时动态绑定的。因此，可以灵活地根据调用函数的不同，来指定this的值和作用范围。本文将为您详细讲解JS中this上下文对象的使用方式，包括常规函数和箭头函数，同时提供相应的示例说明。

常规函数中的this

在JS中，函数的this值可以通过4种不同的调用方式来确定，分别是：函数调用模式、方法调用模式、构造函数调用模式、apply和call调用模式。以下将详细介绍这4种调用模式并提供示例。

1. 函数调用模式

当一个函数作为普通函数调用时，this的值指向默认的全局对象window。示例如下：

function test() {
    console.log(this); // 输出window
}
test();

2. 方法调用模式

当一个函数作为对象的方法调用时，this的值指向调用该方法的对象。示例如下：

var obj = {
    name: 'hello',
    sayHello: function() {
        console.log(this.name);
    }
};
obj.sayHello(); // 输出hello

3. 构造函数调用模式

当一个函数以构造函数的方式调用时，this的值指向一个新创建的对象。示例如下：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p = new Person('张三', 18);
console.log(p.name); // 输出张三
console.log(p.age); // 输出18

4. apply和call调用模式

通过apply和call调用函数时，可以明确指定this的值。示例如下：

var obj1 = {name: 'obj1'};
var obj2 = {name: 'obj2'};

function test() {
    console.log(this.name);
}

test.apply(obj1); // 输出obj1
test.call(obj2); // 输出obj2

箭头函数中的this

在箭头函数中，this的值被继承自包含箭头函数的最近的非箭头函数的上下文。换句话说，箭头函数没有自己的this，其中的this和外部环境的this指向是相同的。示例如下：

var obj = {
    name: 'hello',
    sayHello: function() {
        var arrow = () => console.log(this.name);
        arrow();
    }
};
obj.sayHello(); // 输出hello

以上便是关于JS中this上下文对象使用方式的完整攻略，希望对您有所帮助。

阅读剩余 38%