博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript原型和继承
阅读量:5985 次
发布时间:2019-06-20

本文共 1787 字,大约阅读时间需要 5 分钟。

《JavaScript高级程序设计 第三版》 学习笔记

Object-Oriented 有一个标志,就是都有类的概念,通过类来创建多个具有相同属性和方法的对象。而对于 EMCAScript中没有类的概念,ECMA-262把对象定义为
”无序属性的集合,该属性可以包含任何基本值,对象或者函数。“

原型模式

  • 每个函数都有一个prototype(原型)属性

  • 这个属性都有一个指针,指向一个对象

  • 这个对象包含由特定类型所有实例共享的属性和方法

  • 使用原型的好处是 可以让所有对象实例共享它包含的方法和属性

通过in操作符和hasOwnProperty来判断给定属性是来自于原型还是实例

in- true 代表属性在对象中存在 来自实例或者来自原型
hasOwnProperty- true代表属性来自于实例 是实例属性

继承

ECMAScript中只支持实现继承,而且是通过原型链的方式来实现的

理解原型对象

是这样的
当我们创建一个新函数的时候,会根据一组特定的规则为该函数创建一个prototype属性,这个prototype属性指向函数的原型对象。在默认情况下,原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含包含一个指向prototype属性所在函数的指针。
所以关系就是
比如有一个Person的对象
Person.prototype => 原型对象
原型对象.constructor => Person
即 Person.prototype.constructor == Person
见下图关系

将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

demo代码

function SuperType(){    this.property = true;}SuperType.prototype.getSuperValue = function(){    return this.property;}function SubType(){    this.subproperty = false;}//SubType.prototype = new SuperType();SubType.prototype.getSubValue = function(){    return this.subproperty;}// 继承SuperType 就指向了SuperType的原型对象了SubType.prototype = new SuperType();var instance = new SubType();alert(instance.getSuperValue()); // truealert(instance.property); //true

<iframe width="100%" height="300" src="; allowfullscreen="allowfullscreen" frameborder="0"></iframe>

如果把SubType中的subproperty改成property会是怎么样呢 都会变成false

demo图解

备注:

之所以 SuperType中property属性会出现在,SubType.prototype中,是因为property是一个实例属性,而SubType.prototype是SuperType的一个实例对象,所以property属性会出现在SubType.prototype中,但是这个property相对于instance(SubType的一个实例)却又是一个原型属性,所以如果将subproperty换成property的话,在return this.property时,优先找到实例属性中有这么一个属性,就会返回实例属性。
此外这里SubType.prototype.constructor 被重写了,instance.constructor指向了SuperType 看图
instance.getSuperValue() 这个搜索的过程
1) 搜索实例
2) 搜索SubType.prototype
3) 搜索SuperType.prototype
搜索总是一步步向前到原型链末端停止(Object)

转载地址:http://rlylx.baihongyu.com/

你可能感兴趣的文章
内存对齐
查看>>
Exchange日常管理之二十:代表发送与代理发送
查看>>
while+case
查看>>
linux运维基础篇 unit8
查看>>
hibernate设置了hbm2ddl.auto不能自动建表和插入java.util.Date日期类型属性报错
查看>>
GANDCRAB V5.0.5勒索病毒软件删除 文件数据恢复
查看>>
Linux学习篇之shell编程基础
查看>>
Java操作文件内容
查看>>
责任链模式在Tomcat中的应用
查看>>
FlexAir获取MAC地址代码
查看>>
mysql常用语句
查看>>
C#界面,C++算法
查看>>
京东酝酿促销战 新电商价格大战猜想
查看>>
Mac终端命令
查看>>
修改npm全局安装的位置
查看>>
itext 7 sign pom文件
查看>>
作为首席架构师,我是如何选择并落地架构方案的?
查看>>
20161205 猎豹收藏夹
查看>>
服务器端口
查看>>
Js对字符串和数组的基本操作
查看>>