JavaScript原型链

原型链是什么

构造函数怒或构造器具有prototype属性,对象具有*proto*属性,这就是之前学习的原型。

如果构造函数或对象A,A的属性指向构造函数或对象B,B的原型再指向构造函数或对象C,以此类推,最终的构造函数或对象的原型指向Object的原型。由此形成一条链状结构,被称之为原型链。按照上述的描述,在B中定义的属性或方法,可以直接在A中使用并不需要定义。这就是继承,它允许每个对象来访问其原型链上的任何属性或方法。

原型链是ECMAScript标准中指定的默认实现继承的方式。

// 原型链
function A(){
  this.a = 'a';
}
// 通过构造函数创建对象
var a = new A();
console.log(a.a);

function B(){
  this.b = 'b';
}
// 将B的原型指向对象a
B.prototype = a;
// 通过构造函数创建对象
var b = new B();
console.log(b.b);
console.log(b.a);

function C(){
  this.c = 'c';
}
// 将C的原型指向对象b
C.prototype = b;
// 通过构造函数创建对象
var c = new C();

console.log(c.c);
console.log(c.b);
console.log(c.a);

原型链的问题

原型链虽然很强大,用它可以实现JavaScript中的继承,但同时也存在着一些问题。

  • 原型链实际上是在很多个构造函数或对象之间共享属性和方法。
  • 创建子类的对象时,不能向父级的构造函数传递任何参数。

综上所述,在实际开发中很少会单独使用原型链。

// 原型链继承问题
function A(){
  this.a = 'a';
}
// 通过构造函数创建对象
var a = new A();
console.log(a.a);
console.log(a.c);
console.log(a.b);

function B(){
  this.b = 'b';
}
// 将B的原型指向对象a
B.prototype = a;
// 通过构造函数创建对象
var b = new B();
console.log(b.b);
console.log(b.a);

console.log(b.c);

function C(){
  this.c = 'c';
}
// 将C的原型指向对象b
C.prototype = b;
// 通过构造函数创建对象
var c = new C();

console.log(c.c);
console.log(c.b);
console.log(c.a);
// 原型链
function A(){
  // 将自有属性改写为原型属性
  // this.a = 'a';
}
A.prototype.a = 'a';


function B(){
  // this.b = 'b';
}
// B.prototype.b = 'b';
// 将B的原型指向对象a
B.prototype = A.prototype;

B.prototype.b = 'b';


function C(){
  // this.c = 'c';
}
// 将C的原型指向对象b
C.prototype = B.prototype;

C.prototype.c = 'c';

var a = new A();

console.log(a.a);
console.log(a.b);
console.log(a.c);

var b = new B();

console.log(b.a);
console.log(b.b);
console.log(b.c);

var c = new C();

console.log(c.a);
console.log(c.b);
console.log(c.c);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值