博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript原型Prototype
阅读量:7206 次
发布时间:2019-06-29

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

在一文中提到过:用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同方法是不一样的,所以我们用原型把构造函数中公共的属性和方法提取出来进行封装,达到让所有实例共享的目的。

接下来进一步介绍javaScript原型。

一、javaScript原型机制

1、函数与原型的关系

js中创建一个函数,就会自动创建一个prototype属性,这个属性指向函数的原型对象,并且原型对象会自动获得一个constructor(构造函数)属性,指向该函数。

举例:以前面的原型模式创建对象为例说明

View Code

Person对象和Person对象的原型之间的关系如下图1。

图1函数、实例与原型的关系(图来着JS高程)

简单一句话就是:Person.prototype.constructor指向Person,可以在浏览器中测试一下。

2、实例与原型的关系

通过构造函数创建一个实例,该实例内部将包含一个属性(指针),指向构造函数的原型对象。

举例:Person构造函数的实例Person1和Person2的[[Prototype]]属性都指向Person的原型。如图1所示。

Note:[[Prototype]]连接是存在于实例和构造函数的原型之间,而不是存在实例与构造函数之间。

关于这个指针,ECMA-262中叫[[Prototype]],没有标准的方式访问[[Prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性__protp__,而在其他实现中,这个属性对脚本不可见。

3、原型链

实例有自己的属性和方法,而原型封装了所有实例共享的属性和方法,那这种共享是通过什么方式实现的呢?答案是原型链。

当要访问实例的属性时,解析器会执行一次搜索。首先从实例对象开始,如果在实例中找到了这个属性,则返回该属性的值;重点是如果没有找到的话,则继续搜索[[Prototype]]指针指向的原型对象,在原型对象中查找该属性,如果找到,则返回该属性的值。所以通过这种方式多个实例就能共享保存在原型中的属性和方法。这也是js的原型链。

Note:理解了原型链,很自然就能明白几个问题。

a、给实例添加一个与原型中同名的属性,就会将其屏蔽。因为搜索原型链时在实例中就能找到然后就返回了,根本到不了原型。

b、可以通过实例爬原型链访问原型中的值,但却不能通过实例重写原型中的值。同理。

c、原型的动态性,在原型上新增属性或方法能立即从实例反应出来。

二、原型相关的方法介绍

1、isPrototypeOf()方法

虽然实例的[[Prototype]]属性无法访问的,我们可以通过isPrototypeOf()方法来确认原型和实例之间的关系。这个方法呢是站在原型的角度来检测原型是不是某个实例的原型。A.isPrototypeOf(B),如果A的B的原型返回true,否则返回false。

举例:因为Person的两个实例lxy和personA内部都有一个[[Prototype]]属性指向Person.prototype。所以isPrototypeOf方法会返回true。

2、Object.getPrototypeOf()方法

这个方法是ECMAScript 5中新增的,返回实例的[[Prototype]]值。

这个方法是非常有用的,因为它是在Object上实现的。所以把任何实例扔给Object,它都能获得实例的原型。

举例

结果:

3、hasOwnPrototype()方法

这个方法用于检测某个属性是否真正存在于实例中。是返回ture,否则返回false。

就像我们自己有一些资源和技能,但是也可以从爹妈那里得到一些资源和技能,比如看起来你有套别墅,但是你要知道哪些是你真正属于你自己的,哪些是爹妈给你的。

举例:比如我一出生父母就给我个名字lxy,这时候我用hasOwnPrototype()方法检测这个"name"属性是不真是我的,就会返回false。

后来我自己改了个名字starof,再用hasOwnPrototype()方法检测,这时就会返回true。

再后来我不想用这个名字了,我就把它delete掉了,用回了我父母给的名字。这时候再用hasOwnPrototype()方法检测这个"name"属性是不是我自己的,就会返回false。

这个一波三折的故事代码如下:

4、in操作符,for-in循环,Object的keys()和getOwnPropertyNames()

in操作符在通过对象能够访问属性时返回true,无论该属性是实例属性还是原型属性。

for-in循环,返回所有能够通过对象访问的,可枚举的属性。即包括实例属性也包括原型属性。

屏蔽了原型中不可枚举的属性的实例属性也会在for-in循环中返回,因为根据规定,所有开发人员定义的属性都是可枚举的——只有在IE8及更早版本中例外。

Object.keys()方法,取得实例上所有可枚举的实例属性。该方法接收一个实例作为参数,返回一个包含所有可枚举属性的字符串数组。

Object.getOwnPropertyNames()方法,获得所有实例属性,无论它是否可枚举。

View Code

三、原型语法

第一种:每添加一个属性和方法,都直接在原型上加。

第二种:对象字面量的方法

第二种语法比较简单,少写几行代码,但是有一点要注意,字面量形式,完全重写了prototype属性,所以constructor不再指向Person,而是Object了。

View Code

如果constructor很重要,可手动设置为Person,如下。

 但是这样写会导致constructor的[[Enumerable]]特性被置为true。因为开发人员定义的属性都是可枚举的。

如果是兼容ECMAScript5的JS引擎可使用Object.definePrototype。

View Code

 

本文作者,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:有问题欢迎与我讨论,共同进步。

你可能感兴趣的文章
Hadoop - MapReduce MRAppMaster-剖析
查看>>
nginx 404 403等错误信息页面重定向到网站首页或其它事先指定的页面
查看>>
tiny4412 u-boot 启动参数的设置
查看>>
CSS命名实践
查看>>
Android — 长按ListView 利用上下文菜单(ActionMode) 进行批量事件处理
查看>>
数据结构与算法——AVL树类的C++实现
查看>>
关于浮点数的json解析
查看>>
Integer Partition(hdu4658)2013 Multi-University Training Contest 6 整数拆分二
查看>>
十折交叉验证10-fold cross validation, 数据集划分 训练集 验证集 测试集
查看>>
python-切片实例
查看>>
Android8.0运行时权限策略变化和适配方案
查看>>
Latex中设置字体颜色
查看>>
通过JS控制各种元素的点击事件的【时间间隔】,特别适合【发表评论】功能...
查看>>
全局函数(直接使用)
查看>>
话说TP框架里的Vendor这目录是干什么用的啊?类库扩展thinkphp3.1版本
查看>>
Android SDK与API版本的对应关系
查看>>
(转) eclipse项目中.classpath文件详解
查看>>
Elasticsearch yellow 意味着主分片可用,副本不可用
查看>>
Android开发实现QQ三方登录 标签: android开发qq三方登录
查看>>
2017 Multi-University Training Contest - Team 9 1004&&HDU 6164 Dying Light【数学+模拟】
查看>>