原型对象与原型链带你一览Js面向对象内幕

前端

2023-10-31 18:19:42

JavaScript中的原型链：面向对象编程的神奇之处

当你想到面向对象编程时，你可能会立即想到Java、C++等语言。但JavaScript，这个充满活力、动态的语言，也有其独特的面向对象编程实现方式：原型链 。

原型机制：JavaScript独特的面向对象风格

传统的面向对象编程语言使用类来创建对象。但JavaScript没有类，它有对象和原型。每个对象都基于一个原型对象 ，原型对象充当其父级。

对象属性的访问和查找

对象存储键值对，称为属性。可以通过两种方式访问对象属性：点语法和方括号语法。

原型链查找

当对象试图访问不存在的属性时，JavaScript会通过原型链查找 的过程对其原型对象 进行查找。查找过程一直持续到找到该属性或到达原型链的顶部（即Object.prototype）。

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

console.log(person.name); // 输出 "John Doe"
console.log(person.age); // 输出 30
console.log(person.hobby); // 输出 undefined

在上面的示例中，person对象没有hobby属性。因此，JavaScript会搜索person对象的原型对象（Object.prototype），但Object.prototype也没有hobby属性。因此，返回undefined。

继承的强大力量

原型链使JavaScript对象能够共享属性和方法，即继承。通过设置子对象的原型为父对象，可以实现继承。

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

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

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

Student.prototype = Object.create(Person.prototype);

const student = new Student("John Doe", 30, "Computer Science");

student.greet(); // 输出 "Hello, my name is John Doe"