小白自学：js中让人头大的原型

JavaScript 中的原型函数是理解 JavaScript 对象和面向对象编程的关键概念之一。本文将带你从零开始学习原型函数的基本概念、用法和重要性。

什么是原型函数？

在 JavaScript 中，每个对象都有一个原型（prototype），原型是一个对象，它包含了对象共享的属性和方法。原型函数是指直接添加到对象原型上的函数，这样所有基于该原型创建的对象都可以访问这些函数。

javascript 复制代码

Person.prototype.say = function() {
  return 'hello';
} // 给Person的原型赋值

function Person() { 
  this.name = '肖总'
  this.age = 18
} // 构造函数Person()

let p = new Person()
let p2 = new Person()

console.log(p2.say == p.say);

从上面的代码可以知道，给Person()构造函数赋予say的值，在下面创建了两个不同的实例对象，这两个不同的实例对象，就拥有了同一个方法。

原型链

在 JavaScript 中，每个对象都有一个原型链（prototype chain），它是由一系列的原型对象组成的链条。当我们访问对象的属性或方法时，JavaScript 引擎会沿着原型链逐级向上查找，直到找到对应的属性或方法，或者直到达到原型链的顶端为止。

ini 复制代码

Car.prototype = {
  name: 'BMW',
  lang: 4900,
  height: 1400
}

function Car(owner, color) {
  this.owner = owner
  this.color = color
}

var car = new Car('你好', 'green')
var car2 = new Car('您好', 'black')

console.log(car.name);

这段代码和上面的代码有异曲同工之处，在构造函数中我们设立了两个属性，然后再给它的原型函赋予一个对象，当我们调用car.name时，你会发现car中没有name这个属性，于时js引擎就找到它构造函数Car的原型，然后就找到了原型中的name属性，输出结果就是BMW，这就是原型链向上查找的方式。有趣的是绝大部分的对象最后找到的原型都是Object.prototype.

如何创建原型函数？

要创建原型函数，我们可以通过在构造函数的原型对象上添加方法来实现。下面是一个简单的示例：

javascript 复制代码

// 定义一个构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 在构造函数的原型对象上添加一个方法
Person.prototype.sayHello = function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
};

// 创建一个 Person 对象
let person1 = new Person('Alice', 30);

// 调用原型函数
person1.sayHello(); // 输出 "Hello, my name is Alice and I am 30 years old."

为什么要使用原型函数？

使用原型函数的好处有很多：

节省内存空间： 将方法添加到原型对象上可以节省内存空间，因为所有基于该原型创建的对象都共享这些方法。
方便维护： 通过原型函数，我们可以轻松地将方法添加到所有对象上，而不需要逐个对象添加，提高了代码的可维护性。
减少重复代码： 原型函数使得我们可以将相同的方法定义在一个地方，避免了重复编写相同的代码。

总结

通过本文的介绍，你应该对 JavaScript 中的原型函数有了基本的了解。原型函数是 JavaScript 中面向对象编程的重要组成部分，它使得我们可以轻松地将方法添加到对象上，并且节省了内存空间，提高了代码的可维护性和重用性。继续学习原型函数，并将其运用到实际项目中，你将成为一名更加优秀的 JavaScript 开发者。