js进阶——this和对象原型

1. this 在 JavaScript 中的应用

在 JavaScript 中，this 的值取决于函数的执行上下文和调用方式。以下是 this 在不同上下文中的行为解释：

A. 全局上下文（非严格模式）

在全局执行上下文中，this 指向全局对象（在浏览器中是 window 对象，在 Node.js 中是 global 对象）。

console.log(this); // 在浏览器中，this 指向 window 对象

B. 函数上下文

函数内部的 this 取决于函数的调用方式：

1. 作为对象的方法调用

   当函数作为对象的方法被调用时，this 指向调用该方法的对象。

   const obj = {
     name: 'Alice',
     greet() {
       console.log(this.name);
     }
   };
   obj.greet(); // 输出 'Alice', 因为 this 指向 obj

2. 作为普通函数调用

   在非严格模式下，普通函数调用中的 this 指向全局对象（浏览器中为 window），而在严格模式下，this 为 undefined。

   function showName() {
     console.log(this.name);
   }
   
   // 非严格模式下
   showName(); // this 指向 window，可能会输出 undefined
   
   // 严格模式下
   'use strict';
   showName(); // this 是 undefined，调用会抛出错误

3. 构造函数调用

   当使用 new 关键字调用构造函数时，this 指向新创建的对象。

   function Person(name) {
     this.name = name;
   }
   
   const person = new Person('Bob');
   console.log(person.name); // 输出 'Bob', this 指向新对象 person

4. 箭头函数中的 this

   箭头函数不绑定自己的 this，它会捕获上下文中最近的 this 值。箭头函数常用于避免 this 在不同上下文中变化。

   const obj = {
     name: 'Carol',
     greet: function() {
       const innerFunc = () => {
         console.log(this.name); // this 来自 obj 上下文
       };
       innerFunc();
     }
   };
   
   obj.greet(); // 输出 'Carol'

C. call、apply 和 bind

这三个方法可以显式地绑定 this，并控制函数中的 this 值。

1. call

   使用 call 可以显式指定 this，并立即调用函数。

   function greet() {
     console.log(this.name);
   }
   
   const person = { name: 'David' };
   greet.call(person); // 输出 'David'

2. apply
apply 与 call 类似，但它接受的是数组作为参数。

   function introduce(age, country) {
     console.log(`${this.name}, ${age}, from ${country}`);
   }
   
   const person = { name: 'Eva' };
   introduce.apply(person, [25, 'USA']); // 输出 'Eva, 25, from USA'

3. bind
bind 会返回一个新函数，this 永远绑定到指定的值。

   const person = { name: 'Frank' };
   const boundFunc = greet.bind(person);
   boundFunc(); // 输出 'Frank'

2. 对象原型（Prototype）

JavaScript 中的原型机制是对象之间继承的核心。每个 JavaScript 对象都有一个与之相关联的原型对象（prototype），通过它可以实现属性和方法的继承。

A. 原型链

每个对象都有一个内部属性 [[Prototype]]（可以通过 __proto__ 访问）。如果在对象上找不到某个属性，JavaScript 会沿着原型链向上查找，直到找到该属性或到达原型链的顶端（null）。

const animal = {
  speak() {
    console.log('Animal sound');
  }
};

const dog = {
  bark() {
    console.log('Woof!');
  }
};

// 将 dog 的原型设为 animal
dog.__proto__ = animal;

dog.bark(); // 输出 'Woof!'
dog.speak(); // 输出 'Animal sound', 来自 animal 的原型

B. 构造函数与原型

当通过构造函数创建对象时，构造函数的 prototype 属性会成为新对象的原型。

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');
john.greet(); // 输出 'Hello, my name is John'

C. Object.create()

Object.create() 是一个常用方法，可以创建一个新对象，并将其原型设置为指定的对象。

const parent = {
  speak() {
    console.log('I am parent');
  }
};

const child = Object.create(parent);
child.speak(); // 输出 'I am parent', child 继承了 parent 的方法

D. 原型链继承的缺陷

由于 JavaScript 中的对象共享同一原型，当修改原型对象的属性时，所有继承该原型的对象都会受到影响。

function Animal() {}

Animal.prototype.legs = 4;

const dog = new Animal();
const cat = new Animal();

dog.legs = 3; // 修改实例属性
console.log(cat.legs); // 输出 4，cat 的 legs 没有受到影响

Animal.prototype.legs = 2; // 修改原型属性
console.log(dog.legs); // 输出 3，实例属性优先
console.log(cat.legs); // 输出 2，受原型修改影响

总结

• this 是 JavaScript 中一个强大但有时难以理解的机制，其值取决于函数调用的方式。
• 原型机制和原型链是 JavaScript 中对象继承的基础，构成了对象与函数的继承关系。

深入理解 this 和对象原型可以帮助你更好地掌握 JavaScript 的复杂机制，在构建复杂应用程序时写出更清晰、可维护的代码。