JavaScript原型与实例详解

2022-04-15 0 272
目录
  • 构造函数实例原型三者的关系
  • prototype属性
  • 属性或成员的搜索原则
  • 总结

构造函数 实例 原型三者的关系

1.任何函数都有一个prototype属性,该属性是一个对象

function F () {}
console.log(F.prototype) // => object
//原型对象
F.prototype.sayHi = function () {
  console.log('hi!')
}

2.构造函数的prototype对象默认都有一个constructor属性,指向prototype对象所在函数

console.log(F.constructor === F) // => true
//表示这个

3.通过构造函数得到的实例对象内部会包含一个指向构造函数的prototype对象的指针_proto_

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true

意思是用当前构造函数创建的实例对象内部都包含一个指针,这个指针就是_proto_,然后这个指针是指向构造函数的prototype对象的

因此我们可以直接用实例访问原型对象上的成员

例:

instance.sayHi() // => 打印hi!

注意

_proto_是一个非标准属性

prototype属性

Javascript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象。
这个对象的所有属性和方法,都会被构造函数的实例继承。

这也就意味着,我们可以把所有对象实例需要共享的属性和方法直接定义在prototype对象上。

例子:

function Person (name, age) {
  this.name = name
  this.age = age
}
console.log(Person.prototype)//打印原型
Person.prototype.type = 'human'//将human挂载到原型对象的属性上
Person.prototype.sayName = function () {//还可以定义函数
  console.log(this.name)
}
let p1 = new Person(...)
let p2 = new Person(...)
console.log(p1.sayName === p2.sayName) // => true

我们可以看到console.log(p1.sayName === p2.sayName)这行代码打印的结果是true

这是因为所有实例的type属性和sayName()方法都是一个同一个内存地址,都是指向prototype对象,因此提高了运行效率

属性或成员的搜索原则

我们知道了多个实例对象是可以共享原型对象中的属性或成员的,那么js中是怎么实现这个共享机制的呢?

这就不得不提到属性的搜索原则了

每当代码读取某个实例对象的某个属性时,都会执行一次搜索,搜索目标是具有给定名字的属性或者成员

搜索过程如下:

1.首先从对象实例本身开始搜索

2.如果在实例对象中找到了具有给定名字的属性,则返回该属性的值

3.如果没有找到,则继续搜索实例对象中含有的指针(上文中讲过)指向的原型对象,在原型对象中查找具有给定名字的属性

4.如果在原型对象中找到了这个属性,则返回该属性的值

在执行instance.sayName()时,会执行两次搜索,第一次搜索实例对象,第二次搜索原型对象

总结

以上就是多个实例对象共享原型所挂载的属性和方法的基本原理!

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注NICE源码的更多内容!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript JavaScript原型与实例详解 https://www.niceym.com/21961.html