美文网首页
js进阶--原型

js进阶--原型

作者: caiminghan | 来源:发表于2018-12-09 01:04 被阅读0次

对象

对于js中的对象,新手的第一反应应该是用{}包起来的键值对,在jquery中我们可以称这种类型的对象为纯对象,即可通过$.isPlainObject()方法来判断是否为纯对象。但其实function,array也属于对象,我们可以认为所有的引用类型都为对象
这样看来,对象可能由函数Object()、Function()、Array()或者自定义的构造函数创建,所以 所有的对象,都由函数创建

原型

前端的新朋友应该对原型都不熟,所有的函数被创建下来,就带有prototype这个属性,我们称这个属性为函数的原型。函数的原型是一个纯对象,默认都有一个属性constructor,指向这个函数自己,即:

var func = function() { console.log('test') };
func === func.prototype.constructor // true

隐式原型

所有函数都具有原型,而对于所有对象,在创建下来,就带有_proto_这个属性,称之为隐式原型。对象的隐式原型_proto_指向创建该对象的函数的prototype,即

function Test(){}
var obj = new Test()
obj._proto_ === Test.prototype // true

那么Test.prototype也是一个对象,按照上述,它的_proto_应该指向Object.prototype,即:

Test.prototype._proto_ === Object.prototype // true

此时你会发现,Object.prototype又是一个对象,那也具有隐式原型,讲道理应该也和上面一样,指向Object.prototype,但是这样不就无限循环了吗。所有Object._proto_比较特殊,它指向的是`null``,即:

Object._proto_ === null

原型链

仔细看了上述原型和隐式原型的朋友们,对于对象的原型应该有了进一步的了解。那原型链,又是什么呢?我们先看一下一个简单的例子:

var arr = [1, 2]
arr.toString() === "1,2" // true

toString()是我们在数组处理中经常使用的方法,但是这个数组arr,哪里来的toString()方法呢?我们打开它的隐式原型看看:

在控制台打印arr.png
可以发现,arr._proto_中有toString这个属性,这个属性从Array.prototype来。当访问一个对象的属性时,会先在基本属性中查找,如果没有,再沿着__proto__这条链往下找,这就是原型链
对于所有的对象,沿着原型链最后会找到Object.prototype,因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。对于“继承”的对象,我们可以通过Object.hasOwnProperty判断对象的属性是否是基本属性,这经常使用对象的for in遍历中。
原型是js中十分重要的知识点,学习原型也是前端开发者js能力进阶的必经之路。

相关文章

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

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

  • js进阶--原型

    对象 对于js中的对象,新手的第一反应应该是用{}包起来的键值对,在jquery中我们可以称这种类型的对象为纯对象...

  • JS进阶之原型

    之前有在自己的文章中谈到对象,而说到对象我们就不可避免的要扯到原型,并且原型也是我们必须得理解到位的一个点,那接下...

  • JS进阶系列之原型、原型链

    最近在看<>这本书的时候,再加上最近遇到的关于原型、原型链的面试题,所以萌生了要把...

  • 前端JS进阶五(原型)

    Zepto中如何使用原型 Zepto使用原型源码分析 jQuery中如何使用原型 jQuery使用原型源码分析 原...

  • js进阶系列-原型对象VS对象原型

    前言 总所周知,原型在javascript中十分重要,今天把原型的知识复习了半天,在此做一个记录。 记录知识点的时...

  • JS进阶篇-原型与原型链

    前言 与大部分面向对象语言不同,ES6之前中并没有引入类(class)的概念,JavaScript并非通过类而是直...

  • 廖雪峰JS小记

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

  • js中的new操作符实现原理

    序言 这是前端进阶的文章,要想知道new的原理,必须深刻理解原型链、js继承的几种方式与及call、apply等相...

  • JS的__proto__和prototype

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

网友评论

      本文标题:js进阶--原型

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