当前位置: 首页 > news >正文

原型与原型链

在JavaScript中,原型(prototype)和原型链(prototype chain)是理解对象如何继承属性和方法的关键概念。

原型

每一个对象(函数也是对象)都有一个特殊的属性叫做原型(prototype),它指向另一个对象,这个对象(构造函数.prototype)被称为原型对象, 原型对象是用来共享属性和方法的。

//构造函数:Person
function Person(name, age){this.name = namethis.age = age
}
//实例对象:obj
var obj = new Person('Jack', 26)
//原型对象:Person.prototype
Person.prototype.constructor === Person

原型对象:

        (1),原型对象有一个constructor属性指向构造函数本身(Person)。

        (2),原型对象是一个普通的对象,它包含属性和方法。

        (3),原型对象的属性和方法会被继承到所有通过原型链与它相连的对象。

//构造函数:Person
function Person(name, age){this.name = namethis.age = age
}
//实例对象:obj
var obj = new Person('Jack', 26)
//原型对象:Person.prototype
Person.prototype.constructor === Person
//原型对象也有属性和方法
Person.prototype.say = function() {console.log('hi, world!')
}
//原型对象的方法可被继承
obj.say()  //hi, world!

 隐式原型(__proto__)

 在js中,每个对象都有一个“ __proto__ ”属性(左右两边两个短下划线),这个__proto__就被称为隐式原型。

obj.__proto__ === Person.prototype //true

(1)每个js对象都有一个隐藏的原型对象属性__proto__,它指向创建它的构造函数的原型对象(Person.prototype)

(2)__proto__存在的意义在于为原型链查找提供方向,原型链查找靠的是__proto__,而不是prototype

 

原型链

按照上面所说,原型对象也应该有隐式原型。确实是的。

 (1) Person.prototype的隐式原型(__proto__)就是Object.prototype

 (2) 所有的对象,包括构造函数的原型对象,最终都继承自 Object.prototype,这是js原型链的顶点

(3)Object.prototype作为原型链的顶端,位于原型链的最末端因此,它不再有自己的原型,所以Object.prototype.__proto__ 指向null,表示原型链的终点

每个对象都有一个原型(prototype),它指向另外一个对象,而指向的对象又存在属性(_proto_)指向另外一个对象。当我们访问对象(obj)的属性时,会先在对象定义的属性中进行查找,没找到就会沿着__proto__一路向上查找,最终形成一个链式结构,这整个链式结构就叫做原型链。

        如果在原型链中找到了这个属性,就返回找到的属性值;如果整个原型链都没找到这个属性值,则返回 undefined,没找到方法直接报错(not a function)。

思考

//构造函数:Person
function Person(name, age){this.name = namethis.age = age
}
//原型对象也有属性和方法
Person.prototype.say = function() {console.log('hi, world!')
}
//原型对象也有属性和方法
Object.prototype.say = function() {console.log('oh, my god!')
}
//实例对象:obj
var obj = new Person('Jack', 26)Person.say() // ????

你觉得会输出什么。-------答案是'oh, my god!'

首先,补充个知识点。

构造函数Person的隐式原型( __proto__)指向 Function.prototype, 函数对象的__proto__指向Function.prototype,即

Person.__proto__ === Function.prototype
Function.prototype === Function.__proto__

 而且

Function.prototype.__proto__ === Object.prototype

如果在深究一点,Object也是函数对象,Object.__proto__ 也会指向Function.prototype

 构造函数Person也有constructor属性,这个属性指向创建该函数的构造函数;如果自己没有定义构造函数,会指向到 Function

Person.constructor === Function

辣么,完整的原型链诞生了!

现在看图,顺便想起前文标红的句子“ 原型链查找靠的是__proto__,而不是prototype”,上述的思考题明白为什么打印'oh, my god!'了吧:

Person在自身没有找到say,顺着Person的__proto__到Function.prototype上找到了say = oh, my god!,所以直接返回 oh, my god!;若Function.prototype上没有say,才会进一步顺着__proto__找到Object.prototype。


http://www.mrgr.cn/news/17362.html

相关文章:

  • C++ string类—容量、元素获取
  • 数据图像处理26
  • jQuery库
  • Vue 3 Composition API 中如何正确添加表单项副本到数组
  • 单片机内存区域划分
  • SPI驱动学习二(驱动框架)
  • 网络层IP协议
  • Linux 常用命令 - hexdump 【以指定格式显示文件内容】
  • 今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 9月1日,星期日
  • 创建 AD9361 的 vivado 工程,纯FPGA配置,不使用ARM程序
  • docker技术详解,带你全方面玩懂docker
  • 国庆节微信头像怎么制作?制作国庆国旗节日头像的4个方法
  • SpringCloud-01
  • Java-多线程机制
  • AI问答:.NET核心组成概要、程序运行步骤和查询SDK版本的方法
  • 41°29‘29.06“ N 12°31‘25.08“ E表示什么含义?
  • 力扣435-无重叠区间(Java详细题解)
  • vue,小程序,uni-app的生命周期
  • 文件上传的学习
  • FactoryBean 实战练习 - 注入自定义 Date