原型和原型链及 instanceof函数

Jioby 发布于2019-08-23 15:34 / 1405人阅读

摘要：有一个有趣的现象为何为等等这些都被称作是构造函数想一下我们可以来创建一个对象，所以本身就是一个构造函数，他们都是函数。而所有的函数都是构造函数的实例。

一、原型(prototype)

定义：一个简单的对象，用于实现对象的属性继承。可以简单理解成对象的爹。在Firefox和Chorme中，每个JS对象中都包含一个__proto__（非标准）的属性指向该对象的原型，可obj.__proto__进行访问

实例是通过构造函数（new）创建出来的对象，实例通过__proto__指向原型，通过constructor指向构造函数

以上描述可表示为：var a = new Object(); a.__proto__ === a.contructor.prototype

二、原型链(prototype chain)

原型链是由原型对象组成，每个对象都有一个__proto__属性，指向了创建该对象的构造函数的原型，__proto__将对象链接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。

在 javaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）

function A(){};
var a = new A();
// a  ===> a.__proto__(A.prototype) ===> A.prototype.__proto__(Object.prototype) ===> Object.prototype.__proto__ ===> null

三、instanceof函数

定义：instanceof运算时会递归查找L的原型链，即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到顶层为止。一句话理解instanceof的运算规则为：instanceof检测左侧的__proto__原型链上，是否存在右侧的prototype原型。
有一个有趣的现象：

Function instanceof Object; // true
Object instanceof Function; // true

为何Object instanceof Function为true？

Object, Function, Array等等这些都被称作是构造“函数”（想一下我们可以var a = new Object()来创建一个对象，所以Object本身就是一个构造函数），他们都是函数。而所有的函数都是构造函数Function的实例。

从原型链机制的的角度来说，即Function.prototype在Object的原型链上。Function这个内置函数的Function.prototype是一个函数a，因为函数同时也是对象，因此这个函数a也定义了apply、call、bind等属性（或者说方法）。而Object的委托目标Object.__proto__正是这个函数a，代码表示为：Function.prototype === Object.__proto__ // true

GPU云服务器云服务器原型原型链原型链原型链继承原型链图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102267.html

继承的实现方式及原型概述 | JavaScript 随笔

摘要：每一个对象直接量都是的子类，即构造函数中的构造函数与普通函数并没有什么两样，只不过在调用时，前面加上了关键字，就当成是构造函数了。由于没有传入变量，在调用的构造函数时，会出错这个问题可以通过一个空对象来解决改自。 showImg(https://segmentfault.com/img/bVmNZj); 对于 OO 语言，有一句话叫Everything is object，虽然 Ja...

chenjiang3 2019-08-22 10:57 评论0 收藏0
复习Javascript专题（三）：面向对象（对象的创建与继承，原型及原型链）

摘要：在创建子类实例时，不能向超类型的构造函数中传递参数。构造函数继承子类传进的值是基本思想是在子类构造函数的内部调用超类或父类型构造函数。继承保证构造函数指针指向如果想同时继承多个，还可使用添加属性的方式类继承， OOP：Object Oriented Programming 面向对象编程。题外话：面向对象的范围实在太大，先把这些大的东西理解理解。 1.什么是对象？根据高程和权威指南上...

testHs 2019-08-23 13:39 评论0 收藏0
《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
js数据类型及类型检测

摘要：使用的构造函数是，它只为新对象定义了默认的属性和方法。如果网页中包含多个框架，那实际上就存在多个不同的全局执行环境，从而存在多个不同版本的构造函数。每个类在内部都有一个属性，这个属性中就指定了上述字符串中的构造函数。 js中常见的用于类型判断的操作符或属性有：typeof、instanceof、prototype。下面我们就来看看他们是如何判断数据类型的。一.js数据类型 ECMAs...

Kyxy 2019-08-22 16:17 评论0 收藏0
详解 JS 中 new 调用函数原理

摘要：中经常使用构造函数创建对象通过操作符调用一个函数，那在使用调用一个函数的时候到底发生了什么先看几个例子，再解释背后发生了什么。其中就是指构造函数本身。 JavaScript 中经常使用构造函数创建对象（通过 new 操作符调用一个函数），那在使用 new 调用一个函数的时候到底发生了什么？先看几个例子，再解释背后发生了什么。 1）看三个例子 1.1 无 return 语句构造函数最后...

付永刚 2019-08-22 18:22 评论0 收藏0