【JavaScript】原型与原型链
创始人
2024-06-02 20:41:55
0

1. 原型模式

每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。实际上,这个prototype对象就是通过调用构造函数创建的对象的原型,使用原型对象的好处是,在它上面定义的属性和方法可以被所有实例对象共享。原来在构造函数中直接赋值给对象实例的值,可以直接赋值给它们的原型,如下所示:

function Person(){}Person.prototype.name = "CODER-V";
Person.prototype.age = 18;
Person.prototype.sayName() = function(){console.log(this.name);
};let p1 = new Person();
p1.sayName()// CODER-Vlet p2 = new Person();
p2.sayName()// CODER-V

这里,所有属性和方法都直接添加到了Person的prototype属性上,构造函数体中什么也没有。但这样定义之后,实例任然可以拥有相应的属性和方法,要理解这个过程就必须理解ECMAScript中方原型的本质。

2. 理解原型

无论何时,只要创建一个函数,就会按照特定的规则为这个函数创建一个prototype属性(指向原型对象)。默认情况下,所有原型对象都会自动获得一个名为constructor的属性,指回与之关联的构造函数。
在这里插入图片描述

在自定义构造函数时,原型对象默认只会获得constructor属性,其他方法都继承自Object。每次调用构造函数创建一个新的实例,这个实例内部的[[prototype]]指针就会被赋值为构造函数的原型对象。JavaScript中没有访问这个[[prototype]]特性的标准方式,但Firefox、Safari、Chrome会在每个对象上暴露_proto_属性,通过这个属性可以访问对象的原型。在其他实现中,这个特性完全被隐藏了。关键在于理解这一点:实例与构造函数原型之间有直接的联系,但实例与构造函数之间没有。

在这里插入图片描述
虽然不是所有实现都对外暴露了[[prototype]],但是可以使用isPrototypeOf()方法,确定两个对象是否共享一个原型(其实这个原型就是一个隐藏类,对隐藏类不了解的可以看一下我的另一篇文章:垃圾回收与内存管理 4.3节),本质上,isPrototypeOf()会在传入参数的[[prototype]]指向调用它的对象时,返回true,即:

Persion.prototype.isPrototypeOf(Person1); //true

ECMAScript的Object类型有一个方法叫Object.getPrototypeOf(),返回参数内部特性[[prototype]]的值,即:

Persion.getPrototypeOf(Person1) == Persion.prototype; //true
Persion.getPrototypeOf(Person1).name; //CODER-V

使用Object.getPrototypeOf()可以方便的获取一个对象的原型,而这在通过与原型实现继承时显得尤为重要(本章后面会介绍)。

Object类型还有一个setPrototypeOf()方法,可以向实例的私有特性写入一个新值。这样就可以重写一个对象的原型继承关系:

let biped = { numLegs: 2 };
let person = { name: "CODER-V" };Object.setPrototypeOf(person,biped);
console.log(person.biped);// 2,通过Object.setPrototypeOf为person的原型对象写入了新的值

但是不推荐这样做,因为修改了原型会间接修改了继承关系,这种影响是微妙且深远的,会影响所有继承了这个原型的实例对象。为了避免使用setPrototypeOf()造成的性能下降,可以通过Object.create()来创建一个新的对象,同时为其指定原型:

let biped = { numLegs: 2 };
let person = Object.create(biped);
person.name = "CODER-V";/**
* person={
*	numLegs: 2;
*	name: "CODER-V"
* }
*/

3. 原型层级

4. 原型和in操作符

相关内容

热门资讯

模式口是个好地方   “五一”假期,“华彩模式”二〇二五模式口国潮文化节启幕,吸引不少市民游客来到驼铃古道感受国潮风。...
中国科技出版传媒股份有限公司关... 证券代码:601858 证券简称:中国科传 公告编号:2025-026中国科技出版传媒股份有限公司...
中重科技(天津)股份有限公司关... 证券代码:603135 证券简称:中重科技 公告编号:2025-030中重科技(天津)股份有限公司...
西宁城东多条特色街区焕新 本报讯(西海新闻记者 周建萍)“东西两侧加装的木雕牌坊和一顶顶白色的凉棚看着真清爽,改造后的下南关街...
金隅琉璃文创园成微度假胜地   本报讯(记者 潘福达)“五一”假期,位于永定河畔、西山脚下的门头沟区琉璃渠村成为热门打卡地,不少...
阿曼宣布美国与胡塞武装达成停火... 新华社多哈5月6日电,马斯喀特消息:阿曼外交大臣巴德尔6日在社交媒体上发文说,根据阿曼与美方及也门萨...
内蒙古推动高速公路服务区 7项... 转自:内蒙古日报本报5月6日讯  (记者  高慧)记者从内蒙古自治区交通运输厅获悉:该厅近日印发《内...
新疆汇嘉时代百货股份有限公司关... 证券代码:603101 证券简称:汇嘉时代 公告编号:2025-020新疆汇嘉时代百货股份有限公司...
“瓷娃娃”逆袭!创电商公司年营...   “我是成骨不全症患者,大家都叫我‘瓷娃娃’就好。”4月29日,肖波正带着自创的企业参加一场博览会...
福建天马科技集团股份有限公司关... 证券代码:603668 证券简称:天马科技 公告编号:2025-031福建天马科技集团股份有限公司...
呼和浩特市给出高质量就业“新解... 转自:内蒙古日报□本报记者  郑学良  通讯员  赵宇昕  就业,一头连着经济发展,一头系着万家冷暖...
呼和浩特市2家乳企入选 首批中... 转自:内蒙古日报本报5月6日讯  (记者 康丽娜)记者从呼和浩特市工信局获悉:工信部于日前公布首批中...
山东宏创铝业控股股份有限公司关... 股票代码:002379 股票简称:宏创控股 公告编号:2025-023山东宏创铝业控股股份有限公司...
新奥运周期国羽初试过关 为期8天的2025年苏迪曼杯世界羽毛球混合团体锦标赛,于5月4日晚在福建厦门落幕。决赛中,在超过一万...
赛力斯集团股份有限公司2024... 证券代码:601127 证券简称:赛力斯 公告编号:2025-056赛力斯集团股份有限公司2024年...
特朗普宣布停止轰炸胡塞武装并称...   美国总统唐纳德·特朗普表示,将自即日起停止对也门胡塞武装的轰炸行动,理由是该组织“已投降”。不过...
福建省青山纸业股份有限公司关于... 证券代码:600103证券简称:青山纸业 公告编号:临 2025-021福建省青山纸业股份有限公司...
国际油价周二上涨逾3% 受欧洲...   周二,国际油价涨幅超过3%,主要受欧洲和中国需求上升信号、中东紧张局势升级以及OPEC+增产决议...
厦门瑞尔特卫浴科技股份有限公司... 证券代码:002790证券简称:瑞尔特 公告编号:2025-024厦门瑞尔特卫浴科技股份有限公司关于...
一季度满洲里海关签发 原产地证... 转自:内蒙古日报本报5月6日讯  (记者  阿妮尔)记者从满洲里海关获悉:今年一季度,满洲里海关累计...