文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript从入门到精通系列第二十一篇:JavaScript中的原型对象详解

2023-10-28 09:52

关注

文章目录

前言

一:原型对象

1:什么是原型对象

2:原型对象的作用

 3:通过原型对象实现工厂方法

二:原型对象咋说

 1:in和原型对象

2:hasOwnProperty()函数

3:hasOwnProperty()来历

   


前言

        我们讲,尽量不要把全局作用域当中声明变量。将函数在全局作用域中污染了全局作用域的命名空间。

function fun(){    alert("hello大家好我是:"+this.name);}

        定义在全局作用域当中是非常不安全的,后边容易把前边的给覆盖掉。那么我们应该怎么办呢?

一:原型对象

1:什么是原型对象

        我们没创建一个函数对象,解析器都会往函数中添加一个属性prototype。只要是函数,不论是构造函数还是普通函数,都会解析器都会放进去这个东西,每一个函数都会有属于他自己的prototype

        证明一下这个东西:

function Person(){}console.log(Person.prototype)

        这个prototype属性对应了一个对象,他就是一个原型对象。 

2:原型对象的作用

        原型对象是为了构造函数而生,对于普通函数,毛用没有。

       构造函数对象和通过构造函数对象创建出来的任何一个对象,两者prototype属性指向的对象是一个,并且这个属性名称叫__proto__,哈哈,这倒霉名字。

        值得注意的是,构造函数中的指向这个原型对象的属性是prototype,而在基于构造函数创建出来的对象中这个属性是__proto__,这是一个隐藏属性

        也就是说:Person.prototype == per.__proto__   结果为true

        证明这件事情:

function Alibaba(){}var ali = new Alibaba();console.log(ali.__prototype__ == Alibaba.__prototype__);

        原型对象就相当于这个对象,或者叫这个类的一个公共区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中公共的东西放到这个原型对象当中。

        当我们访问对象的一个属性或者方法时,会先在对象自身中找,如果有则直接使用,如果没有直接去原型对象中找

        证明这件事情:

function Person(){    }Person.prototype.a = 123;console.log(Person.a);

        如果person对象当中也有这个属性呢?那么会直接在对象中找。

        说到这里,我们就非常明显了,我们应该把sayName这个方法放到原型对象当中这个方式是最好的。

 3:通过原型对象实现工厂方法

function Person(){ }Person.prototype.sayName = function (){    console.log(this);    console.log(this.name)}function createPerson (name,age,gender){    var per = new Person();    per.name = name;    per.age = age;    per.gender = gender;    return per;}var per = createPerson("悟空",18,1);per.sayName();

        日后,我们创建构造函数或者叫类的时候,我们可以将这些对象共有的属性和方法统一添加到构造函数的原型对象当中,这样不会为了每一个对象添加,也不会影响全局作用域,就可以让每一个对象都可以使用这些属性和方法了。

二:原型对象咋说

 1:in和原型对象

function Person(){}Person.prototype.name = "";var per= new Person();console.log("name" in per);

        使用in检查对象当中是否含有某个属性的时候,如果这个属性在原型对象当中依旧会返回ture。

        证明这件事情:

2:hasOwnProperty()函数

        每个对象都有这个函数。

        使用这个函数可以排除原型对象的干扰,从而检查对象自身的属性

        证明这件事情:

3:hasOwnProperty()来历

        这个函数位于原型对象当中。但是还是有一个问题,原型对象当中我们也没加,那到底是咋进去的呢?

        原型对象也是对象,所以原型对象也有原型对象。当我们使用一个对象的属性或者方法时,会现在自身中进行寻找,如果自身中有则直接使用。如果自身中没有则去原型对象中去寻找。如果原型对象中有则使用,如果原型对象中也没有则去原型对象的原型对象去寻找。        

        直到找到Object对象的原型,Object对象的原型没有原型,如果Object对象的原型中依旧没有,那就返回undefined。

function Person(){}Person.prototype.name = "";var per= new Person();console.log(per.__proto__.hasOwnProperty("hasOwnProperty"));console.log(per.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));console.log(per.__proto__.__proto__.__proto__);

           per.__proto__是Object类型的对象。per.__proto__.__proto__是这个Object对象的原型对象,这样操作原型对象也就原型到头了

来源地址:https://blog.csdn.net/Facial_Mask/article/details/133914922

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯