JS原型链

作者: 田田kyle | 来源:发表于2017-07-15 18:37 被阅读18次

<b>1、写在前面:所有的对象都有proto属性,它是一个对象
2、只有原型的原型是没有原型的</b>
举例:
假设我现在申明个数组
var array = []
我们将array打出来,console.dir(array)

Paste_Image.png Paste_Image.png
发现一个奇怪的现象,明明我们申明了一个空数组,却发现数组里面有很多属性。这几样属性概括起来就这几种:
1、length
length为每个数组自己的私有属性,和数组里的参数个数有关
2、array.proto
前面我们说过,所有的对象都有proto属性,而array是对象,所以array有proto属性,而它的proto是指向数组原型的。如图,数组原型有自己共有的concat() push() shift() join() slice()方法
3、array.proto.proto。再继续想,数组是对象,数组的proto指向对象原型。如图对象原型有自己共有的toString() valueOf() constructor()属性
上述问题可以反向思考:
所有的对象都有它自己共有的属性→所有的数组都有对象该有的属性→所有的数组都有它共有的属性→array应该有数组共有的属性
画图表示如下:
JS原型链

所以,假设我现在调用array.valueOf()属性,首先会找私有属性,接着找array.proto()里面,如果没有就找array.proto.proto,直到为null为止
<b>自己构造原型链</b>
现在我们再来思考一个问题:假设现在有两个人,他们的的姓名不同,但是都有作为人类共有的特征(呼吸,行走),那如何表达他们的属性呢?你可以说我可以分别申明如下
var person1 = {
name:小明
walk:function()
breath:function()
}
var person2 = {
name:小红
walk:function()
breath:function()
}
当然这样可以,但是会存在两个问题:1、walk()、breath()是它们共有的属性,每次都申明占用内存 2、每次都写一遍麻烦
那如何通过原型链的思维来简化内存简化操作呢
第一步:用一块内存专门存放二者共有属性,如:
var person_prototype ={walk:function(),breath:function()}
第二步:让person1和person2的proto都指向该属性,如:
person1.proto = person_prototype
person2.proto = person_prototype
这就让person1和person2既保留了自己的属性,同时继承了共有属性,省内存
<b>原型链的几个API</b>
1、hasOwnProperty()
作用:检验有没有自己的(非公有)某个方法
例如:
obj.hasOwnProperty('toString')
检验obj有没有自己的toString方法
2、Object.create(proto,[propertiesObject])
作用:一个对象你希望它的原型是什么.这个对象的proto指向你创造的这个原型
例如:
var obj1 = Object.create(name:小明 , walk:function(){})
则 obj1_proto_ = name:小明 , walk:function(){}

Paste_Image.png

相关文章

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • 从实现角度分析js原型链

    从实现角度分析js原型链 欢迎来我的博客阅读:《从实现角度分析js原型链》 网上介绍原型链的优质文章已经有很多了,...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • 关于JS中的原型和原型链

    目录 关于js 对象和原型 原型链 基于原型链的继承 参考资料ECMAScript 6 入门JavaScript原...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • 2022前端高频面试题

    JS相关 1.原型和原型链是什么 原型和原型链都是来源于对象而服务于对象的概念js中引用类型都是对象,对象就是属性...

  • JavaScript原型链

    js原型链 原型链是JS面向对象的基础非常重要 所有对象只有__proto__属性,而函数具有prototype属...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

网友评论

    本文标题:JS原型链

    本文链接:https://www.haomeiwen.com/subject/tdczhxtx.html