返回

揭秘 JavaScript 原型:了解函数、对象和继承的奥秘

前端

一. 原型

1. 函数的 prototype 属性

每个函数都有一个 prototype 属性,它默认指向一个 Object 空对象(即称为:原型对象)。原型对象中有一个属性 constructor,它指向创建该函数的构造函数。

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

console.log(Person.prototype); // Object { constructor: ƒ }

2. 原型链

每个对象都有一个内部属性 [[Prototype]],它指向它的原型对象。对象的 [[Prototype]] 属性是隐藏的,不能直接访问,但可以通过 Object.getPrototypeOf() 方法来获取。

const person = new Person('John', 30);

console.log(Object.getPrototypeOf(person)); // { constructor: ƒ }

原型链是一个对象到原型对象的链条,它从当前对象开始,沿着 [[Prototype]] 属性一直向上追溯,直到遇到 null 为止。原型链的作用是允许对象继承原型对象中的属性和方法。

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

person.greet(); // Hello, my name is John and I am 30 years old.

二. 原型继承

原型继承是 JavaScript 中实现继承的一种方式。当一个对象被创建时,它会继承其原型对象中的所有属性和方法。

const student = new Person('Jane', 20);

console.log(student.name); // Jane
console.log(student.age); // 20
student.greet(); // Hello, my name is Jane and I am 20 years old.

三. 对象创建和克隆

在 JavaScript 中,对象可以通过多种方式创建和克隆。

1. 使用 new 运算符创建对象

const person = new Person('John', 30);

2. 使用字面量创建对象

const person = {
  name: 'John',
  age: 30
};

3. 使用 Object.create() 方法创建对象

const person = Object.create(Person.prototype);
person.name = 'John';
person.age = 30;

4. 使用 Object.assign() 方法克隆对象

const person = {
  name: 'John',
  age: 30
};

const student = Object.assign({}, person);

总结

原型是 JavaScript 中一个重要的概念,它揭示了函数、对象和继承之间的紧密关系。原型链允许对象继承原型对象中的属性和方法,原型继承则是 JavaScript 中实现继承的一种方式。对象可以通过多种方式创建和克隆。