JavaScript 原型初探：10 分钟掌握原型精髓

2023-05-26 09:44:15

JavaScript 原型：一文速解，提升你的编程技能

什么是原型？

想象一下，原型就像一个蓝图，它定义了对象的结构和行为。每个对象都有一个原型，而这个原型本身也是一个对象，包含着对象可以继承的属性和方法。

通过访问 __proto__ 属性，我们可以查看一个对象的原型。就像这样：

const obj = {};
console.log(obj.__proto__); // {} (Object.prototype)

结果显示，obj 的原型是一个空对象，因为它是直接通过 Object 构造函数创建的，而 Object 构造函数的原型就是一个空对象。

原型继承

JavaScript 中，对象通过原型实现继承。当创建一个对象时，它会自动继承其原型的属性和方法。举个例子：

const person = {
  name: "张三",
  age: 20,
};

const student = Object.create(person);
console.log(student.name); // 张三
console.log(student.age); // 20

在这个例子中，student 对象是通过 Object.create() 方法创建的，它的原型是 person 对象，因此它继承了 person 对象的属性和方法。

原型链

每个 JavaScript 对象都有一个原型链，它是一个指向其原型的链条，允许对象访问其原型及其原型的属性和方法。比如：

const obj = {};
console.log(obj.__proto__.__proto__); // {} (Object.prototype)
console.log(obj.__proto__.__proto__.__proto__); // null

在这个例子中，obj 的原型链为：obj -> Object.prototype -> null。

原型方法和原型属性

原型对象可以包含属性和方法，这些属性和方法可以被对象继承。

原型方法是定义在原型对象上的方法，它可以被对象继承和使用。比如：

const person = {
  name: "张三",
  age: 20,
  sayHello() {
    console.log("Hello, my name is " + this.name);
  },
};

const student = Object.create(person);
student.sayHello(); // Hello, my name is 张三

在这个例子中，person 对象的 sayHello() 方法是一个原型方法，它被 student 对象继承并使用。

原型属性是定义在原型对象上的属性，它可以被对象继承和使用。比如：

const person = {
  name: "张三",
  age: 20,
};

const student = Object.create(person);
console.log(student.name); // 张三
console.log(student.age); // 20

在这个例子中，person 对象的 name 和 age 属性是原型属性，它们被 student 对象继承和使用。

构造函数

构造函数是创建对象的函数，它可以指定对象的原型。比如：

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

const person = new Person("张三", 20);
console.log(person.name); // 张三
console.log(person.age); // 20