js进阶——this和对象原型

1. `this` 在 JavaScript 中的应用

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

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

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

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

B. 函数上下文

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

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

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

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

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

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

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

箭头函数中的 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 值。

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

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

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'

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，受原型修改影响