2.图解原型和原型链。

news/2024/11/17 21:30:44/

概览

  • 1.instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
  • 2.经典的原型和原型链的分析:分成普通与顶级函数&对象两种。
  • 3.原型:JavaScript声明构造函数时,会在内存中创建一个对应的对象,这个对象就是原函数的原型。
  • 4.原型链:

1.instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

2.经典的原型和原型链的分析:分成普通与顶级函数&对象两种。

  • 2-1.普通函数&对象:

    • ①函数.prototype(每一个函数都有prototype):显式原型属性,只有函数才拥有该属性。声明一个函数就会自动创建这个属性。

      • α:每一个函数下都有一个prototype属性,属性值是一个对象,对象默认只有一个constructor属性,返回创建该对象的函数,即构造函数。
      • β:图例:Foo.prototype.constructor === function Foo(){}
        在这里插入图片描述
    • ②对象.proto(每一个对象都有__proto__):

      • α:每一个对象都有一个隐式原型属性叫__proto__。指向创建该对象的函数的prototype。
      • β:[[Prototype]]:是对象的一个内部属性,chrome引擎通过__proto__向外暴露了这个属性。实际可看做是对象的__proto__属性。
      • γ:图例:f1.proto === Foo.prototype
        在这里插入图片描述
    • ③函数.proto(函数是对象,所以函数也有__proto__):Function是最顶层的构造器,构造了系统中所有对象,包括用户定义对象、系统内置对象、甚至包括自身。

      • α:图例:(function Foo(){}).proto === Function.prototype
        在这里插入图片描述
    • ④函数.prototype. proto(函数.prototype是对象,所以也有__proto__)

      • α:函数.prototype本质上和var obj = {}是一样的,由new Object创建的。
      • β:图例:Foo.prototype.proto === Object.prototype
        在这里插入图片描述
  • 2-2.顶级函数&对象:

    • ①Object.proto:Object是由顶层构造函数Function构造的。
      • α:图例:Object.proto === Function.prototype
        在这里插入图片描述
    • ②Object.prototype. proto:Object.prototype是顶级对象的原型,较为特殊,指向null。Object是最顶层的对象,所有对象都继承Object的原型。

      • α:图例:Object.prototype. proto === null
        在这里插入图片描述
    • ③Function.proto:函数对象都是被顶级构造函数Function创建,包括自身。

      • α:图例:Function.proto = Function.prototype
        在这里插入图片描述
    • ④Function.prototype. proto

      • α:函数.prototype本质上和var obj = {}是一样的,由new Object创建的。
      • β:图例:Function.prototype.proto = Object.prototype
        在这里插入图片描述

3.原型:JavaScript声明构造函数时,会在内存中创建一个对应的对象,这个对象就是原函数的原型。

  • 3-1.构造函数默认有一个prototype属性,属性值指向函数的原型。包含了特定类型的所有实例共享的属性和方法。

4.原型链:

  • 4-1.当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。
    在这里插入图片描述

http://www.ppmy.cn/news/484832.html

相关文章

原型链(介绍)

什么是原型链? 原型链通俗易懂的理解就是可以把它想象成一个链条,互相连接构成一整串链子!而原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性,这个prototype属性就是我们的原型对象,我们拿…

原型链图解

首先,要明确几个点: 1.在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。 即:对象具有属性__proto__&#xff0c…

原型、原型对象和原型链

原型: __ proto __ 原型对象: prototype 每个对象中都有 __ proto __ 一、构造函数和原型 ES6之前并没有引入类的概念,对象不是基于类创建的,是用一种称为构造函数的特殊函数来定义的。 创建对象的三种方式: 1.通过…

带你了解原型链

了解原型链可以先看我上期发布的帖子再来看这篇会更好的理解: 详解原型对象_loulansd的博客-CSDN博客 问:什么是原型链? 得先知道什么是对象,比如一个物品一只笔就是对象,他的属性可以是黑色彩色的它的方法可以是写字,包括我们生活的万物都有自身的属性,那么我们就可以理解万…

原型和原型链(二)

文章目录 前言一、_proto_(上文提到)1、定义:2、小测试: 二、原型链1、定义及相关解释:2、原型链图: 前言 在上篇文章中对构造函数和原型对象进行了相应的总结。此文章将会对原型链进行详细的阐述。希望大家对原型和原型链的理解…

原型链的解说

首先,我们要知道,万物皆对象,一切的一切都是由对象构成的。 一、关于函数的原型对象 在JavaScript中,如果我们创建一个函数A,那么浏览器就会在内存空间里创建一个对象B,而且每个函数都会默认会有一个属性…

【js进阶】-原型/原型链

一、构造函数创建对象 我们先使用构造函数创建一个对象,先来认识下构造函数 function Person() { } var person1 new Person(); person1.name 张三; console.log(person1.name) // 张三在这个例子中,Person 就是一个构造函数,我们使用 ne…

JS原型、原型链到底是什么?

前言 在js的学习中,原型毫无疑问是一个难点,但也是一个不可忽视的重点。在前端面试中也是一个高频考题,在接下来的深入学习中,你会发现原型、原型链等知识点其实并不难。 1. “一切皆为对象” JavaScript是一个面向&#xff08…