美文网首页
JS原型链知识学习笔记

JS原型链知识学习笔记

作者: 邢看山 | 来源:发表于2017-02-19 12:00 被阅读0次

ECMAScript 中描述了原型链的概念,并将原型链作为实现集成的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
构造函数、原型和实例的关系:
每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。
那么,假如我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型(原型2)的指针,显然原型2中也包含一个指向构造函数2的指针,同样的,原型2又是原型3的实例,层层递进,就构成了实例与原型链的链条。即原型链。
代码演示如下:

function SuperType() { 
    this.property = true;
}
SuperType.prototype.getSuperValue = function () {
    return this.property;
};
function SubType() {
    this.subproperty = false;
}

//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
    return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());     //true

以上代码定义了SuperType和SubType这两个类型,其分别有一个属性和方法。通过创建SuperType的实例,并将该实例赋给SubType.prototype,实现了Subtype对SuperType的继承。因此,SuperType的所有属性和方法,现在也存在于SubType.prototype中。之后,我们又给SubType.prototype添加了方法getSubValue,这样就在继承了SuperType的属性和方法的基础上又添加了一个新方法。

关系图
结合上边的例子,根据原型搜索机制,调用instance.getSuperValue()会经历sanger搜索步骤:搜索实例→搜索SubType.prototype→搜索SuperType.prototype,最后找到该方法。
所有函数的默认原型都是object的实例,因此默认原型都会包含一个指向object.prototype的内部指针。因此,所有自定义类型才会继承toString()、valueOf()等默认方法。
确定原型和实例的关系:
  • instanceof 操作符:
alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true
  • isPrototypeOf()方法
alert(Object.prototype.isPrototypeOf(instance));  //true
alert(SuperType.prototype.isPrototypeOf(instance));  //true
alert(SubType.prototype.isPrototypeOf(instance));  //true

注意

  • 给原型添加方法的代码一定要放在替换原型的语句之后
  • 不能使用对象字面量创建原型方法
  • 包含引用类型值的原型属性会被所有实例共享

相关文章

  • JS原型链知识学习笔记

    ECMAScript 中描述了原型链的概念,并将原型链作为实现集成的主要方法。其基本思想是利用原型让一个引用类型继...

  • JavaScript原型对象与原型链

    一、前言 原型和原型链是 JavaScript中不可避免需要碰到的知识点,在刚开始学习 JS 时,原型和原型链都是...

  • JS的__proto__和prototype

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

  • Javascript原型理解(面试篇)

    本文是学习JS原型相关知识后的总结与笔记:学习文章参考《一文吃透所有JS原型相关知识点》 在面试中会被经常问到JS...

  • 5-1 从基础知识到JSWebAPI

    回顾js基础知识 JS-web-API 总结 回顾js基础知识 变量类型和计算 原型和原型链 闭包与作用域 异步和...

  • Javascript学习规划

    Javascript知识点学习规划关键字 1. Js模块化 2. 作用域与作用域链 3. 原型与原型链 4. 闭包...

  • JS原型链学习笔记

    这里推荐两篇很好的博客 和 MDN的文档 帮你彻底搞懂JS中的prototype、proto与constructo...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • 原型与原型链相关

    前言 最近在整理原生JS的相关知识,发现关于原型和原型链涉及的知识对理解JS有很大的帮助。遂分享一下。 构造函数 ...

  • JS中的原型和原型链详解

    JS中的原型和原型链是大家彻底搞懂JS面向对象及JS中继承相关知识模块非常重要的一个模块,一旦突破这块知识点,相信...

网友评论

      本文标题:JS原型链知识学习笔记

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