JavaScript原型和执行上下文：解开JavaScript魔法的钥匙

2023-12-21 02:16:13

深入浅出解JavaScript原型和执行上下文

原型：继承的秘密武器

在JavaScript中，原型是一个对象，它定义了另一个对象（子对象）的属性和方法。就像孩子继承父母的基因一样，子对象可以继承原型的属性和方法。这使JavaScript中的对象可以轻松地共享属性和方法，从而实现代码的复用和扩展。

代码示例：

// 定义一个原型
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."

原型链：属性查找之旅

原型链是一个对象链，从子对象开始，一直延伸到根对象（Object.prototype）。当子对象试图访问一个不存在的属性或方法时，JavaScript就会沿着原型链向上查找，直到找到该属性或方法为止。

代码示例：

// Person的原型链
console.log(Person.prototype); // 输出: {constructor: ƒ, greet: ƒ}
console.log(Person.prototype.constructor); // 输出: ƒ Person(name)

// john的原型链
console.log(john.__proto__); // 输出: {constructor: ƒ, greet: ƒ}
console.log(john.__proto__.__proto__); // 输出: {constructor: ƒ}

执行上下文：代码执行的舞台

执行上下文是JavaScript代码执行的环境。它包含了变量对象、作用域和this等重要信息。当JavaScript代码执行时，它会在执行上下文中创建变量对象并保存变量的值。同时，执行上下文还会确定代码的作用域，以及this的值。

变量对象：变量值的宝库

变量对象是执行上下文中保存变量值的对象。它可以是全局变量对象，也可以是函数变量对象。全局变量对象保存了全局变量的值，而函数变量对象保存了函数局部变量的值。

代码示例：

// 全局变量对象
console.log(window); // 输出: {location: Location, history: History, ...}

// 函数变量对象
function greet(name) {
  console.log(arguments); // 输出: {0: "John"}
}

greet("John");

作用域：变量可访问性的边界

作用域是执行上下文中代码可以访问的变量的集合。它可以是全局作用域，也可以是函数作用域。全局作用域是整个JavaScript程序可以访问的变量的集合，而函数作用域是函数内部可以访问的变量的集合。

代码示例：

// 全局作用域
var name = "John";

// 函数作用域
function greet() {
  var age = 30;
  console.log(name); // 输出: "John"
  console.log(age); // 输出: 30
}

greet();

this：当前对象的指针

this是执行上下文中指向当前对象的指针。它可以是全局对象、函数对象或其他对象。当JavaScript代码中的函数被调用时，this的值会指向该函数所属的对象。

代码示例：

// 全局对象
console.log(this); // 输出: Window {location: Location, history: History, ...}

// 函数对象
function Person() {
  console.log(this); // 输出: Person {}
}

new Person();