美文网首页
原型与原型链

原型与原型链

作者: 饥人谷1904_陈俊锋 | 来源:发表于2019-08-28 11:56 被阅读0次

关于原型方面的问题,有以下三句话总结:

  1. 当 new 一个函数的时候会创建一个对象,函数.prototype === 被创建对象.__proto__
  2. 一切函数都是由 Function 这个函数创建的,所以 Function.prototype === 被创建函数.__proto__
  3. 一切函数的原型对象都是由 Object 这个函数创建的,所以 Object.prototype === 一切函数.prototype.__proto__
Function.prototype === Function.__proto__         
Function.prototype === Object.__proto__           
Function.prototype.__proto__ === Object.prototype 
Function instanceof Object
// 均为 true ~

(1)任何函数都是 Function 创建,所以Function 创建了 Function,所以 Function.prototype === Function.proto
(2)Object 也是函数。所以Function创建了Object,所以 Function.prototype === Object.proto
(3)Function.prototype 是普通对象,普通对象是由Object创建的,所以 Function.prototype.proto === Object.prototype

可以根据上面的代码理解原理来解决下面这些代码的问题

Object instanceof Function
Function instanceof Object
Function instanceof Function
Object instanceof Object
// 均为 true~

instanceof 的作用是判断一个对象是不是一个函数的实例。比如 obj instanceof fn, 实际上是判断fn的prototype是不是在obj的原型链上。比如: obj.proto === fn.prototype, obj.proto.proto === fn.prototype,obj.proto...proto_ === fn.prototype,只要一个成立即可。

(1)对于 Function instanceof Function,因为 Function.proto === Function.prototype,所以为true。
(2)对于 Object instanceof Object, 因为 Object.proto.proto === Function.prototype.proto === Object.prototype , 所以为true
(3)对于 Function instanceof Object, 因为 Function.proto.proto === Function.prototype.proto === Object.prototype, 所以为 true
(4)对于 Object instanceof Function, 因为 Object.proto === Function.prototype,所以为 true

原型链.png

由此可以看出 instanceof 内部的判断过程
如图所示:判断 arr instanceof Object

  1. 先看 arr.__proto__ === Object.prototype 是否成立
  2. 如果不成立👆
  3. 再看arr.__proto__.__proto__ === Object.prototype 是否成立
  4. 如上一级一级的往上找,直到根基

下面来看习题中的两题的原型图

function People (name){
  this.name = name;
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}

var p1 = new People('饥人谷');
var p2 = new People('前端');
上面代码的原型链图.png
function People(){
}
var p = new People()
p.toString()

上面代码中并未添加 toString 方法,下面用原型链图做出解释

解释.png

参考:对原型、原型链、Function、Object的理解

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 2019-01-28

    原型与原型链

  • 廖雪峰JS小记

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

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

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

  • JavaScript 面向对象第一篇

    1.原型链 ---- (实例对象与原型之间的连接 叫做原型链) 2. hasOwnproperty ----(看是...

  • 原型与原型链以及继承

    今天复习下原型与原型链的知识,以及记录新学的继承知识点。 知识点纲要 原型与原型链 es5与es6继承 什么是原型...

  • JavaScript深入理解this关键字(一)

    摘要 最近在公司需要做培训,我打算把JavaScript中的原型与原型链讲给大家。但我在梳理原型与原型链的时候发现...

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

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

  • 原型链&instanceof关键字

    1.原型链&instanceof关键字 简单说明 原型链 与 instanceof 作用原理 1.原型链 1...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

网友评论

      本文标题:原型与原型链

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