博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【前端工程师手册】JavaScript之原型
阅读量:6906 次
发布时间:2019-06-27

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

又是一个比较重要的知识点——原型(prototype)。

一个例子

function F() {}var f = new F()F.prototype  // {constructor: ƒ}f.__proto__  // {constructor: ƒ}F.prototype === f.__proto__  // trueF.prototype.constructor === F  // true

可以看到F函数有一个属性prototype指向了一个对象{constructor: ƒ},由F函数new出来的对象f有一个属性__proto__指向一个对象{constructor: ƒ}。且f.__proto__和F.prototype指向了同一个对象。F.prototype有一个constructor属性又指回了F本身。

总结一下即是:

  • prototype:JavaScript中每个函数都有一个prototype属性,此属性指向了该函数的原型对象
  • __proto__:JavaScript中每一个对象(null除外),包括函数创建的对象、函数自身、原型对象,都有一个__proto__属性,指向了创建该对象的函数的原型
  • constructor:该属性属于原型对象,指向相关的构造函数

继续探究

既然刚刚说了每一个对象包括原型对象都有__proto__属性,那么继续来试验:

// 接上一段代码F.__proto  // ƒ () { [native code] }F.prototype.__proto__  // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}F.__proto__ === Function.prototype  // trueF.prototype.__proto__ === Object.prototype  // true

首先,F作为一个函数的同时它也是对象,所以它拥有属性__proto__指向了Function.prototype,因为所有的函数都可以理解为Function的实例;同样的,F.prototype作为一个对象,它的__proto__指向Object.prototype,因为它是对象且没有指明的构造函数,所以它直接是Object函数生成的实例,自然__proto__就指向Object.prototype。

现在再来探究一下Object.prototype作为一个对象,它的__proto__又指向了什么呢?

Object.prototype .__proto__  // null

Object.prototype.__proto__指向了null,这也说明了null是原型链的顶端。

上述的所有指向关系可以用一张图来表示:

prototype
ps:这里面有一个细节,Function.__proto__ === Function.prototype
Function作为方法,它有自己的prototype;Function作为对象,它的__proto__指向了Function.prototype,这似乎是在说:Function方法生成了Function对象?
针对这个问题,我觉得还是看比较合适,我就不费口舌了。

可以是使用prototype做什么?

创建对象的数据共享

function Person(){}Person.prototype.name = "Nicholas";Person.prototype.age = 29;Person.prototype.job = "Software Engineer";Person.prototype.sayName = function(){    alert(this.name);};var person1 = new Person();person1.sayName();   //"Nicholas"var person2 = new Person();person2.sayName(); //"Nicholas"alert(person1.sayName == person2.sayName);  //true

把一些实例共享的属性和方法放在原型上,节约空间。

基于原型链的委托继承

function Child(){}function Parent(){    this.name = 'ppp'}Child.prototype = new Parent()var c = new Child()c.name   // 'ppp'

这个原型继承的关系可以用图来表示:

原型继承

参考资料:

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

你可能感兴趣的文章
computational biology | Bioinformatician | 开发者指南
查看>>
从0开始--倒序输出。
查看>>
吉特仓库管理系统-.NET打印问题总结
查看>>
POJ 3026 Borg Maze(bfs+最小生成树)
查看>>
sqlplus 返回2 由于命令后没有加分号
查看>>
android Intent类
查看>>
IOS设计模式学习(19)策略
查看>>
poj 2155 Matrix
查看>>
shell中(),[]和[[]]的区别
查看>>
C# 利用反射动态创建对象[摘录]
查看>>
NLP系列学习:潜在语义牵引
查看>>
Swift 4官方文档中文版 Collection Types(上)
查看>>
Linux学习之初识
查看>>
NLP系列学习:DBOW句向量
查看>>
Centos7.x下Nginx安装及SSL配置与常用命令
查看>>
币安布局去中心化交易所,原来是因为这三个原因!
查看>>
Python爬虫笔记3-解析库Xpath的使用
查看>>
刷前端面经笔记(九)
查看>>
98. Validate Binary Search Tree
查看>>
《Java编程思想》读书笔记-对象导论
查看>>