博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js __proto__和prototype的关系
阅读量:7171 次
发布时间:2019-06-29

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

前言

           小伙伴们,在js的学习道路上大家,一定会碰到实例上的__proto__和构造函数上的prototype,这两个属性,大家对这两个属性的关系,理解彻底吗?我反正之前是不太清楚。今天我看了一些高程三上的知识,分享给大家。

js中函数的身份

  • 普通的函数
  • js对象
  • 构造函数

           其实js中的函数,很像咱们人类,在不同的环境,扮演者不同的身份。比如我

  • 在公司是一名员工
  • 在社会上是一名公民
  • 在父母眼中是一个孩子

           小伙伴看一下,这种角色扮演,没有毛病吧,咱们这么一结合和,发现js 是不是很有趣。

     当函数扮演普通函数的时候,他就是一个函数,用来完成每个功能或者过个功能的方法。      当函数扮演普通js对象的时候,他就是一个对象,有自己私有属性、方法和继承父级的的属性、方法

     当函数扮演构造函数的时候,他就是一个构造函数,使用new就可以创建出实例。

           无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个 prototype 属性,这个属性指向函数的原型对象,在默认情况下,所有原型对象都会自动获得一个 constructor (构造函数)属性, 这个属性是一个指向 prototype 属性所在函数的指针。 就拿前面的例子来说, Person.prototype.constructor 指向 Person。而通过这个构造函数,我们还可继续为原型对象添 加其他属性和方法。我们可以的到一个恒等的公式 Person.prototype.constructor===Person

也可以在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"复制代码

           每个实例都会有个__proto__属性,这个属性是一个引用地址,指向该构造函数的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"person1.age; // 29复制代码

上面的例子咱们看到了实例person1的age是29 ,那么age是怎么找到的呢,首先会去person1的私有属性(本身的属性),有没有age,如果有的话就去这个属性的值,如果没有就会查找person1.__proto__指向上的对象(Person.prototype)有没有该属性有的话就会返回该属性的值,如果没有接着查找person1.proto.__proto__直到Object.prototype指向的对象有没有,没有的就返回undefined。上述的查找过程就是作用域链。

           构造函数的原型属性是不可以通过实例的进行来修改的,看代码

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();var person2 = new Person();person1.age = 39;console.log(person1.age)//39console.log(person2.age)// 29复制代码

           直接给实例属性添加value的话和添加到实例的私有属性上。怎么判断数属性是私有还是构造函数的原型上面的呢,看代码

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();var person2 = new Person();person1.age = 39;person1.hasOwnProperty('age')//trueperson2.hasOwnProperty('age')//false复制代码

           怎么判断实例是否属于该构造函数使用 Object.getPrototypeOf(new Person),返回的是Person.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();var person2 = new Person();Object.getPrototypeOf(person1)===Person.prototype//trueObject.getPrototypeOf(person2)===Person.prototype// true复制代码

转载于:https://juejin.im/post/5cc55a445188252e741ccb73

你可能感兴趣的文章
内联表达式
查看>>
手动添加数据源时DataGridViewComboBoxCell值出问题解决方法
查看>>
函数声明优先于变量
查看>>
HDU-1003 Max Sum 动态规划
查看>>
Silverlight.XNA(C#)跨平台3D游戏研发手记:(九)3D 骨骼动画
查看>>
在.NET外散步之我爱贪吃蛇Python -常见语句(神奇的else)
查看>>
Known Issues
查看>>
文件相关操作工具类——FileUtils.java
查看>>
原:视频直播技术中的参考技术网页
查看>>
linq教程
查看>>
requests从api中获取数据并存放到mysql中
查看>>
23种设计模式之组合模式(Composite)
查看>>
button按钮点击不刷新(前端交流学习:452892873)
查看>>
安卓 使用Gradle生成正式签名apk文件
查看>>
@Html.Raw()
查看>>
ES6 Proxy
查看>>
图的基本算法(BFS和DFS)
查看>>
Linux时区详解
查看>>
61.node.js开发错误——Error: Connection strategy not found
查看>>
算法逆向第一篇——简单算法逆向
查看>>