彻底搞懂js原型与原型链
原生的原型链
function fn(){},fn 为 Function的一个实例,原型链为 null -> Object -> Function -> fn:
fn.__proto__ === Function.prototype
Function.prototype.__proto === Object.prototype
Object.prototype.__proto__ === null
原型链通过原型(prototype)链接,prototype 就是一个 只有(构造)函数才有的特殊的实例,包含了constructor指针(和__proto__,所有实例都有)
之后new出来的普通实例(非prototype)都包含这个prototype(引用名为__proto__):console.log(sonA) // {/* 其他属性 */ __proto__: Son.prototype}
举例来说,对于函数实例,所有函数实例.__proto__ === Function.prototype (通过这个能拿到Function上的通用属性,如bind函数)
甚至Function.__proto__ === Function.prototype, Object.__proto__ === Function.prototype
Function instanceof Object // true Function.__proto__.__proto__ === Object.prototype (优先是更具体的函数,然后才作为更抽象的对象,对象永远在原型链较上层)
Object instanceof Function // true Object.__proto__ = Function.prototype
原型链继承:
未继承时
console.log(Son.prototype) // { constructor: Son, __proto__: Object.prototype }
原型链继承了Father时,
console.log(Son.prototype) // { __proto__: Father.prototype }父类的一个实例, 通过new Father 或者 Object.create(Father.prototype)生成
需要手动赋予constructor:
Object.defineProperty(Son.prototype, "constructor", {
value: Son,
writable: false
});
console.log(Object.prototype)
{ __proto__: null }
原型链继承,本质就是修改函数的prototype,使其从指向Function变为指向父类;父类的对象刚好符合这个特性
巩固一下上面的知识点,请判断以下比较是否为真:
Object.prototype.__proto__ === null
Object.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
fn.__proto___ === Function.prototype
Object.prototype === Function.prototype.__proto__
Object.prototype === fn.prototype.__proto__
Object.prototype.isPrototypeOf(fn)
Object.prototype.isPrototypeOf(fn.prototype)
Function.prototype === fn.__proto__;
Function.prototype.isPrototypeOf(fn)
Function.prototype.isPrototypeOf(fn.prototype) // false
答案:以上判断若未特殊说明,结果都为真
谈一下new
自定义原型链:基于原型链的继承
Father() {} -> Son() {]
继承的本质是,如何使Son的实例能访问到Father定义的属性
通过原型链,我们将Son的原型指向Father
Son原型链现在是指向的Function,Son.__proto__ === Function.prototype
我们希望Son.__proto__ === Father.prototype
按es5之前的规范,我们不能直接访问__proto__,那么只能修改prototype (ES5中用Object.getPrototypeOf函数获得一个对象的[[prototype]]。ES6中,使用Object.setPrototypeOf可以直接修改一个对象的[[prototype]])
我们知道 Father的实例的__proto__指向Father.prototype,那么Son.prototype等于Father的实例就可以
Son.prototype = new Father() 或者
Son.prototype = Object.create(Father.prototype)
这里有一个问题,prototype的constructor属性应该指向构造函数,而这种写法的constructor通过原型链会找到Father,所以需要定义一下constructor
Object.defineProperty(Son.prototype, "constructor", {
value: Son,
writable: false
});
顺便了解一下原型链查找顺序
优先查找对象的,对象上没有则通过__proto__找prototype,还没找到,就找prototype.__proto__, 也就是父类的prototype
比如
对象objA查找hasOwnProperty
objA -> Son.prototype -> Object.prototype -> Object.prototype.hasOwnProperty
函数funcA查找bind
funcA -> Function.prototype -> Function.prototype.bind
PS:对于 const fn = () => {} 这样的箭头函数,不属于原型链的范畴 可以参考 http://www.cnblogs.com/mengff/p/9656486.html
彻底搞懂js原型与原型链的更多相关文章
- 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- 彻底搞懂 JS 中 this 机制
彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...
- 让你彻底搞懂JS中复杂运算符==
让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...
- 一文搞懂 js 中的各种 for 循环的不同之处
一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...
- 一文读懂JS中的原型和原型链(图解)
讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外). 2.所有的引用类型都有一个’_ _ proto_ ...
- 彻底搞懂js __proto__ prototype constructor
在开始之前,必须要知道的是:对象具有__proto__.constructor(函数也是对象固也具有以上)属性,而函数独有prototype 在博客园看到一张图分析到位很彻底,这里共享: 刚开始看这图 ...
- 一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系 转载加自己的总结
1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象 ...
- Spirit带你彻底搞懂JS的6种继承方案
JavaScript中实现继承的6种方案 01-原型链的继承方案 function Person(){ this.name="czx"; } function Student(){ ...
- 通过一张简单的图,让你彻底地搞懂JS的==运算
大家知道,JavaScript中的==是一种比较复杂运算,它的运算规则很奇怪,很容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读ECMAScript规范的基础上,我画了一 ...
随机推荐
- webservice常用两种身份验证方式
在项目开发,我们经常会使用WebService,但在使用WebService时我们经常会考虑以下问题:怎么防止别人访问我的WebService?从哪里引用我的WebService?对于第一个问题,就涉 ...
- Linux的邮件服务器配置
一.邮件服务简介 1.电子邮件服务是Interne上最基本的服务之一,进入互联网的用户不需要任何纸张就可以方便地使用电子邮件来收发邮件 2.Internet上的电子邮件服务都是基于客户/服务器模式的 ...
- windows下使用electron+sqlite3
1.前置条件 1.1:安装 python2.7.python 若是有问题,如果之前安装过多个版本,则必须 npm config set python "/path/python.exe&qu ...
- 【js】箭头函数与普通函数的异同
普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用es5写法. 普通函数大家知道: 形式基本一致 来看看箭头函数: 开发时根据实际情况可以省略一些东西 单条处理可以省略ret ...
- android 模拟器 访问 localhost IIs Express 400错误
如果用安卓模拟器调试本机的网站,比如 localhost:63586,是访问不到的,返回结果是 400 错误.原因是模拟器上的localhost指向的默认是模拟器自己. 解决方法是:(1) 把安卓模拟 ...
- c++的虚继承
今天去面试了一家公司,真是套路深啊,套路深,原谅我是后知后觉,所以人吧总的长大,出差正常情况下都是有补贴的,为啥这部分也要算我工资一部分,名其名曰工资高,哈哈哈,自古套路方得人心 今天学习了一下c++ ...
- Linux系统 磁盘IO过高排查总结
最近做的一个电商网站因为磁盘 I/O 过高导致访问速度奇慢,问题存在两个月有余未得到解决办法.此次排查原因的经验可以作下次问题的参考. 1.会看懂 top 系统命令出来的各项参数.此次是无意中发现 u ...
- oracle 审计功能
Oracle 11g推出了审计功能,但这个功能会针对很多操作都产生审计文件.aud,日积月累下来这些文件也很多,默认情况下,系统为了节省资源,减少I/0操作,其审计功能是关闭的 一.审计功能关闭 1. ...
- HTML 转 PDF的两种实现方式
itextsharp:不怎么兼容html原代码,特别是div的布局.但是能更灵活的创建原生pdf代码 wkhtmltopdf:基本可以不用写代码,直接将html文件生成pdf 文件存放在自己的百度云盘 ...
- redis搭建主从复用-读写分离
1:安装redis5.0.3 2:解压到/usr/local/redis 3:在/opt/redis/下创建三个文件夹 data,存放数据的目录 log,存放日志的目录 conf,存放配置的目录 co ...