JS学习之原型和原型链模式

原型链模式1、每一个对象(实例也是对象)都有一个天生自带的属性:__proto__,这个属性指向当前所属类的原型(prototype)

 2、每一个函数(类也是函数)都有一个天生自带的属性:prototype(原型),并且这个属性存储的值是一个对象数据类型的数据,浏览器默认给这个属性开辟一个堆内存 在这个堆内存中存储了相关的属性和方法 1)其中constructor就是天生自带的一个属性,constructor等于当前的函数本身 2)__proto__:prototype对应的值也是一个对象数据类型的值,所以也天生自带__proto__这个属性 3)我们手动添加的属性和方法:这部分属于当前类的公有属性和方法
1     function Fn(num) {
2         this.a = num;
3     }
4     Fn.prototype.b = function () {
5
6     };
7     var f1 = new Fn(100);
8     var f2 = new Fn(200);

用画图的方式来表示如下:

Fn是f1,f2所属的类,

f1、f2是Fn的实例,所以f1.__proto__===Fn.prototype,f2.__proto__===Fn.prototype

原型链查找机制:

首先找当前实例的私有属性,如果私有中存在,找的就是私有的,如果私有中不存在,默认根据__proto__找所属类prototype上公有的属性,公有中有的话就是公有的,如果公有也没有,则继续根据__proto__在往上一级找....一直到找到Object这个基类的prototype为止,如果基类上也没有,则代表当前实例没有这个属性,返回的结果是undefined如下:
//    console.log(f1.a); -->100//    console.log(f1.b); -->f1.__proto__.b//    console.log(f1.hasOwnProperty) -->f1.__proto__.__proto__.hasOwnProperty//    console.log(f1.zz); -->undefined

修改原型上公有属性和方法:
1.通过__proto__给原型上增加了一个属性

1      f1.__proto__.c = 300;//f1通过__proto__把原型上增加了一个c的属性,值是300
2      console.log(f2.c);//-->300

2.直接的通过Fn的prototype修改原型上的公有的属性和方法

1      Fn.prototype.b=1000;
2      console.log(f1.b); //-->1000

注:在所有IE浏览器中,浏览器为了保护类的原型,屏蔽了__proto__的使用,console.log(f1.__proto__.b);//在IE下-->无法获取属性“b”的值: 对象为 null 或未定义。

如果想往类的原型上增加(修改)属性和方法,兼容所有浏览器的只有Fn.prototype这种方式。
时间: 2024-07-28 16:49:46

JS学习之原型和原型链模式的相关文章

JS学习笔记02-初识原型

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> </style> </head> <body> <script type="text/javascr

JS常用的设计模式(15)—— 职责链模式

职责链模式是一个对象A向另一个对象B发起请求,如果B不处理,可以把请求转给C,如果C不处理,又可以把请求转给D.一直到有一个对象愿意处理这个请求为止. 打个比方,客户让老板写个php程序.老板肯定不写,然后老板交给了部门经理.部门经理不愿意写,又交给项目经理.项目经理不会写,又交给程序员.最后由码农来完成. 在这个假设里, 有几条职责链模式的特点. 1 老板只跟部门经理打交道,部门经理只联系项目经理,项目经理只找码农的麻烦. 2 如果码农也不写,这个项目将会流产. 3 客户并不清楚这个程序最后是

设计模式学习笔记之六:责任链模式

我们公司使用的Enovia PLM系统是基于SOA架构的,PLM不仅仅是SAP的主数据源头,同时还需要跟其他的系统(例如供应商的DAM系统及公司的AS400系统)保持交互,系统跟系统的数据交互通过Web Service基于SOAP来实现,具体来说,PLM需要跟如下系统保持交互: 子系统 地区/功能 AFS1 中国,意大利 AFS2 北美 AS400 遗留系统 DAM 供应商 ISR 零售 PLM发送物料主数据到SAP是通过XML文件这种载体的,SAP有个PF(PI)系统专门读取PLM生成在固定共

设计模式学习总结(二十一)--责任链模式

定义 职责链模式就是避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象处理它为止. 在职责链模式中我们可以随时随地的增加或者更改一个处理者,甚至可以更改处理者的顺序,增加了系统的灵活性.处理灵活性是增加了,但是有时候可能会导致一个请求无论如何也得不到处理,它会被放置在链末端,这个既是职责链的优点也是缺点. 角色 角色: Handler: 抽象处理者.定义了一个处理请求的方法.所有的处理者都必须实现该抽象类. ConcreteH

js学习总结----深入扩展原型链模式常用的六种继承方式

一.可枚举和不可枚举 for in 循环在遍历的时候,默认的话可以把自己私有的和它所属类原型上的扩展的属性和方法都可以遍历到,但是一般情况下,我们遍历一个对象只需要遍历私有的即可,我们可以使用以下的判断进行处理.obj.propertyIsEnumerable(key) 或者obj.hasOwnProperty(key) 二.Object.create(proObj) 方法创建一个新的对象,但是要把proObj作为这个对象的原型 在IE6-8不兼容(ECMAscript5) 原理: functi

《大话设计模式》学习笔记20:职责链模式

申请审批示例: 1.请求类: public class Request { public string RequestType { get; set; } public string RequestContent { get; set; } public int Number { get; set; } } 2.Handler: public abstract class Manager { protected string name; protected Manager superiorMan

java学习笔记-设计模式18(职责链模式)

意图 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. public interface Handler { public void operator(); } public abstract class AbstractHandler { private Handler handler; public Handler getHandler() { return handler; } public v

cube.js 学习(八)backend部署模式

cube.js 从设计上就进行了系统上的分层,backend,frontend,backend 是cube.js 的核心 对于cube.js backend 的部署官方也提供了好多中方法 部署模型 serverless 目前主要是aws的应用场景 heroku 基于heroku 提供的pg 以及应用部署能力 docker 部署,单机.同时基于环境变量的配置 docker-compose 全家桶的方式,集成pg.redis,以及nodejs 运行时环境 kubernetes 的集成,实际上这个就很

最近学习了责任链模式

前言 来菜鸟这个大家庭10个月了,总得来说比较融入了环境,同时在忙碌的工作中也深感技术积累不够,在优秀的人身边工作必须更加花时间去提升自己的技术能力.技术视野,所以开一个系列文章,标题就轻松一点叫做最近学习了XXX吧,记录一下自己的学习心得. 由于最近想对系统进行一个小改造,想到使用责任链模式会非常适合,因此就系统地学习总结了一下责任链模式,分享给大家. 责任链模式的定义与特点 责任链模式的定义:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这个对象连成一条链,并沿着

java设计模式之职责链模式

[学习难度:★★★☆☆,使用频率:★★☆☆☆] "一对二","过","过"--这声音熟悉吗?你会想到什么?对!纸牌.在类似"斗地主"这样的纸牌游戏中,某人出牌给他的下家,下家看看手中的牌,如果要不起上家的牌则将出牌请求再转发给他的下家,其下家再进行判断.一个循环下来,如果其他人都要不起该牌,则最初的出牌者可以打出新的牌.在这个过程中,牌作为一个请求沿着一条链在传递,每一位纸牌的玩家都可以处理该请求.在设计模式中,我们也有一种专