通过手写instanceof理解原型链示例详解
目录
  • Instanceof的作用
  • 手写Instanceof
  • 什么是原型
  • 原型的应用场景
  • 什么是原型链

Instanceof的作用

Instanceof是判断一个实例是否是其父类或者祖先类型的实例的方法。原理就是Instanceof会接受两个参数，在查找的过程中会先遍历左边变量的原型链，直到找到右边变量的prototype；如果查找失败，则会返回false。

手写Instanceof

let myInstanceof = (target, origin) => {
    while(target){
        if(target._proto_ = origin.prototype){
            return true
        }
        target = target._proto_
    }
    return false
}
let arr = [1, 2, 3];
console.log(myInstanceof(arr, Array)) //true;
console.log(myInstanceof(arr, Object)) //true;

什么是原型

除null以外的所有js对象在创建时,都会关联另一个对象，这个被关联的对象就是我们常说的原型，每一个对象都会从关联的对象中继承属性，例如：

//构造函数
function Person(age){
    this.age = age
}
Person.prototype.name = '张三'
var person = new Person()
console.log(person.name)//张三

当通过构造函数创建实例后，如果从实例上寻找某个属性值，如果属性值就存在于这个实例上，则会直接输出，否则就会从他的原型对象中去找。

  • prototype: 每个构造函数都有一个prototype属性，这个属性指向函数的原型对象。
  • __ proto__: 每个对象（除了null）都会有的属性，这个属性指向对象的原型。
  • constructor: 每个原型都有一个constructor属性，指向关联的构造函数。

下面我们用一组输出来验证这些信息：

console.log(Person===Person.prototype.constructor) // true
console.log(person.__proto__ == Person.prototype) // true
console.log(person.__proto__.constructor == Person) // true
console.log(person.constructor == Person) // true

解释一下为什么person.constructor == Person，前面我们说过，实例上的属性如果不存在，则会从他的原型对象上找。person.constructor == Person其实就相当于person.__ proto__.constructor == Person。

原型的应用场景

function Person(name, age) {
    this.name = name
    this.age = age
    this.sayHello = function () {
      console.log("hello，" + this.name);
  }
}

当我们每次通过构造函数创建实例时，都会创建新的新的sayHello方法，如果创建的实例过多，就会造成性能浪费。此时如果将sayHello挂载到构造函数的prototype上，此时新创建的实例都可以访问到这个方法了。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function () {
  console.log("hello，" + this.name);
};
const person = new Person();
person.name = "张三";
person.sayHello()//hello，张三;

什么是原型链

要解释这个问题，我们首先要理解好构造函数，原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都有一个指向其对应的构造函数的指针，而实例都包含一个指向原型对象的内部指针。

接下来，如果我们让原型对象同时等于一个其他的实例呢？

此时原型对象中包含一个指向其他原型的指针，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。就是我们常说的原型链。

简单来说，就是如果从实例上寻找某个属性值，如果属性值就存在于这个实例上，则会直接输出，否则就会从他的原型对象中去找。而原型对象中也没有的话，则会向原型对象的原型对象中去找。

以上就是通过手写instanceof理解原型链示例详解的详细内容，更多关于instanceof原型链理解的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS前端攻坚浅析instanceof实现原理

    目录 正文 instanceof的实现 正文 无论是平时开发还是学习中,对于类型的判断总是非常的重要,常见的类型判断方法有很多,对于每种比较常用的api我们需要对其进行一定的了解,才能更好的判断其中的实现方法,对Js的了解程度才能更深,这篇文章带大家了解一下instanceof的实现 instanceof的实现 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上(来自MDN) 我们先来看下instanceof的用法,有点类似于对于一个父类,生

  • JavaScript之instanceof方法手写示例详解

    目录 方法介绍 instanceof 是什么? instanceof 使用方式 开始手写 方法介绍 instanceof 是什么? 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上. 语法:object instanceof constructorobject:某个实例对象constructor:某个构造函数 简言之就是用来检测 constructor.prototype 是否存在于参数 object 的原型链上. 个人理解: instanceof 是用来判断左侧对象

  • JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解

    isPrototypeOf 作用:检测一个对象是否是另一个对象的原型.或者说一个对象是否被包含在另一个对象的原型链中 var p = {x:1};//定义一个原型对象 var o = Object.create(p);//使用这个原型创建一个对象 p.isPrototypeOf(o);//=>true:o继承p Object.prototype.isPrototypeOf(p);//=> true p继承自Object.prototype 以上实例来自与<JavaScript权威指南&g

  • javascript中instanceof运算符的用法详解

    概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 obj instanceof Object;//true 实例obj在不在Object构造函数中 描述 instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上. 实例 1.instanceof的普通的用法,obj instanceof Object 检测Object.prototype是否存在于参数

  • Java中instanceof关键字实例讲解

    Java中instanceof关键字实例讲解

    目录 1.向上转型 向下转型 2.强制类型转换的应用 3.instanceof 关键字使用 4.测试举例 5.强制类型转换成功总结 1.向上转型 向下转型 2.强制类型转换的应用 应用多态性时由于引用为父类类型,导致编译时只能调用父类中声明的属性和方法.子类特有的属性和方法不能调用.因此可将父类引用强制转换为子类引用,则可调用子类特有方法. class Animal { public void shout() { System.out.println("Animal is shouting &q

  • JavaScript 手动实现instanceof的方法

    1. instanceof的用法 instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上. function Person() {} function Person2() {} const usr = new Person(); console.log(usr instanceof Person); // true console.log(usr instanceof Object); // true console.log(usr instanceo

  • Javascript 原型与原型链深入详解

    Javascript 原型与原型链深入详解

    目录 前言 对象 原型 原型链 javascript中的类 new的实现 instanceof的实现 javascript的继承 总结 前言 在前端这块领域,原型与原型链是每一个前端 er 必须掌握的概念.多次在面试或者一些技术博客里面看见这个概念.由此可见,这个玩意对于前端来说有多重要.其实它本身理解起来不难,但是很多刚入行前端的同学,看到prototype.__proto__理解起来还是有点吃力,然后脑子里面就乱成一锅粥,就像我一样. 但是这是很正常的事情,没什么大不了的,就像我们想要学会跑

  • JavaScript原型继承和原型链原理详解

    这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造

  • JavaScript原型及原型链终极详解

    JavaScript原型及原型链终极详解

    JavaScript原型及原型链终极详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象.下面举例说明 function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); var o3 = new f1(); var o1 = {}; var o2 =new Object()

  • JavaScript对象原型链原理详解

    这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto.class.extensible属性,其中,proto属性指向对象的原型. 对象的属性也有writable.enumerable.configurable.value和get/set的配置方法. 对象的创建方式有三种: 一.使用字面量直接创建. 二.基于原型链创建. 分析上图,要点如

  • Java设计模式之原型设计示例详解

    Java设计模式之原型设计示例详解

    目录 简单说一下(定义) 稍微夸一下(优缺点) 顺便提一下(适用场景) 着重讲一下(深.浅克隆) 多多用一下(结构.代码实现) 简单说一下(定义) 什么是原型模式:原型模式是用于创建重复的对象,同时又能保证性能.用一个已经创建的实例作为原型,通过复制该原型对象来创建一个或者多个和原型相同或者相似的新对象 举例说明:我们都玩过打飞机的游戏,敌军的飞机可谓是数不胜数,但是如果每出一架敌机都要重新实例化的话,那么自然我们的功能很复杂.所以这个时候我们的原型模式就派上用场了,只实例化一架飞机出来,其他的

  • JS原形与原型链深入详解

    本文实例讲述了JS原形与原型链.分享给大家供大家参考,具体如下: 前言 在JS中,我们经常会遇到原型.字面上的意思会让我们认为,是某个对象的原型,可用来继承.但是其实这样的理解是片面的,下面通过本文来了解原型与原型链的细节,再顺便谈谈继承的几种方式. 原型 在讲到原型之前,我们先来回顾一下JS中的对象.在JS中,万物皆对象,就像字符串.数值.布尔.数组等.ECMA-262把对象定义为:无序属性的集合,其属性可包含基本值.对象或函数.对象是拥有属性和方法的数据,为了描述这些事物,便有了原型的概念.

  • js实例属性和原型属性示例详解

    详情请仔细研读注释,这里就废话少说,直接上代码了. 复制代码 代码如下: <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>测试文档</title>     <script type="text/javascript"> // 实质上属性和方法是一样的,方法是属性为引用型的函数. //一个对象有4种

  • PHP设计模式之原型模式示例详解

    PHP设计模式之原型模式示例详解

    前言 原型模式其实更形象的来说应该叫克隆模式.它主要的行为是对对象进行克隆,但是又把被克隆的对象称之为最初的原型,于是,这个模式就这样被命名了.说真的,从使用方式来看真的感觉叫克隆模式更贴切一些. Gof类图及解释 GoF定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 GoF类图 代码实现 abstract class Prototype { public $v = 'clone' . PHP_EOL; public function __construct() { ech

  • C语言实现二叉树链式结构的示例详解

    C语言实现二叉树链式结构的示例详解

    目录 前言 1. 链式二叉树结构 2. 二叉树的遍历 2.1 前序遍历 2.2 中序遍历 2.3 后序遍历 2.4 层序遍历 3. 常见功能 3.1 二叉树结点个数 3.2 二叉树叶子结点个数 3.3 第K层结点的个数 3.4 二叉树的深度 3.5 判断是不是树是不是完全二叉树 3.6 在二叉树中查找值为x的结点 3.7 拿到每一层的数据 4. 二叉树的创建和销毁 4.1 二叉树的创建 4.2 二叉树的销毁 前言 前面我们已经对堆进行学习,堆就是一个顺序结构的二叉树,把数组看成二叉树,下面一起学

  • php示例详解Constructor Prototype Pattern 原型模式

    原型模式中主要角色 抽象原型(Prototype)角色:声明一个克隆自己的接口 具体原型(Concrete Prototype)角色:实现一个克隆自己的操作 当一个类大部分都是相同的只有部分是不同的时候,如果需要大量这个类的对象,每次都重复实例化那些相同的部分是开销很大的,而如果clone之前建立对象的那些相同的部分,就可以节约开销. 针对php的一种实现方式就是__construct()和initialize函数分开分别处理这个类的初始化,construct里面放prototype也就是公共的

随机推荐

其他