JavaScript 原型

首先来看一个用构造函数创建对象的简单例子:

function Person() {

}
var person = new Person();
person.name = "David";
console.log(person.name);  // David

使用构造函数创建对象的主要问题,就是每个方法都要在每个实例上重新创建一遍。这个时候我们就需要用到函数的原型:

一、prototype(原型)

请看下面的例子:

function Person() {

}
Person.prototype.name = "David";
var person1 = new Person();
var person2 = new Person();
console.log(person1.name);  // David
console.log(person2.name);  // David

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含由其构造函数创建的所有实例共享的属性和方法。可以这么理解,prototype是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。

二、实例对象与原型对象

实例对象可以引用原型对象的属性和方法(前面例子中展示的),说明实例对象可以指向原型对象。下面展示两种通过实例对象访问原型对象的方式:

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype);  // true
console.log(Object.getPrototypeOf(person) === Person.prototype);  // true

实例对象可以指向原型对象,原型对象却无法指向实例对象。这个很容易理解,因为一个构造函数可以生成多个实例。

三、构造函数与原型对象

前面我们看到,构造函数通过.prototype指向原型对象。相反的,每个原型也都有一个 constructor 属性指向关联的构造函数,例如:

function Person() {

}
console.log(Person === Person.prototype.constructor);  // true

四、实例对象与构造函数

实例对象是由构造函数创建的,它可以通过原型对象间接访问构造函数,实例对象也可以通过constructor属性访问到构造函数,但是要注意,实例对象没有constructor属性,它其实是调用了其原型对象的constructor属性。例如:

function Person() {

}
var person = new Person();
console.log(person.constructor === Person);  // true

五、原型链

原型链是JavaScript中实现继承的主要方法。每个实例都包含一个指向原型对象的指针,当读取实例的属性时,若查询不到,则向上查询它的原型对象,若依然查询不到,则继续查询它原型对象的原型,一直找到最顶层为止,这个链条就叫做原型链。
可以通过让原型对象等于另一个类型实例的方法构建原型链。Object.prototype是所有原型对象的原型。看下面的例子:

function Person() {

}
Object.prototype.name = "David";
var person = new Person();
console.log(person.name);  // David

该过程的原型链如下图蓝线所示:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值