精华内容
下载资源
问答
  • 原型对象原型链超详细讲解(附图解)一、函数的原型对象二、prototype(函数的原型)三、__ proto__(原型链)四、constructor(构造函数)五、prototype继承六、结论1.实例对象的原型链指向当前类的原型对象。2.原型...

    一、函数的原型对象

    • 原型对象中有原型链—指向最高
    • 函数的原型对象的构造函数指向本身
        var arr=new Array();
        console.log(arr);
        //一个对象的原型链指向原型对象
        //原型对象的构造函数指向本身(函数本身)
        //es5中没有类的概念,就是没有class类集合,我们把函数叫类
        //也就是自定义函数类,写类对象
        //函数的原型属性prototype===函数类的原型对象
        function myArray(){
            this.length=0;
        }
        //当前函数类的原型对象
        myArray.prototype={
            constructor:myArray,
            mysort:function(){
                //this指向当前类对象本身(实例本身)
                console.log(this);
            }
        }
        //实例化类对象
        var myarr=new myArray();
        console.log(myarr);
        myarr.mysort(); 
    

    在这里插入图片描述

       function Animal(){
       }
       //输出的是当前函数的原型对象
       console.log(Animal.prototype);
       //原型对象中有原型链---指向最高
       //函数的原型对象的构造函数指向本身
       console.log(Animal.prototype.constructor);
    

    在这里插入图片描述

    二、prototype(函数的原型)

    • 每一个javascript对象(除null外)创建的时候,就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性,原型对象上具有原型属性以及原型方法。
    • 函数才有prototype,每个函数都有一个prototype属性,这个属性指向函数的原型对象。通过prototype可以为对象在运行期间添加新的属性和方法。

    三、__ proto__(原型链)

    • 这是每个对象(除null外)都会有的属性,叫做__proto__,指向自身的构造函数的原型对象。
    • 从内置对象上可以观察到,实例化的当前对象__proto__(原型链)指向自身的构造函数的原型对象。
    <script>
       var arr = [];
       console.log(arr);
    </script>
    

    在这里插入图片描述

    四、constructor(构造函数)

    • 每个原型都有一个constructor属性,指向函数本身。

    五、prototype继承

        function Person(name,job){
            this.name=name;
            this.job=job;
            this.sex='';
        }
        Person.prototype={
            constructor:Person,
            sleep:function(){
                console.log("睡觉");
            },
            eat:function(){
                console.log("吃饭");
            }
        }
        Person.prototype.eat();
        //类在new实例化的时候,开始执行的函数的构造
        var stu=new Person('小明','学生');
        //给对象直接写属性是赋值,类似直接在对象的类中建立一个自身属性
        //stu.sex="男";
        //原型对象属性如何赋值
        stu.__proto__.sex="女";
        console.log(stu); 
    

    六、结论

    1.实例对象的原型链指向当前类的原型对象。

    	console.log(arr.__proto__ == Array.prototype);//true
    

    2.原型对象的原型链指向Object函数的原型对象

    	console.log(arr.__proto__.__proto__);//Object
    	console.log(arr.__proto__.__proto__ == Object.prototype);//true
    

    3.Object函数的原型对象的原型链指向null,Object的原型链是不存在的。

    	console.log(arr.__proto__.__proto__.__proto__);//null
    

    4.所有对象最后都会指向Object函数的原型对象。

        //子类对象的原型链指向当前函数的原型对象
        console.log(stu.__proto__ === Person.prototype);//true
        //instanceof判断两边的数据类型是否一致
        console.log(stu.__proto__ instanceof Person);//false
        console.log(typeof stu.__proto__);//object
        console.log(stu.__proto__.constructor instanceof Person);//false
        console.log(typeof stu.__proto__.constructor);//function 
    

    七、图解过程

    在这里插入图片描述

    展开全文
  • 大家都应该知道构造函数很好用。但是构造函数也存在浪费内存的问题。 function Star(uname, age) { this.uname = uname;...在图中我们可以看出来只要我们实例化出一个对象里面的sing方法都是一样得不管我们实例化多

    大家都应该知道构造函数很好用。但是构造函数也存在浪费内存的问题。

    function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function() {
    console.log('我会唱歌');
    	}
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    

    在这里插入图片描述在这里插入图片描述

    在图中我们可以看出来只要我们实例化出一个对象里面的sing方法都是一样得不管我们实例化多少个都是一样的因为他们的方法是固定的 那么顾名思义方法就是函数 函数就是对象 是对象就要在堆里面去开辟空间存放 如果我们实例化出很多的对象里面都有sing方法的存在,那么内存就会对应开辟出很多的空间存放sing方法就很占内存 那么我们怎么解决这个问题勒?我们希望所有的对象使用同一个sing方法把它放到公共资源里面去那个对象要使用就直接去拿即可,这样就比较节省内存,那么我们要怎样做呢?

    	为了解决这个办法就产生出了原型对象prototype
    

    构造函数通过原型分配的函数是所有对象所共享的

    JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向原型对象。注意这个 prototype 就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。

    我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。

    代码演示

      <script>
            // 1. 构造函数的问题. 
            function Star(uname, age) {
                this.uname = uname;
                this.age = age;
                // this.sing = function() {
                //     console.log('我会唱歌');
    
                // }
            }
            Star.prototype.sing = function() { //这里我们吧sing方法放到原型对象身上 那个实例对象用就直接调取
                console.log('我会唱歌');
            }
            var ldh = new Star('刘德华', 18);
            var zxy = new Star('张学友', 19);
            ldh.sing()
            zxy.sing()
                // 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
        </script>
    

    在这里插入图片描述
    可以看到我们吧sing方法就放到了prototype原型对象身上了

    对象原型 proto

    对象都会有一个属性 proto 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数
    prototype 原型对象的属性和方法,就是因为对象有 proto 原型的存在。

    • __proto__对象原型和原型对象 prototype 是等价的
    • __proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,
      因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype

    代码演示

    <script>
            // 1. 构造函数的问题. 
            function Star(uname, age) {
                this.uname = uname;
                this.age = age;
                // this.sing = function() {
                //     console.log('我会唱歌');
    
                // }
            }
            Star.prototype.sing = function() { //这里我们吧sing方法放到原型对象身上 那个实例对象用就直接调取
                console.log('我会唱歌');
            }
            var ldh = new Star('刘德华', 18);
            var zxy = new Star('张学友', 19);
            // ldh.sing()
            // zxy.sing()
            console.log(ldh);//对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
            console.log(zxy);
            console.log(Star.prototype === ldh.__proto__); //true 因为原型对象prototype 和实例对象里面的__proto__是相等的
            console.log(Star.prototype === zxy.__proto__); //true
              // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
            // 如果没有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
        </script>
    

    在这里插入图片描述
    __proto__就指向了原型对象这就是为什么实例对象能拿到原型对象的方法

    constructor 构造函数

    • 对象原型( proto 和构造函数(prototype)原型对象里面都有一个属性 constructor 属性 ,constructor我们称为构造函数,因为它指回构造函数本身
    • constructor 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
    • 一般情况下,对象的方法都在构造函数的原型对象中设置 如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。

    代码演示

      <script>
            function Star(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
            // Star.prototype.sing = function() {
            //     console.log('我会唱歌');
            // };
            // Star.prototype.movie = function() {
            //     console.log('我会演电影');
            // }
            Star.prototype = {
                // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
                constructor: Star,
                sing: function() {
                    console.log('我会唱歌');
                },
                movie: function() {
                    console.log('我会演电影');
                }
            }
            var ldh = new Star('刘德华', 18);
            var zxy = new Star('张学友', 19);
            console.log(Star.prototype);
            console.log(ldh.__proto__);
            console.log(Star.prototype.constructor);
            console.log(ldh.__proto__.constructor);
        </script>
    

    在这里插入图片描述
    constructor 指向的就是构造函数

    构造函数、实例对象、原型对象三者之间的关系
    在这里插入图片描述
    在这里插入图片描述
    原型链

    在这里插入图片描述
    原型链查找的规则

    ① 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
    ② 如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象)。
    ③ 如果还没有就查找原型对象的原型(Object的原型对象)。
    ④ 依此类推一直找到 Object 为止(null)。
    ⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。

    原型对象this指向

    构造函数中的this 指向我们实例对象.
    原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象.

      <script>
            function Star(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            var that;
            Star.prototype.sing = function() {
                console.log('我会唱歌');
                that = this;
            }
            var ldh = new Star('刘德华', 18);
            // 1. 在构造函数中,里面this指向的是对象实例 ldh
            ldh.sing();
            console.log(that === ldh);
    
            // 2.原型对象函数里面的this 指向的是 实例对象 ldh
        </script>
    
    展开全文
  • 原型对象,是用来解决构造函数在创建实例的时候,防止重复执行所导致的性能的降低(这里主要指占用内存),来为服用带来方便 如果在构造函数上添加一个方法 当你每次调用这个构造函数的时候都会调用里面的方法如果用...

    原型对象,是用来解决构造函数在创建实例的时候,防止重复执行所导致的性能的降低(这里主要指占用内存),来为服用带来方便

    如果在构造函数上添加一个方法 当你每次调用这个构造函数的时候都会调用里面的方法如果用原型对象的话就不用反复调用

    每个函数都有一个prototype属性,他默认指向一个object空对象(实例)原型对象

    <script>
        function fun(age) {
            //添加一个name属性让name属性等于传过来的name参数
             this.age = age
        }
       const a= new fun()
       console.log(fun.prototype);
    </script>
    

    在这里插入图片描述

    constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
    它实际上就是等于这个函数的
    在这里插入图片描述

    显性原型对象与隐性原型对象

    prototype这个是显性原型对象 __proto__是隐性原型对象

    注意 构造函数上有 prototype和__proto__属性而他的实例上没有prototype属性只有__proto__这个属性

       function fun(age) {
            //添加一个name属性让name属性等于传过来的name参数
             this.age = age
        }
       const a= new fun()
       console.log(fun.prototype);
       console.log(fun.__proto__);
       console.log(a.prototype);
       console.log(a.__proto__);
    

    在这里插入图片描述
    而且他的实例上的__proto__和他的构造函数上的prototype是一样的

    ***其实当你调用某些方法比如像onclick事件就是它定义好的事件都是在原型上定义的 ***

    原型链

    看一段代码

    <script>
     function fun(){
         this.test1=function(){
             console.log("test1");
         }
     }
     fun.prototype.test2=function(){
         console.log("text2");
     }
     const a=new fun()
     a.test1()
     a.test2()
     a.toString()
     a.test3()
    </script>
    

    在这里插入图片描述
    这里test和test2都能找到因为他们一个添加到构造函数上一个添加到了原型对象上
    那为什么没有定义tostring和test3,tostring没报错test3确报错了因为tostring在原型链上

    原型链理解
    在这里插入图片描述
    当要找一个方法时他会先在这个构造函数上面找,如果找不到就会去他的原型对象上面找如果还找不到他就回去object空实例对象(其实是实例对象的__proto__,实例的__proto__===构造函数的prototype,prototype指向objeect)上面找
    在这里插入图片描述
    这个空object空实例对象指向一个object原型对象 就相当于 object.prototype(每个函数都有prototype)它里面还有很多方法tostring就是一个如果 object.prototype再找不到就会接着去__proto__上面找而object的原型对象的__proto__是null所以就找不到test3

    展开全文
  • 1.什么是原型 prototype叫原型,是每一个构造函数身上的一个属性,这个属性是以对象的形式存在的 function People() { this.uname = 'zs'; } console.dir(People);

    1.原型对象

    prototype叫原型,是每一个构造函数身上的一个属性,这个属性是以对象的形式存在的

    function People() {
      this.uname = 'zs';
    }
    console.dir(People);

    构造函数与prototype之间的关系

    原型对象的作用: 用来设置构造函数中的公共方法,避免内存浪费

    原型对象的使用: 构造函数.prototype.方法名 = function(){}

    2.对象原型(__proto__)

    每一个实例对象身上的一个属性,该属性是以对象的形式存在的(对象原型)

    function People() {
      this.uname = '张三';
    }
    let zs = new People();
    console.dir(zs);

    原型对象(prototype)与对象原型(__proto__)之间的关系

    3.constructor

    constructor是原型对象和对象原型身上都有的一个属性

    作用 : 用来记录当前原型对象或对象原型属于哪个构造函数

    function Fn(){}
    console.log('prototype',Fn.prototype);
    let zs = new Fn();
    console.log('__proto__',zs.__proto__);

    原型对象、对象原型和constructor之间的关系

    4.原型链

    当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么就会去prototype里找这个属性,还是找不到的话就会去这个prototype里面的prototype里找,就会一直这么找下去,这就是原型链

    展开全文
  • 原型对象和原型链

    2021-06-21 19:06:16
    本文主要介绍了什么是原型和原型链及其练习题。一个小问题:a什么情况下可以等于1等于2等于3。
  • 在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象 Object函数对象 Function。一般而言,通过 new Function 产生的对象是函数对象,其他对象都是普通对象。举例说明:functionf1() {//...
  • 原型链 **定义:**按照JS引擎的分析方式,在访问一个实例的属性的时候,现在实例本身中找,如果没找到就去它的原型中找,还没找到就再往上找,直到找到。这就是原型链。 实例的_protpo_指向的是原型对象。 实例...
  • 在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象。 function Person(age) { this.age = age } Person.prototype.name = 'kavin' var person1 = new Person() var person2 = new ...
  • 对象是一个包含相关数据方法的集合(通常由一些变量函数组成,我们称之为对象里面的属性方法)。 对象有时被称之为关联数组(associative array)了——对象做了字符串到值的映射,而数组做的是数字到值的映射...
  • 每个函数都有一个特殊的属性叫作原型(prototype)每个对象拥有一个原型对象 [[Prototype]] / __proto__ / Object.getPrototypeOf(object1)通过原型对象一级一级的往上找的这个过程就是原型链原型每个函数都有一个...
  • 原型对象: prototype 每个对象中都有 __ proto __ 1.构造函数原型prototype (也叫做原型对象) 构造函数通过原型分配的函数是所有对象所共享的,不用单独开辟内存空间。 每一个构造函数中都有一个prototype属性,...
  • 文章目录原型对象构造函数的原型对象对象的原型对象原型对象原型对象原型链原型链结构图函数在原型链中的结构 原型对象 构造函数的原型对象 每个构造函数都有一个原型对象存在,这个原型对象通过构造函数的...
  • 原型链和原型链的继承 这么宽泛的话题怎么描述? 1:从老大开始讲 表示对老大的尊敬 所有普通的prototype链都指向老大 Object.prototype 其包含了许多通用的功能(toString) 2: 所有的函数都会拥有prototype属性 ...
  • 在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)函数对象(Function)。一般而言,通过new Function产生的对象是函数对象,其他对象都是普通对象。举例说明:function f1(){ /...
  • 原型:JS声明构造函数(用来实例化对象的函数)时,会在内存中创建一个对应的对象,这个对象就是原函数的原型。...在原型对象上添加或修改的属性,在所有实例化出的对象上都可共享。 /*代码基本架构 1.每个函数.
  • 本文内容: 1.原型与原型链的基本概念 2.new
  • 原型和原型链的介绍使用

    千次阅读 2021-04-03 10:43:35
    JavaScript原型一、原型的介绍二、原型的使用prototypeconstructor_proto_三、原型链 一、原型的介绍   原型是JavaScript中function对象的一个属性,它定义了构造函数制造出的对象的公共祖先,通过该构造函数产生...
  • 介绍一下JavaScript 原型、原型链原型链有什么特点? 构造函数原型 prototype 对象原型 __ proto __ 回答思路: 1.构造函数原型 2.对象原型 3.原型链 4.原型链的特点 在 js 中我们是使用构造函数来新建一个对象...
  • 原型和原型链

    2021-03-11 10:49:12
    前言之前很多讲原型的文章都会有箭头图,看的我是头晕脑胀的,这次我希望能通过简单的文字,让大家都能彻底彻底理解原型和原型链,都知道虽然JavaScriptJava名字类似,但是两种完全没有联系。其中就包括Java中很...
  • JS 对象原型和原型对象 JS构造函数创建对象的缺陷 instance 上面的例子中 console.log(ldh.sing === zxy.sing);为false , 对于相同的方法,存储的地址不同 构造函数存在严重的内存浪费,如果想要所有的对象使用...
  • 认识对象原型,隐式原型 JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]],这个特殊的对象可以指向另外一个对象 当我们通过引用对象的属性key来获取一个value时,它会触发 [[Get]]的操作; 这个操作...
  • 原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。一、初识原型在JavaScript中,原型也是一个对象,通过...
  • 每个对象拥有一个原型对象,通过 __proto__ (读音: dunder proto) 指向其原型对象,并从中继承方法属性,同时原型对象也可能拥有原型,这样一层一层,最终指向null(Object.prototype.__proto__ 指向的是n
  • 3.所有原型对象都有一共constructor属性 4.所有函数都是对象 5.所有对象都有一个__proto_属性 function Person(myName, myAge) { this.name = myName; this.age = myAge; this.currentType = "构造函数中的type...
  • 原型链继承 :子类的原型对象 = 父类的实例对象 //1.父类构造函数 function Student(name,age,sex){ this.name = name; this.age = age; this.sex = sex; this.arr = [1,2,3]; } Student.prototype.classId = ...
  • prototype:每个函数都有一个prototype属性,它默认指向一个object空对象(即称为:原型对象)。原型对象中有个属性constructor,它指向该函数对象。 xianshi
  • 一、原型 ①所有 引用类型 都有一个 __proto__(隐式原型)属性,属性值是一个普通的对象 ...二、原型链 当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的 __pro
  • 原型和原型链是我们在面试中必会提问到的一个问题,理解原型和原型链不管对学习还是工作都会得到帮助,希望这篇文章会帮助你理解原型和原型链。 一、原型对象 原型对象分为两种,隐式原型(proto)显式原型...
  • 原型、原型链和继承原型原型链继承 原型 每一个构造函数都有一个 prototype 属性,这个属性会在生成实例的时候, 成为实例对象的原型对象。javascript 的每个对象都继承另一个对象,后者称为“原型”(prototype)...
  • 1.构造函数创建对象 ...2.1 prototype(原型对象) 每个函数都有一个 prototype 属性函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的 person1 pe

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 161,550
精华内容 64,620
关键字:

原型链和原型对象