精华内容
下载资源
问答
  • 同时,如果我们能很好的理解JS中的原型原型链,对于控制台输出的很多信息我们也能更好的理解,而原型链也是实现继承的主要方法。所以理解JS中的原型原型链就显得很有必要了。1.理解原型首先,我们创建的每个函数...

    导读:JavaScript中(JS)的原型和原型链是web前端开发面试中经常被问到的问题;同时,如果我们能很好的理解JS中的原型和原型链,对于控制台输出的很多信息我们也能更好的理解,而原型链也是实现继承的主要方法。所以理解JS中的原型和原型链就显得很有必要了。


    1.理解原型

    首先,我们创建的每个函数都有一个prototype的属性(原型):
    function Person(name){  this.name=name}console.log(Person.protoytpe)  //prototype就是一个原型/*输出:  {constructor: ƒ}    constructor: ƒ Person(name)    __proto__: Object**/Person.prototype.constructor===Person  //true
    prototype是一个指针,它指向一个对象,这个对象包含了所有实例共享的属性和方法.从上面的输出内容可以看出,prototype属性下面有一个constructor的函数,这个函数就是用来构建Person的具体实例对象的.

    接着,我们使用prototype为Person添加一个age属性,并创建Person的实例对象,看一下下面的操作结果是怎样的.

    Person.prototype.age=10var person1 = new Person('zhangsan');var person2 = new Person('lisi');console.log(person1.age===person2.age)  //trueconsole.log(person1.name===person2.name)  //falseconsole.log(person1.__proto__===Person.prototype)  //true
    我们可以看到age这个属性是所有Person实例对象所共享的,也就说明了可以使用prototype来实现所有实例对象共享其包含的属性和方法(如上面的age属性).

    最后,我们看一下person1这个实例对象对输出什么内容:

    e51c3266984863b8f6ca145d7e2a1ea6.png

    图1从图1可以看到person1是通过Person来构建的,它有两个属性:name和__proto__,其中name是Person中定义的属性,__proto__是每个实例对象都有的属性,在它的下面存在之前设置的age属性(通过prototype设置的属性),同时,由下面的输出结果可以得到下面的关系图:
    console.log(Person.prototype.constructor===Person)  //trueconsole.log(person1.__proto__===Person.prototype)  //true

    fcd919129d0d37b0570770696978b98e.png

    图2
    • person1通过Person构造函数生成,并通过__proto__属性可以获得Person.prototype原型;
    • Person通过prototype指针获得Person.prototype原型,再使用其内部存在的constructor指针,又指向了Person.
    2.理解原型对象从上面的描述可以看到,只要创建了一个函数,那么就为该函数创建一个prototype属性,这个属性指向了原型对象.还可以看到这个原型对象存在一个constructor的属性,它表示构造函数,其包含了一个指向prototype属性所在函数的指针,可以从下面的输出结果看出:
    console.log(Person.prototype.constructor===Person)  //true
    图3给出了Person、person1和person2之间的关系(根据第二段代码):

    638055612105b95b8a74ecb672643f9c.png

    图3
    • 图3中,Person.prototype指向了原型对象,Person.prototype.constructor指向了Person,除了constructor这个属性之外,同时还包含了我们在之前添加的age属性;

    • person1和person2实例对象包含了一个内部属性(__proto__),这个属性指向了Person.prototype。虽然这两个对象不包含age属性,但是也可以访问到,它是通过查找对象属性的过程来实现的.
    3.原型链原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.这种说法比较抽象,来看下面的代码(因为原型链和继承息息相关,所以会涉及到继承的知识点),以下面的代码为例进行说明.
    //创建一个Person函数,并添加name、age属性和sayName()方法function Person(name,age){        this.name=name        this.age=age        this.sayName=()=>{            console.log("hello "+this.name)        }    }//Person的实例对象var person1 = new Person('zhangsan',20);//创建School函数function School(school){        this.school=school        this.saySchool=()=>{            console.log(this.name+"\'s school is "+this.school)        }    }//将person1加入到School.prototype原型中School.prototype=person1//创建School的实例对象var school1 = new People('pku')school1.sayName()  //output:hello zhangsan,说明已经继承了Person中的sayName()方法//为了更明显的看出原型链的结构,再创建一个Student函数,里面不加任何的属性和方法function Student(){}//将school1加入到Student.prototype原型中Student.prototype=school1var s1 = new Student()//29行中已经实现了将Student.prototype原型指向了people1,所以可以调用School中的saySchool()方法s1.saySchool()  //output:  zhangsan's school is pku//通过继承额方式,s1已经获得了Person和School的所有属性和方法

    经过上面的代码输出结果和分析,我们在控制台打印school1这个实例对象,看看输出的内容:

    console.log(school1)
    286d27a23bcdf5385f5dd4dac7ded12f.png

    图4

    除了School本身自带的saySchool()方法和school属性之外,它的__proto__属性还指向了Person,这样也就实现了继承,从而具有了Person的所有属性和方法,可以对这些属性和方法进行调用.

    我们还可以打印一下school1和people1看看输出的结果:

    console.log(school1)console.log(people1)
    000cc324f73a52f171fb3e2f10159797.png

    图5

    12b3de59a04c57b93c1807073af78801.png

    图6

    • 首先,Student的__proto__属性指向了Person,此时的Person已经拥有了School的属性和方法;

    • 其次,在__proto__属性下面的__proto__又是指向了Person,它具有本身自定义的sayName()方法和name属性;
    我们可以画一张图来看看Person、School和Student之间的关系:

    1abd4113b6ae3f156ad64aa890a062ca.png

    图7从图7可以看到Student到Person的整个原型链.原型链本质上是实现了一种原型搜索机制,当我们希望访问某个属性时,首先会在实例中搜索该属性,如果没有找到该属性,则会继续搜索实例的原型,在通过原型链实现继承的情况下,就会沿着原型链继续向上展开索过程.比如说上述的school1实例对象本身是没有saySchool()方法的,根据原型链的原则,它会搜索到最近的saySchool()方法,并进行调用.本文主要介绍了原型和原型的基本概念,在介绍的过程中也加入了JS继承的介绍.如果上面的内容有错,请指出,我会及时改正.相互学习,共同进步.感谢你的关注...
    展开全文
  • JS原型原型对象的理解 原型原型(prototype)是每个函数都具有的一个属性,本质上是一个指针,指向的是函数的原型对象。 例如: function Person(Name){ this.name=Name } Person.prototype//可以查看当前Person...

    JS原型、原型对象的理解

    原型:

    原型(prototype)是每个函数都具有的一个属性,本质上是一个指针,指向的是函数的原型对象。
    例如:

    function Person(Name){
        this.name=Name
    }
    Person.prototype//可以查看当前Person函数的原型对象。
    

    原型对象

    函数中的protype属性所指向的对象,这个对象的用途就是可以指定特定类型的所有实例共享的一个方法和属性,我们不必在构造函数声明一个对象实例的信息。
    例如:

    function Person(){}   //声明一个空的构造函数,构造函数不成文的规定以大写字母开头
    Person.prototype.say=function(){
        console.log('说话')
    }
    let p1=new Person()
    let p2=new Person()
    p1.say()  //说话
    p2.say()  //说话
    //可以看到p1、p2都是Person构造函数的实例,且他们都具有say这个方法。
    
    

    原型对象中具有constructor属性,本质上也是个指针,他指向的是Prototype属性所在的一个函数。即

    Person.prototype.constructor==Person //true
    

    实例

    当我们调用构造函数来创建一个实例的时候,内部会产生一个指针[[prototype]],这个指针指向的是原型对象,但是在标准中我们是获取不到这个指针的,但是chrome、firefox等浏览器给了我们一个非标准的属性_proto_,我们可以通过调用实例的这个属性来查看原型对象。
    虽然我们无法直接访问[[prototype]]属性,但是我们可以通过isPrototypeOf()方法来确定是否存在这个关系。

    Person.prototype.isPrototypeOf(p1) //true
    

    在ECMAScript5中新增了一个方法可以返回[[prototype]]这个指针,Object.getPrototypeOf()

    Object.getPrototypeOf(p1)==Person.prototype//true
    

    我们在实例中使用属性或者方法的时候,首先会搜索实例本身,如果找到了该方法或者是属性就会直接调用,没有的话则会去原型对象中进行搜索。

    function Person(){
        this.say=function(){
            console.log('构造函数中的方法')
    }
    }
    
    Person.prototype.say=function(){
        console.log('函数原型中的方法')
    }
    let p=new Person()
    
    p.say()  // 构造函数中的方法
    

    上述示例在之前的构造函数中加了一个和原型方法同名的函数。我们new实例在调用后可以看到他是执行了构造函数中的方法,从这就可以看到他是优先执行实例中的方法的(我们可以通过hasOwnProperty来判断属性或者方法是否存在于实例中的。)

    p.hasOwnProperty('say') //true
    

    实例、构造函数、原型对象三者的关系。

    在这里插入图片描述

    总结:

    理解了原型和原型对象对后面对象的继承有很大的帮助

    展开全文
  • 原型原型链是js基本概念。下面我们了解一下原型的基本用法。首先定义三个对象,然后判断x、y、z是否可以通过a对象访问。代码如下:let a ={ x:'x'}let b ={ y:'y'}let c ={ z:'z'}console.log('x' in a)...
    81c7601f044e7ee39f6e884822ffd5d3.png

    原型和原型链是js中的基本概念。下面我们了解一下原型的基本用法。

    首先定义三个对象,然后判断x、y、z是否可以通过a对象访问。代码如下:

    let a ={ x:'x'}let b ={ y:'y'}let c ={ z:'z'}console.log('x' in a)console.log('y' in a)console.log('z' in a) 

    输出结果为 true、false、false。

    因为x是a的属性所以返回为true。x、z不属于a的属性所以返回为false

    然后我们对代码进行了修改,代码如下:

    let a ={ x:'x'}let b ={ y:'y'}let c ={ z:'z'}Object.setPrototypeOf(a,b)Object.setPrototypeOf(b,c)console.log('x' in a)console.log('y' in a)console.log('z' in a)

    输出结果为 true、true、true。

    上面的代码中使用js内置的方法Object.setPrototypeOf将a对象的原型对象设置成b对象,然后用同样的方法将b对象的原型设置成c对象。

    然后判断a上的x属性时,首先查找a对象的本身是否存在x属性,因为x属性存在,所以停止查找,返回为true。

    然后判断a上的y属性时,首先查找a对象的本身是否存在y属性,因为不存在,所以继续查找a对象的原型b对象是否存在y属性。因为y属性存在,所以停止查找,返回为true。

    然后判断a上的z属性时,首先查找a对象的本身是否存在z属性,因为不存在,所以继续查找a对象的原型b对象是否存在y属性。因为y属性不存在,所以继续查找b对象的原型c对象是否存在z属性。因为z属性存在,所以停止查找,返回为true。

    我们可以看到a对象的原型b其实也是一个对象,b对象的原型c也是一个对象,在js执行环境中对象的原型属性是内置属性,我们无法直接访问。另外搜索对象的一个属性的过程,总是先查找对象本身,然后再搜索对象的原型,然后再搜索原型的原型。。。这样就形成了原型链

    展开全文
  • js 原型的理解

    2020-02-14 13:29:44
    你可以这样理解:每一个JavaScript对象(null除外)在创建时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型"继承"属性。(在js中有这么一个概念:万物皆对象。请大家记住这个概念,在...

    关于js原型链 就是原型上面的原型 串在一起 跟作用域链有点类似
    1、prototype,原型,那什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型"继承"属性。(在js中有这么一个概念:万物皆对象。请大家记住这个概念,在es6中体现的尤为明显)

    2、proto,这是每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

    3、constructor,每个原型都有一个 constructor 属性指向关联的构造函数。

    然后我们引入原形链的概念:当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

    举个例 画一个原型图

     function Student(sname, sage){
                this.sname = sname;
                this.sage = sage;
            }
            Student.prototype.intr = function(){
                console.log(`I'm ${this.sname},I'm ${this.sage}`);
            }
            var lilie = new Student("Li Lei", 12);
            var hmm = new Student("Han Meimei", 12);
    

    他的原型图就是在这里插入图片描述

    展开全文
  • 主要介绍了小白谈谈对JS原型的理解的相关资料,需要的朋友可以参考下
  • js原型的理解

    2018-05-19 16:33:46
    该构造函数有一个prototypes属性,指向该构造函数的原型对象,该原型对象又有一个属性,__proto__属性指向js中的Object对象,该对象有一个__proto__属性指向为null,以上就是原型的理解原型链的使用主要运行在...
  • js原型的理解

    2017-10-26 21:16:51
    谈谈你对js原型的理解js没有类继承机制,它是靠原型机制来实现继承的。比如Person对象有一个Person.prototype原型,当无法修改Person的构造函数时,可以通过Person.prototype让所有的Person实例都具有某一属性或...
  • 对于js的原型原型的理解

    万次阅读 多人点赞 2019-06-23 22:20:23
    一、原型原型链 JavaScript是一门基于原型的语言,在软件设计模式中,有一种模式叫做原型模式,JavaScript正是利用这种模式而被...原型模式目的是用原型实例指定创建对象种类,并且通过拷贝这些原型创建新...
  • Javascript语言继承机制一直很难被人理解。 它没有"子类"和"父类"概念,也没有"类"(class)和"实例"(instance)区分,全靠一种很奇特"原型链"(prototype chain)模式,来实现继承。 原型 每个函数都有...
  • JS原型原型的理解

    千次阅读 2021-02-02 13:32:55
    在Java或C语言中,本身都会提供一个class实现,在ES5/ES6时候JavaScript引入了class关键字,但这种只是语法糖形式,JavaScript本身还是依赖于原型的
  • JS原型理解

    2016-06-28 18:16:32
    说实话,一开始我对prototype和property是分不清的,我说的是单词分不清,不知道他们的意思,在强制自己记忆了一遍之后,我是这么记忆的...正文从这里开始吧,说说我对原型模式的理解。 任何一个对象都是有原型的,像
  • 我对js原型原型的理解

    万次阅读 多人点赞 2018-11-02 16:44:30
    我们知道在js中,万物皆对象,对象可以说是重中之重了。每一个对象都拥有自己属性。但是在这个世界中有很...在js中每个对象都有一个与它关联对象,叫做原型对象。每一次获取对象属性都是一次查询过程,当在对象...
  • 主要和大家一起深入理解JS原型原型链,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣小伙伴们可以参考一下
  • js原型理解

    2018-03-05 16:05:43
    不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O(∩_∩)O~~ 1 ...
  • js 原型的理解

    2018-08-09 22:16:55
    1、https://blog.csdn.net/u012468376/article/details/53121081 JavaScript中原型对象彻底理解 2、https://blog.csdn.net/bluesky1215/article/details/54891147 JS原型原型链终极详解proto、prototype及...
  • js原型的通俗理解

    2017-09-21 16:52:19
    刚学习js的时候,写过一篇有关于原型的博客,借鉴于他人的理解 可以把函数看成一个类,原型是所有类都有的一个属性,js原型的作用就是给这个类的每一个对象都添加一个统一的方法,看一下下面这段代码就能轻易理解  ...
  • /** * 在js这门语言中,一切都是对象,继承Object Function * 一个对象一旦创建(通过构造函数),就当是造一个盘古出来,... * 也可以理解为prototype就是盘古的原型对象 * 但是呢这个小宇宙只要constuct属性...
  • 主要针对javascript中的原型原型链深入理解原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣小伙伴们可以参考一下
  • JS原型的理解

    2018-11-13 00:31:59
    我们先理解原型之前,先来看看prototype和__proto__区别; 1、prototype是函数Function才有属性; 2、JS中每个对象都有一个__proto__属性; 例: var a = {}; console.log(a.prototype); //undefined console.log...
  • JS原型的理解

    2019-10-16 23:57:16
    但是js是基于对象,没有类,包括es6class本质上还是对象,和java中class并不相同。但是想一下在实际开发经常用到toString这些方法,为什么可以直接使用而不用每次都去定义,这一切都要归功于原型链 构造函数 ...
  • 1.所有引用类型(函数、...3.原型对象:拥有prototype属性对象,在定义函数时就被创建 a.所有函数_proto_都是指向Functionprototype b.构造函数new出来对象_proto_指向构造函数prototy c.Objectprot...
  • 无论什么,只要创建了一个新函数就会根据一组特定规则为该函数创建一个Prototype属性,这个属性指向函数的原型对象 原型对象 所有的原型对象都会自动获得一个constructor属性,它默认指向prototype属性...
  • 前言 对于原型原型链、原型继承,是...原型的理解 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。pro...

空空如也

空空如也

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

原型js的理解