正文

孩子，想学会怎么用js中的原型对象吗？一篇文章教你轻松掌握！

/0 浏览量
0330

引言

JavaScript中的原型对象是理解JavaScript继承机制的关键。原型对象允许我们创建一个引用类型，所有引用类型都继承自某个原型对象。掌握原型对象的使用，可以让你在JavaScript编程中更加得心应手。这篇文章将为你详细介绍JavaScript中的原型对象，帮助你轻松入门。

什么是原型对象？

在JavaScript中，每个函数都有一个原型（prototype）属性，该属性是一个对象。当你创建一个函数时，JavaScript引擎会自动为该函数创建一个原型对象。这个原型对象可以包含一些通用的属性和方法，供所有通过该函数创建的实例对象共享。

原型链

当访问一个对象的属性或方法时，如果该对象自身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到为止。这个过程称为原型链。

创建原型对象

在ES5及之前版本中，我们可以使用prototype属性来创建原型对象。以下是一个例子：

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

var person1 = new Person('张三', 20);
var person2 = new Person('李四', 25);

console.log(person1.sayName()); // 张三
console.log(person2.sayName()); // 李四

在上面的例子中，我们定义了一个Person函数，并为它添加了一个原型对象。原型对象中有一个sayName方法，这个方法可以被所有通过Person函数创建的实例对象调用。

使用Object.create()创建原型对象

在ES5之后，JavaScript新增了Object.create()方法，它可以用来创建一个新对象，同时指定该对象的原型。以下是一个例子：

var personPrototype = {
  sayName: function() {
    console.log(this.name);
  }
};

var person1 = Object.create(personPrototype);
person1.name = '张三';

console.log(person1.sayName()); // 张三

在这个例子中，我们使用Object.create()方法创建了一个新的对象person1，并将其原型设置为personPrototype。这样，person1就可以访问personPrototype中的sayName方法了。

原型链的查找过程

当我们访问一个对象的属性或方法时，JavaScript引擎会按照以下步骤查找：

  1. 检查对象自身是否具有该属性或方法。
  2. 如果没有，沿着原型链向上查找，直到找到为止。
  3. 如果原型链的末端也没有找到，返回undefined。

以下是一个例子：

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

var person1 = new Person('张三', 20);

console.log(person1.name); // 张三
console.log(person1.sayName()); // 张三
console.log(person1.sayAge()); // undefined

在上面的例子中，person1对象没有sayAge方法，因此JavaScript引擎会沿着原型链向上查找，最终返回undefined。

总结

通过这篇文章，你了解了JavaScript中的原型对象和原型链。掌握这些知识，可以帮助你在JavaScript编程中更好地利用继承机制。希望这篇文章对你有所帮助！

-- 展开阅读全文 --