美文网首页原型Web前端之路让前端飞
从小白一步步详解JS中的原型与对象【2】

从小白一步步详解JS中的原型与对象【2】

作者: 大小说家RCQ | 来源:发表于2017-05-28 19:11 被阅读36次

什么是原型

原型是js中非常特殊一个对象,当一个函数创建之后,会随之就产生一个原型对象,当通过这个函数的构造函数创建了一个具体的对象之后,在这个具体的对象中就会有一个属性指向原型。

原型的详细分析过程

  • 第一步
function Person(){
    }

图形分析:

第一种状态

以上是第一种状态:function Person(){},Person函数中有一个prototype的属性指向Person的原型对象,在原型对象中有一个constructor的属性指向了Person函数,所以可以通过new Person创建对象。

  • 第二步
Person.prototype.name = "Leon";
Person.prototype.age = 23;
Person.prototype.say = function() {
       alert(this.name+","+this.age);
    }

图形分析:

第二种状态

通过Person.prototype.xxx为原型设置值后,这些属性和方法都是设置在Person的原型中的。

  • 第三步:
var p1 = new Person();
p1.say();

图形分析:

第三种状态

当使用Person创建了对象p1之后,会在对象中有一个 prop_属性(这个属性是不能被访问的)指向了原型,当使用对象调用原型的时候,首先会在对象的内部寻找是否存在这个属性,如果没有,就会通过prop去原型中寻找属性,所以当调用p1.say(),在自己的空间中不存在这个方法,就会找到原型中的该方法并调用。

  • 第四步:
var p2 = new Person();
p2.name = "Ada";
p2.say();

图形分析:

图片.png

当创建了一个新的p2后,依然会有一个prop属性指向原型,此时如果通过p2.name设置了属性之后,会在自己的内存空间存储name的值,当调用say方法的时候就在自己的内存空间中找到了name而不会再去原型中找了。(特别注意:原型中的值不会被替换,仅仅只是在查找时被覆盖)

至此,对象的创建和原型的分析完毕!

文章写太长懒得看,明天继续总结

相关文章

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • 最详尽的 JS 原型与原型链终极详解记录

    该文章来自于最详尽的 JS 原型与原型链终极详解,没有「可能是」的学习总结 一:对象的分类 JS中对象分为两种,函...

  • 从小白一步步详解JS中的原型与对象【2】

    什么是原型 原型是js中非常特殊一个对象,当一个函数创建之后,会随之就产生一个原型对象,当通过这个函数的构造函数创...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • Web前端------JS原型、原型链详解

    转载至: JS原型链详解JS是基于对象的语言,原型对象是其模拟面向对象的一种方式,关于原型有两种表现形式:一种是p...

  • 从小白一步步详解JS中的原型与对象【1】

    面试中被问到很多原型与对象的东西,于是自己总结了这些东西写下,希望有所收获。 JS创建对象方式 方式一: 在js中...

  • 原型及原型链

    什么是原型 js中的原型指的是一个对象可以从另一个对象继承特性。每个对象都有一个原型对象,对象以其原型对象为模板,...

  • 原型和原型链的简单理解

    原型 在JS中原型就是prototype对象,用来表示类型之间的关系。 原型链 JS中对象和对象之间是有联系的,通...

  • 2022前端高频面试题

    JS相关 1.原型和原型链是什么 原型和原型链都是来源于对象而服务于对象的概念js中引用类型都是对象,对象就是属性...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

网友评论

  • 不加糖就够了:第一张图里person的prototype最好指向personprototype那个框,指向constructor会产生误解
    大小说家RCQ: @总有贱婢想害朕 嗯,文字已经说清楚了

本文标题:从小白一步步详解JS中的原型与对象【2】

本文链接:https://www.haomeiwen.com/subject/sdphfxtx.html