美文网首页
【JS第27期】继承-原型链

【JS第27期】继承-原型链

作者: 前端刊物_bill | 来源:发表于2018-04-29 22:31 被阅读0次

每个构造函数都有一个原型对象,原型对象都包含一个指向函数的指针,而实例都包含一个指向原型对象的内部指针。此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针,假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型对象的链条。也就是原型链。简单实例如下:

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

function ChildPersion(name) {
  this.name = name;
}
// 继承了Persion
ChildPersion.prototype = new Persion();

var child = new ChildPersion('bill')
child.sayName() // bill

以上实例中,ChildPersion继承了Persion,Persion是object的实例,因此,Persion的原型都会指向一个内部指针指向object.prototype。

instanceof()

用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

// 定义构造函数
function C(){} 
function D(){} 

var o = new C();


o instanceof C; // true,因为 Object.getPrototypeOf(o) === C.prototype


o instanceof D; // false,因为 D.prototype不在o的原型链上

o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.

D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true

isPrototypeOf()

用于测试一个对象是否存在于另一个对象的原型链上。

function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

var baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // true
console.log(Bar.prototype.isPrototypeOf(baz)); // true
console.log(Foo.prototype.isPrototypeOf(baz)); // true
console.log(Object.prototype.isPrototypeOf(baz)); // true

注意

在通过原型实现继承时,不能使用对象字面量创建原型方法,因为这样会重写原型链。如:

function Persion(name) {
  this.name = name;
}
Persion.prototype.sayName = function(){
  console.log(this.name)
}
function ChildPersion(name) {
  this.name = name;
}
ChildPersion.prototype = new Persion();
var child = new ChildPersion('bill');
child.sayName() // bill

// 重写ChildPersion.prototype
ChildPersion.prototype = {
  getName: function(){
    console.log(this.getName)
  }
}
var child2 = new ChildPersion('bill');
child2.sayName() // Uncaught TypeError: child2.sayName is not a function

原型链的问题

  • 包含引用类型的原型属性会被所有实例共享,因此,我们如果一个实例中修改了这个原型属性,那么,其他实例的对应属性也会改变
  • 在创建子类型的实例时,不能向超类型的构造函数中传递参数。
qrcode_for_gh_76cb9bd1051f_344.jpg

相关文章

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • js实现继承的几种方式

    js实现继承有几种方式,这里我们主要探讨 原型链继承 构造继承 组合继承(原型链和构造继承组合到一块,使用原型链实...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

  • JS汇总---面向对象&数组

    面向对象 js原型链的继承 静态属性怎么继承 js原型链以及特点 面向对象有哪几个特点 封装,继承,多态 对象的继...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

  • 关于JS中的原型和原型链

    目录 关于js 对象和原型 原型链 基于原型链的继承 参考资料ECMAScript 6 入门JavaScript原...

网友评论

      本文标题:【JS第27期】继承-原型链

      本文链接:https://www.haomeiwen.com/subject/ryvalftx.html