JavaScript进阶之原型链

Stella981
• 阅读 472

对象

 1 function f1(){
 2 };
 3 typeof f1 //"function"函数对象
 4 
 5 
 6 var o1 = new f1();
 7 typeof o1 //"object"普通对象
 8 
 9 var o2 = {};
10 typeof o2 //"object"普通对象

JavaScript中将对象分为普通对象函数对象

使用函数对象可以创建普通对象,普通对象没法创建函数对象。

凡是通过new Function创建的对象都是函数对象,其他都是普通对象(通常通过Object创建),可以通过typeof来判断。

原型对象(prototype

Prototype

Prototype有原型、蓝本的意思,只有函数对象才会有原型(prototype)。

所谓原型,就是函数用来创建实例(普通)对象的蓝本(原型)。

每个原型都有一个 constructor 属性指向关联的构造函数。

__proto__

每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型(prototype)。

constructor

构造函数,即用来创建实例的函数,即关联的函数对象本身。

验证

在火狐或者谷歌浏览器控制台中新建一个普通对象,查看他的属性。

1 var o = {};
2 console.log(o.prototype); //undefined  普通对象没有prototype属性
3 console.log(o instanceof Object); //true  o是Object的实例
4 console.log(o.__proto__ === Object.prototype) //true  o的__proto__指向Object的prototype
5 console.log(Object === Object.prototype.constructor) //true  Object.prototype.constructor指向Object本身
6 console.log(Object.prototype.constructor) //function Object() 函数对象原型的构造函数指向这个函数 
7 console.log(Object.prototype.__proto__); //null Object.prototype的__proto__为null,为原型链终点

新建一个函数对象,查看他的属性。

1 function Demo() { };
2 var f1 = new Demo();
3 console.log(f1.prototype); //undefined  通过函数对象穿创建的是普通对象,Demo本身是函数对象
4 console.log(f1 instanceof Demo); //true  f1是Demo的实例
5 console.log(f1.__proto__ === Demo.prototype); //true
6 console.log(Demo === Demo.prototype.constructor);//true
7 console.log(Demo.prototype.__proto__ === Object.prototype);//true  Demo原型的__proto__指向Object的原型prototype
8 console.log(Object.prototype.__proto__); //null

原型的重要功能就是用作继承。

原型链(prototype chain

javascript中,每个对象都会在内部生成一个__proto__ 属性,当我们访问一个对象属性时,如果这个对象不存在就回去__proto__ 指向的对象里面找,一层一层找下去,这就是javascript原型链的概念。

提升:

  1. 在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。
  2. 遍历对象的属性时,原型链上的每个可枚举属性都会被枚举出来。要检查对象是否具有自己定义的属性,而不是其原型链上的某个属性,则必须使用对象从Object.prototype继承的 hasOwnProperty 方法。(使用 for in 遍历对象时推荐总是使用 hasOwnProperty 方法)

继承

JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里,任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别。

继承意味着复制操作,在Java和C#中,继承是完全复制生成新的对象。然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

结论


在编写使用它的复杂代码之前,理解原型继承模型是至关重要的。此外,请注意代码中原型链的长度,并在必要时将其分解,以避免可能的性能问题。此外,原生原型不应该被扩展,除非它是为了与新的JavaScript特性兼容。

参考文档: https://www.jb51.net/article/123976.htm

      https://github.com/mqyqingfeng/Blog/issues/2

      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance\_and\_the\_prototype\_chain

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
2年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这