博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图说原型链
阅读量:5797 次
发布时间:2019-06-18

本文共 1516 字,大约阅读时间需要 5 分钟。

前言

说到原型链,javascript 中,万物皆对象,而 javascript 规定,所有对象都有自己的原型对象(prototype) ,一方面,任何对象都可以充当其他对象的原型,另一方面,原型(prototype)也是对象,也拥有自己的原型,因此形成的链就是原型链。到这里我就啰嗦几句,javascript 的设计者Brendan Eich在设计这门语言之初,只是想它在网页上实现简单的交互,比如表单提交前进行简单的校验,所以没有设计类与继承的概念,因为觉得这样的话太正式了,但是受时代的影响,javascript里面都是对象,虽然没有继承,但是也要一种机制,把这些对象联系起来,这种机制就是原型链。话不多说,上图

图解

  • 假设有一个内存空间(正方形表示),这片内存里放了一个构造函数Dog(用三角形表示)
function Dog () {    this.leg = 4;    this.bray = function () {        alert('wangwang');    }}

图片描述

  • 设置构造函数的原型函数(prototype)
Dog.prototype = {    spacies: 'dog'}console.log(Dog.prototype)    // {spacies: 'dog'}

那么,就会在另外一个内存中存储 Dog 的 prototype 对象(用椭圆形表示),如图所示,构造函数的protype指向它的原型

图片描述

  • 现在我们用 构造函数 Dog 来创建对象 dog1, dog2, ...
var dog1 = new Dog();dog1.name = '大黄';dog1.color = 'yellow';var dog2 = new Dog();dog2.name = '小黑';dog2.color = 'black';console.log(dog1.name)     // 大黄console.log(dog2.name)     // 小黑console.log(dog1.spacies)  // dogconsole.log(dog2.spacies)  // dogconsole.log(dog1.constructor === Dog)   // true

图片描述

可以看到由构造函数创造的对象dog1,dog2,他们的constructor指向构造函数Dog,而他们的__proto__指向Dog的prototype,而且当调用对象的一个属性或方法时,首先会找对象本身的属性或方法,找不到时,会找该对象的__proto__对象(也就是构造函数的prototype对象),以此类推,会找原型链上所有对象有没有该属性,如果找到则返回该属性的值,如果还是找不到则返回undefined

另外可以看出来dog1,dog2,...的__proto__指向同一块内存地址,这样设计是为了节省内存资源,不用每次创建都存储他们相同的属性,当修改dog1的__proto__时,dog2的__proto__也会改变

dog1.__proto__.spacies = 'animal'; // 或者Dog.prototype.spacies = 'animal'console.log(dog2.spacies)    // animal
  • 上面也说到了,每一个对象都有自己的__proto__,而作为构造函数Dog的prototype对象,也会有自己的对象原型,以此类推,原型链的顶端是一个null,如图的红线串起来的链就是原型链

图片描述

额,来一个句话收尾吧,这是我自己对原型连的理解,欢迎探讨

参考

转载地址:http://cpsfx.baihongyu.com/

你可能感兴趣的文章
【348天】每日项目总结系列086(2018.01.19)
查看>>
JAVA中循环删除list中元素的方法总结
查看>>
ChPlayer播放器的使用
查看>>
js 经过修改改良的全浏览器支持的软键盘,随机排列
查看>>
L104
查看>>
做完小程序项目、老板给我加了6k薪资~
查看>>
脱离“体验”和“安全”谈盈利的游戏运营 都是耍流氓
查看>>
TortoiseSVN中图标的含义
查看>>
Python version 2.7 required, which was not foun...
查看>>
[BZOJ] 1012 [JSOI2008]最大数maxnumber
查看>>
根据毫秒数计算出当前的“年/月/日/时/分/秒/星期”并不是件容易的事
查看>>
Unity Shaders and Effects Cookbook (3-5) 金属软高光
查看>>
31-hadoop-hbase-mapreduce操作hbase
查看>>
NYOJ283对称排序
查看>>
C#反射实例应用--------获取程序集信息和通过类名创建类实例
查看>>
VC中实现文字竖排的简单方法
查看>>
程序员常用的六大技术博客类
查看>>
深入理解浏览器的缓存机制
查看>>
又拍云沈志华:如何打造一款安全的App
查看>>
dubbo源码分析-架构
查看>>