JavaScript中的原型,原型链分别是什么?

一、原型

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象

在JavaScript中,原型是每个对象都具有的一个内部属性。它是一个指向另一个对象或null的引用,该对象包含了可供当前对象访问和使用的属性和方法。如果某个对象访问一个不存在的属性或方法,JavaScript引擎会自动查找该对象的原型链,以尝试在其原型对象中找到该属性或方法。

准确地说,这些属性和方法定义在 Object 的构造器函数 (constructor function)之上的 prototype 属性上,而非实例对象本身。

那么什么是构造器函数呢?

构造器函数也叫构造函数,在 JavaScript 中,构造函数是一种用于创建特定类型对象的函数。它们通常使用 new 关键字来创建一个新的对象实例,并可以设置该对象的属性和方法。

构造函数与普通函数的区别在于,它们通过 this 关键字来引用当前正在创建的对象实例。此外,构造函数通常被命名为大写字母开头的变量名,以便与其他函数进行区分。

例如,下面是一个简单的构造函数,用于创建一个名为 Person 的对象:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name + ', and I am ' + this.age + ' years old.');
  };
}

var person1 = new Person('Alice', 20);
person1.sayHello(); // 输出:Hello, my name is Alice, and I am 20 years old.

在这里,我们定义了一个构造函数 Person,它接收两个参数 name 和 age。当我们通过 new 关键字调用该函数时,它会创建一个新的 Person 对象,并将传入的参数设置为该对象的属性值。同时,我们还定义了名为 sayHello 的方法,用于向控制台输出问候语。最后,通过实例化一个 person1 对象并调用其 sayHello 方法,我们可以验证该构造函数的工作方式。

总之,构造函数是一种JavaScript中用于创建特殊类型对象的重要机制,使我们能够方便地创建和管理对象的属性和方法。

现在回到原型上,下面举个例子:

函数可以有属性。每个函数都有一个特殊的属性叫做原型 prototype

function doSomething(){
  console.log(doSomething.prototype)
}

控制台输出

以上就是原型对象,其中constructor 属性就是构造函数了,它指向该函数。

二、原型链

原型链是由对象之间原型属性的链接所组成的链式结构。每个对象都可以拥有一个原型对象,这个原型对象又可能拥有自己的原型对象,这样就形成了一条由连接起来的原型对象链。对于任意一个对象,如果它本身没有某个属性或方法,则 JavaScript引擎会在它的原型链中依次向上查找,直到找到包含该属性或方法的对象为止。

当我们在 JavaScript 中创建一个对象时,该对象都会自动拥有一个 __proto__ 属性,该属性指向其原型对象。原型对象本身也可以包含 __proto__ 属性,这一过程可以一直向上延伸形成一个链式结构,即所谓的原型链。

下面通过一个例子来说明原型链:

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

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

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

// 访问 person1 对象的 __proto__ 属性,它指向了 Person.prototype
console.log(person1.__proto__ === Person.prototype); // 输出:true

// 继续访问 Person.prototype 的 __proto__ 属性,它指向了 Object.prototype
console.log(Person.prototype.__proto__ === Object.prototype); // 输出:true

// 继续访问 Object.prototype 的 __proto__ 属性,它指向了 null
console.log(Object.prototype.__proto__ === null); // 输出:true

在此示例中,我们首先定义了一个名为 Person 的构造函数,并在其原型对象 Person.prototype 中定义了一个 sayHello 方法。然后,我们创建了一个 person1 对象,在访问其 __proto__ 属性时,它指向了 Person.prototype。接着,我们继续访问 Person.prototype 的 __proto__ 属性,它指向了 Object.prototype。最后,我们继续访问 Object.prototype 的 __proto__ 属性, 它指向了 null。

因此,在 JavaScript 中,当我们访问一个对象的属性或方法时,JavaScript 引擎首先查找该对象内部是否存在这个属性或方法。如果不存在,则从其原型链中查找,找到第一个包含这个属性或方法的对象并返回相应的值。如果整个原型链都没有找到,则返回 undefined。

总之,原型链是 JavaScript 中非常重要的一个概念,它使得对象能够继承和共享原型对象的属性和方法,从而帮助我们更高效地实现面向对象编程。

三、总结

  1. 原型:在JavaScript中,每个对象都有一个与之相关联的原型对象(或称为prototype),用于共享属性和方法。构造函数本身也是一个函数对象,它有自己的原型对象以及通过它创建的实例的原型对象。
  2. 原型链:当我们需要访问一个对象的属性或方法时,如果该对象本身没有定义这些属性和方法,JavaScript引擎就会沿着该对象的原型链向上查找,直到找到匹配的属性或方法,或者到达原型链的顶端null。这个从当前对象所属原型对象一直向上查找的过程就是原型链。因此,可以认为原型链是由各个对象(包括函数对象)的原型对象构成的链表结构,用于实现继承和共享。

总之,原型和原型链是JavaScript面向对象编程的核心机制之一。它们使得复用和扩展已有对象的行为变得方便、灵活和高效。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值