精华内容
下载资源
问答
  • 原型链图片

    2016-11-23 17:41:11
    类,原型,构造函数
  • 原型链图

    2021-04-10 11:53:32
  • 彻底深刻理解js原型链之prototype,proto以及constructor(二)前言如果你能够啃下教程一并且吃透原型链的几个概念的话说明你在前端飞仙的路上又进了一小步···学习最怕的不是慢而是站!这篇教程主要目的对原型链概念...

    彻底深刻理解js原型链之prototype,proto以及constructor(二)

    前言

    如果你能够啃下教程一并且吃透原型链的几个概念的话说明你在前端飞仙的路上又进了一小步···学习最怕的不是慢而是站!这篇教程主要目的对原型链概念进一步加深理解

    巩固下教程一的知识

    来看下面的例子:

    var text=new String("我是文字");function Persion(name,job){    this.name=name;    this.job=job;}Persion.myName="lxm";Persion.prototype.sayName=function(){    alert(this.name);}var perison1=new Persion("lxm","20")

    思考:判断下列表达式返回的值:

    (两分钟之内对八道的算及格,剩下的同学回头接着理解教程一)

    perison1.__proto__===Persion.prototype;perison1.name===Persion.name;perison1.prototype.__proto__===Object.prototype;Persion.prototype.__proto__===Object.prototype;Persion.__proto__===Function.prototype;Persion.constructor===perison1;Function.__proto__===Object.prototype;Function.prototype.__proto__===Object.prototype;typeof Persion.prototype;typeof Function.prototype;

    原型链图

    这个图绝对是网络上独一无二独一份,此乃小米飞升教程独家秘籍!因为博主在学习过程中发现对文字的理解和记忆远远不如一个图来的更深更直观,更加透彻,为了您更好的学习原型链,博主特意花了一上午的时间用mermaid绘制了这个原型链的关系图,而且通过这个图我们能够发现很多有意思的事情 为了关系图更加直观和清晰,隐去了一些引用线路,其中:

    • 圆形代表对象的名字
    • 方形代表属性名
    • 实线代表对象的分界
    • 虚线代表引用
    • 菱形代表基本值
    ebca77597b06459d1c2ad9261ab45dec.png
    1. 原型链是单链,只往一个方向流向,没有回路
    2. 只有Function的proto指向自己的prototype,这也向我们解释了为什么Function.prototype类型是function
    3. 我们通过proto只能获取到原型对象中的方法和属性,所以persion1通过原型链是获取不到Persion的myName属性,但是我们可以通过原型对象的constructor来获取或者修改Persion的属性(这点太给力了)

    请注意,有时候这个方法也不好使,因为原型对象的constructor是可以改变的,不一定指向原型对象所在的函数对象

    继续上面的例子:

    persion1.__proto__.constructor.myName="我变了耶!";console.log(Persion.myName); //我变了耶
    1. 普通对象的proto_一定指向创造它的函数对象的prototype
    2. 原型对象的proto一定指向Object.prototype!
    3. 通过图我们可以简单理解,拥有原型对象属性的对象是函数对象,否则为普通对象
    4. 原型链是有开始和尽头的,开始于null,结束于普通对象
    5. 所有的函数对象都是Function以new的方式创造出来了,包括Function自己且每个函数对象的proto都指向了Function.prototype
    6. Object是所有对象的父类,我们也可以称之为基类,不过不要纠结于叫什么,因为我们通过图可以看到每一个对象(不管是原型对象还是普通对象还是函数对象)的通过原型链都可以引向Object.prototype

    ** 以上九条我称为原型链之九句真言(不要太在意名字,我自己随便起的 ~) **

    意外收获:this.name和this.job难道不应该在Persion中也有一份吗?无数个日夜,愚笨的博主对this的用法都不甚了解,直到我画出了这种图,我彻底明白了this的含义,就是谁运行包含this的这个函数,this就把挂在它身上的包袱(属性)甩给谁! 看到了吗,persion1调用了Persion,那么自然多了2个属性,但是注意,name跟job并不是Persion的属性!!

    思考:图中没有画出Object.proto的指向,请问他指向哪?(请只依据九句真言解答)

    思考题解答

    思考:判断下列表达式返回的值:

    perison1.__proto__===Persion.prototype;

    首先判断perison1是通过new方式被Persion创造出来的,依据九句真言第4条得出 :true

    perison1.name===Persion.name;

    通过关系图可以看到不相等,我已经在意外收获中解答了,答案为:false

    perison1.prototype.__proto__===Object.prototype;

    只看图可以看到perison1没有prototype,是普通对象所以答案为:js报错~~

    Persion.prototype.__proto__===Object.prototype;

    参考九句真言第5条:答案为:true

    Persion.__proto__===Function.prototype;

    Persion为函数对象,参考九句真言第8条,答案为:true

    Persion.constructor===perison1;

    Persion是由Function创造出来的所以Persion.constructor指向Function,答案为:false

    Function.__proto__===Object.prototype;

    Function我们已经反复强调是由自身创造所以Function.proto===Function.prototype;,答案为:false

    Function.prototype.__proto__===Object.prototype;

    根据九句真言第5条,答案为:true

    typeof Persion.prototype;

    答案为:object

    typeof Function.prototype;

    答案为:function,注意这个是比较特殊的原型对象

    思考:图中没有画出Object.proto的指向,请问他指向哪?(请只依据九句真言解答)

    下面来分步解答

    1. Object属于函数对象
    2. 依据九句真言第八条得出函数对象的proto都指向了Function.prototype
    3. 所以Object.proto===Function.prototype

    这一点是不太好理解的,是Function创造了Object,然后Object创造了Function的原型对象prototype 所以就有了

    Object.__proto__===Function.prototypeFunction.prototype.__proto__===Object.prototype

    不要太纠结于此,只要理解就好

    结束语

    好了,原型链的概念原理通过这2篇教程我相信大家已经滚瓜烂熟了!下面的教程,我们会着重研究下原型链在实际的应用!

    作者:宜信技术学院 刘晓敏

    展开全文
  • js 原型 原型链图

    2020-03-31 15:44:30
    每一个构造函数都有prototype指向当前构造函数的原型对象 每一个实例对象都有__proto__,指向当前实例对象构造函数的原型对象prototype 原型对象也是对象也有__proto__属性,指向原型对象构造函数的原型对象即Object...
    1. 每一个构造函数都有prototype指向当前构造函数的原型对象
    2. 每一个实例对象都有__proto__,指向当前实例对象构造函数的原型对象prototype
    3. 原型对象也是对象也有__proto__属性,指向原型对象构造函数的原型对象即Object.prototype
    4. 原型对象的constructor属性指向的是当前原型对象的构造函数
      即Object.prototype.constructor = Object
    5. 通过构造函数创建对象,构造函数本身也是一个对象

    可以简单理解为:

    函数有prototype属性,指向构造函数的原型对象
    对象有__proto__属性,指向构造函数的原型对象

    const foo = new Foo()				//foo实例对象 Foo构造函数
    const Foo = new Function()			//Foo实例对象 Function构造函数
    const Function = new Function()		//Function实例对象 Function构造函数
    const o = new Object()				//o实例对象 Object构造函数
    const Object = new Function()		//Object实例对象 Function构造函数
    

    形成的原型链图:
    原型链

    展开全文
  • 关于js原型链的问题,网上的文章有很多,但是大多数对于初学者来说晦涩难懂。没有结合实例,看起来总是没有什么概念,一下是我结合一个简单的例子,绘出的原型,如有不对,欢迎指正。 代码 代码很简单,一个构造...
    关于js原型链的问题,网上的文章有很多,但是大多数对于初学者来说晦涩难懂。没有结合实例,看起来总是没有什么概念,一下是我结合一个简单的例子,绘出的原型图,如有不对,欢迎指正。

    代码

    代码很简单,一个构造函数,一个通过构造函数new出来的对象实例,一个直接new的出来对象,和一个函数体

    function A(){
      this.c=3;
      this.d=4;
     }
     var a = new A();
     var b = new Object();
     var c = function () {console.log('c')}
    

    我们来研究一下他们的原型(一下图是更具在浏览器中测试结果绘出的)
    在这里插入图片描述

    蓝色线条为对象查找属性的原型链路径,我们可以看到,不管是函数还是对象,最终都都集中到了Object.prototype上。说明我们一但在object.prototype上增加一个属性,那么下面所有的对象都能查到该属性

    Object.prototype.test = 666 
    A.test //666
    a.test //666
    b.test //666
    c.test //666
    

    同理如果在构造函数A上增加一个方法,那么实例a,就会具有这个方法。
    这种写法我们会经常看到。例如给vue增加一个全局方法可以这么写

    Vue.prototype.$http = axios
    

    从图上我们可以看出函数和普通对象的区别,普通对象是通过__proto__查找原型链,而函数是通过prototype查找。普通对象是 通过 __proto__指向上一级原型链,而函数类对象是通过 prototype.__proto__指向上一级原型链

    展开全文
  • 网上的原型链图有很多种,作为新手看着看着就迷糊了。看不懂的其中一个原因是他们一步到位,从老老老父亲到刚new的对象都放在一张图上。  一、I级原型 因此想要理解,首先从最上层的Object开始捋一下: 如图,...
  • 原型链图片分享

    2020-09-15 21:22:19
    分享几张本人学习原型链时,网上找到的几张图片。
  • 什么是原型和原型链不再赘述。 由之前的博客,知道可以得出如下俩个结论: 对象的原型链和该对象对应的类的原型指向同一空间 子类对象的原型中的原型链和父类的原型指向同一个空间。 直接看父类和子类之间、普通类...
  • 原型链原型链思路梳理 原型链 原型链只要仔细梳理, 找出规律就会发现环环相扣也没有那么复杂 思路梳理 一个函数看成是一个构造函数, 专门用来实例化对象function Person(){}; let p = new Person(); 构造函数的...
  • JavaScript 原型与原型链 1.什么是原型? 一个对象当他被生成的时候,就会自带一个属性 __ Proto __ ,我们将其称为 隐式原型 一个(通常为构造函数)函数对象被生成的时候,会有一个ProtoType 属性,我们将其成为 ...
  • 几乎所有函数都有prototype属性,这个是个指针,指向原型对象;Function.prototype这个没有 //2.所有对象中都有__proto__属性.(Object.prototype该属性的值为null) //几乎所有函数都有 prototype/__proto__属性 //...
  • 原型与原型链图

    2019-01-16 16:51:01
  • JS原型链图

    2017-11-28 15:28:14
    原型链构析 对于每个对象,其自身创建成功后都有一个属性——__proto__,该属性表示一种关系,指向该对象构造器的原型,下面代码表示出 var demo=new Person("name",age); 的生成过程。 var demo={}; demo.__proto__...
  • JavaScript的原型链图

    2019-10-10 15:21:43
    不能保证100% 正确(有问题直接注释或者私信偶) 但是互联网上原型链图比这个全的偶没见过(右上角的Number Date们需要改进) 可以改进但是 不能再简单了 有点晕吧 大部分人都会晕 所有网上 一堆 xxx.proto.proto....
  • Javascript的原型链图

    2016-10-12 12:39:00
    但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这中的各个__proto__ constructor .prototype 都是内部对象 这样画是为了简洁 举个例子 如果考虑__proto__ 作为内部...
  • js原型链图

    2018-06-05 16:02:51
    大家可以看看,写的很好;总结下自己的所得和不解。以下几条要记住,1. js中一切皆对象,分为函数对象和普通对象两类。2. 函数对象的构造函数都是Function,普通对象的构造函数都是Object。...(重写原型时construct...
  • 2.原型链图

    2021-04-11 22:47:37
  • JS 原型链图形详解

    2016-03-29 08:08:00
    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要。每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解。 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的...
  • 记录常见原型链图

    2019-10-05 15:08:42
    转载于:https://www.cnblogs.com/liujiekun/p/11295524.html
  • 1.先画一个构造函数 2.原型对象 3.实例成员
  • Simula 是一种建模语言,通常被认为是第一个...后来,Self 编程语言(一个类似 Smalltalk 的系统)开发人员创建了一种可替代的轻量级方法来定义这类对象,并将这种方法称为基于原型的面向对象编程或者原型对象编程。
  • JS原型链 原型 详解

    2021-04-18 21:23:25
    JavaScript JS原型链 详解 - 显示原型和隐式原型 每个函数(function)都有prototype,即显示原型,指向原型对象,默认为空Object实例,Object原型除外。相当于在创建时,执行了 this.prototype={} 每个实例对象...
  • 【JS原型&原型链】一张搞定!

    千次阅读 2019-02-20 23:53:15
    原型链图 如果你看到这张图一脸懵,不要怕,往下看,下面会一步一步教你认识原型&原型链 前置知识 js的初学者一般很难理解原型和原型链的概念,但原型和原型链又是js中最重要的点之一。从...
  • 原型和原型链

    2020-11-24 11:07:49
    1.原型是什么 ? 每个函数对象下都有一个prototype属性,这个属性就是原型 2. 原型的作用? ...4.原型链(参考原型链图) 实例化对象的__proto__指向构造函数的prototype 构造函数prototype的__prot

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,699
精华内容 679
关键字:

原型链图