JavaScript创建对象的几种方式及关于this指向问题

当我们使用 JavaScript 开发应用时, 经常要通过创建对象来实现某些功能。JavaScript 中有多种方式可以创建对象，下面是几种常见的方法。

1. 字面量方式

最常见的创建对象的方式就是使用字面量方式，我们使用对象字面量来创建一个对象，并将其赋值给一个变量或常量。

const obj = {
    name: 'Tom',
    age: 20
}

对象字面量语法非常简单，它遵循一对大括号“{}”来定义，对象中的属性用“键名:属性值”的形式来定义。上述代码创建了一个对象 obj，包含两个属性 name 和 age。

2. 构造函数方式

除了字面量方式，我们还可以使用构造函数来创建对象。构造函数可以理解为一个模板，用于创建多个相似对象。在构造函数内部，通过 this 关键字添加属性和方法，这些属性和方法会作为实例的属性和方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function () {
        console.log(`Hi, I'm ${this.name}.`);
    }
}

const person1 = new Person('Tom', 20);
person1.sayHi(); // Hi, I'm Tom.

上述代码中，我们创建了一个名为 Person 的构造函数，通过 this 关键字给该函数添加了 name 和 age 属性，以及 sayHi 方法。之后又使用 new 关键字创建了一个 person1 实例，该实例包含了之前添加的属性和方法，最后调用了 sayHi 方法输出了 Hi, I'm Tom.。

3. 工厂函数方式

与构造函数方式类似，我们还可以使用工厂函数来创建对象。工厂函数其实就是一个返回对象的函数，工厂函数可以接收参数，根据参数的不同返回不同的对象。

function createPerson(name, age) {
    return {
        name,
        age,
        sayHi() {
            console.log(`Hi, I'm ${this.name}.`);
        }
    };
}

const person2 = createPerson('Jerry', 22);
person2.sayHi(); // Hi, I'm Jerry.

上述代码中，我们创建了一个名为 createPerson 的工厂函数，该函数接收参数 name 和 age，并返回一个包含 name 和 age 属性以及 sayHi 方法的对象。我们使用该工厂函数创建了实例 person2，并调用了 sayHi 方法，输出了 Hi, I'm Jerry.。

this指向问题

在 JavaScript 中，this 关键字通常指向当前函数执行时所在的对象。但是有许多情况下，this 指向的对象并不是我们期望的对象。可能是因为我们忽略了 JavaScript 中 this 的特殊性，或者没有使用正确的 this 绑定方法，导致了 this 的指向出现问题。涉及到 this 指向问题的场景，常见的有以下几种。

this 指向全局对象

当在函数中使用 this 时，如果当前函数没有明确指定 this 指向哪个对象，那么 this 就会指向全局对象，也就是 window。

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

const obj = {
    name: 'Tom',
    showName: showName
}

showName(); // undefined

obj.showName(); // Tom

上述代码中，showName() 函数中没有明确指定 this 指向哪个对象，而直接调用函数时，this 指向 window，因此输出 undefined。而在 obj.showName() 中，this 指向调用该方法的对象 obj，因此输出 Tom。

箭头函数中的this

与其他函数不同，箭头函数中的 this 关键字指向函数定义时所处的作用域，而非函数执行时所在的作用域。因此，当我们在箭头函数中使用 this 时，它不会被绑定到函数调用的对象上，而会被绑定到当前代码执行上下文的作用域链中。

const obj = {
    name: 'Tom',
    greet() {
        const morning = () => {
            console.log(`Good morning, ${this.name}.`);
        };
        morning();
    }
};

obj.greet(); // Good morning, Tom.

上述代码中，我们使用箭头函数 morning 来输出对 obj 中属性 name 的引用。由于箭头函数中的 this 关键字指向函数定义时所处的作用域，所以它能访问 greet 方法中的 this 对象，从而输出了 Good morning, Tom.。

通过以上的讲解，我们对于 javascript 中常用的对象创建方式及 this 指向的问题有了进一步的了解。