javascript中原型用法详解-前端问答-PHP中文网

javascript中原型用法详解

PHPz

发布： 2023-05-21 09:09:07

原创

468 人浏览过

JavaScript是一种非常流行的编程语言。JavaScript的强大之处在于它的原型（prototype）。

原型是JavaScript对象模型（Object Model）中的一个概念。它允许我们建立对象通过继承其他对象的属性和方法。这是JavaScript中的继承方式。

本文将详细介绍JavaScript中原型的用法。

一、什么是原型

JavaScript中每个对象都是由它的原型派生而来的。一个对象的原型是另一个对象，它拥有一个原型链。这个原型链上的每个对象都是从最初的对象开始一步一步派生而来的，直到祖先对象——Object的原型。

举个例子：

//创建一个对象
var obj = {};

登录后复制

上面的代码创建了一个空对象，它的原型链是这样的：

obj -> Object.prototype -> null

对象obj是从Object.prototype对象派生而来的。而Object.prototype是JavaScript中所有对象的祖先。

二、原型和构造函数

JavaScript中有两个与原型紧密相关的概念：构造函数和实例。

构造函数

构造函数是用来创建特定类型对象的函数。构造函数可以用原型来定义属性和函数。比如：

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

登录后复制

上面的代码定义了一个构造函数Person，它有两个参数：name和age。在构造函数中，我们通过this关键字来给对象实例设置属性。现在我们来创建一个Person对象：

var person1 = new Person('Tom', 20);

登录后复制

这个对象person1是由Person构造函数创建的，它有两个属性：name和age。

实例

实例是由构造函数创建的对象。实例可以访问构造函数原型中定义的属性和方法。比如：

//定义Person的原型方法
Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}
//调用对象方法
person1.sayHello();

登录后复制

在Person的原型上定义了一个方法sayHello，它可以被所有Person的实例访问。所以当我们调用person1.sayHello()方法时，它输出的是：Hello, my name is Tom。

三、原型继承

原型继承是JavaScript中继承的主要方式。它是通过原型链来实现的。

继承是指一个对象可以访问另一个对象的属性和方法。比如一个子对象可以继承它的父对象的属性和方法。在JavaScript中，一个对象可以通过继承来拥有另一个对象的属性和方法。

我们可以给原型对象添加属性和方法，这些属性和方法会继承到由构造函数创建的实例中。比如：

//定义一个Animal对象
function Animal(name) {
  this.name = name;
}
//在Animal的原型上定义一个属性
Animal.prototype.color = 'red';
//创建一个实例
var cat = new Animal('Tom');

登录后复制

上面的代码中，我们定义了一个Animal对象，它有一个name属性和一个原型属性color。然后我们创建一个cat实例，实例cat继承了Animal的原型属性color。

可以使用hasOwnProperty()方法来判断一个实例是否包含它自己的特定属性。比如：

console.log(cat.hasOwnProperty('name')); // true
console.log(cat.hasOwnProperty('color')); // false

登录后复制

四、原型静态方法和属性

静态方法和属性是属于构造函数本身的，它们不是属于实例的。在ES5之前，JavaScript没有提供静态方法和属性的官方机制，所以开发人员通常是手动添加到构造函数上。

比如：

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

登录后复制

上面的代码中，我们定义了一个静态方法create()。这个方法可以通过构造函数本身来调用，而不是通过实例来调用。

在ES6中，可以使用class语法来定义静态方法和属性。比如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static create(name, age) {
    return new Person(name, age);
  }
}

登录后复制

上面的代码中，我们使用class语法来定义了一个静态方法create()。

五、原型继承的缺点

原型继承是非常强大和灵活的，因为我们可以继承任何对象的属性和方法。但它也有一些缺点。