耀极客论坛

 找回密码
 立即注册
查看: 537|回复: 0

JavaScript原型与实例详解

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 01:12:02 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了JavaScript原型与实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

构造函数 实例 原型三者的关系
  1.任何函数都有一个prototype属性,该属性是一个对象
  1. function F () {}
  2. console.log(F.prototype) // => object
  3. //原型对象
  4. F.prototype.sayHi = function () {
  5.   console.log('hi!')
  6. }
复制代码
  2.构造函数的prototype对象默认都有一个constructor属性,指向prototype对象所在函数
  1. console.log(F.constructor === F) // => true
  2. //表示这个
复制代码
  3.通过构造函数得到的实例对象内部会包含一个指向构造函数的prototype对象的指针_proto_
  1. var instance = new F()
  2. console.log(instance.__proto__ === F.prototype) // => true
复制代码
  意思是用当前构造函数创建的实例对象内部都包含一个指针,这个指针就是_proto_,然后这个指针是指向构造函数的prototype对象的
  因此我们可以直接用实例访问原型对象上的成员

  例:
  1. instance.sayHi() // => 打印hi!
复制代码
  注意
  _proto_是一个非标准属性

prototype属性
  1. Javascript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象。
  2. 这个对象的所有属性和方法,都会被构造函数的实例继承。
复制代码
  这也就意味着,我们可以把所有对象实例需要共享的属性和方法直接定义在prototype对象上。
  例子:
  1. function Person (name, age) {
  2.   this.name = name
  3.   this.age = age
  4. }
  5. console.log(Person.prototype)//打印原型
  6. Person.prototype.type = 'human'//将human挂载到原型对象的属性上
  7. Person.prototype.sayName = function () {//还可以定义函数
  8.   console.log(this.name)
  9. }
  10. let p1 = new Person(...)
  11. let p2 = new Person(...)
  12. console.log(p1.sayName === p2.sayName) // => true
复制代码
  我们可以看到console.log(p1.sayName === p2.sayName)这行代码打印的结果是true
  这是因为所有实例的type属性和sayName()方法都是一个同一个内存地址,都是指向prototype对象,因此提高了运行效率

属性或成员的搜索原则
  我们知道了多个实例对象是可以共享原型对象中的属性或成员的,那么js中是怎么实现这个共享机制的呢?
  这就不得不提到属性的搜索原则了
  每当代码读取某个实例对象的某个属性时,都会执行一次搜索,搜索目标是具有给定名字的属性或者成员
  搜索过程如下:
  1.首先从对象实例本身开始搜索
  2.如果在实例对象中找到了具有给定名字的属性,则返回该属性的值
  3.如果没有找到,则继续搜索实例对象中含有的指针(上文中讲过)指向的原型对象,在原型对象中查找具有给定名字的属性
  4.如果在原型对象中找到了这个属性,则返回该属性的值
  在执行instance.sayName()时,会执行两次搜索,第一次搜索实例对象,第二次搜索原型对象

总结
  以上就是多个实例对象共享原型所挂载的属性和方法的基本原理!
  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:15 , Processed in 0.076775 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表