(二)原型和原型链

news/2025/2/21 9:14:16/

文章目录

  • 一、原型和原型链
    • 1.构造函数
    • 2.为什么要一个原型对象?
    • 3.两个属性:prototype与__proto__
    • 4.原型链
  • 二、new和Object.create的区别
    • 1.Object.create的使用
    • 2.二者区别


一、原型和原型链

在接触原型与原型链中,我产生了以下几个疑问:
1.构造函数、对象等概念是什么?原型对象是什么?
2.不是说只有实例对象有__proto__属性,为什么prototype(原型对象)也有__proto__属性呢?
3.为什么构造函数要单独将一些方法属性提出来,写入prototype中?

1.构造函数

在原型链中,我们有几个概念:构造函数、原型对象、实例对象。
        function Person(){}Person.prototype.age=18;Person.prototype.name=function(){return 'lk'};var person = new Person();console.log(Person.prototype);console.log(person.__proto__);console.log(Person.prototype.constructor);

我们可以看到

  1. 用function创建的叫构造函数,是一个类:Person
  2. 用new关键字声明的是实例对象,通过new Person(),创建了一个Person构造函数的实例对象。
  3. Person.prototype也是一个对象数据类型。
    在这里插入图片描述

2.为什么要一个原型对象?

  //不写在原型对象里function Person(){name:'lk';sayhi=function(){return 'hi'};}

如果要为Person这个构造函数创建成千上万个实例person1、person2…person10000,那就得不停的创建sayhi函数;那既然都是一样的功能,就写在一个地方,这些Person的实例们去一个地方(原型对象)拿就好啦!
所以我们将一些公共属性与方法写入原型对象里。

3.两个属性:prototype与__proto__

1.每个构造函数都有一个prototype属性,指向自己的原型对象
2.每个对象都有 __proto__属性 ,指向自己构造函数的原型对象(要用没写入构造函数里的方法,所以指向的是构造函数的原型对象)

这下看实例对象、构造函数、原型对象的关系,是不是清楚一些了?
在这里插入图片描述

4.原型链

我们说过,原型对象也是一个对象,具有__proto__属性。所以它也有自己的构造函数(本图是Object构造器/构造函数),原型对象的__proto__属性指向自己的构造函数的原型对象(Object.prototype);而Object.prototype的原型对象是null。
这样通过__proto__属性链接起来的一条路线,就叫做原型链。

在这里插入图片描述

二、new和Object.create的区别

用new和Object.create都可以创建对象,那么为什么要再有另一种方式呢?

1.Object.create的使用

①语法

Object.create(proto,[propertiesObject])

proto:新创建对象的原型对象
propertiesObject:可选。要添加到新对象的可枚举的属性。

②举个简单的栗子看看

<script>//自己写的原型对象const a = {name:'lk',sayhi:function(){console.log('hi')}}//创建一个新对象,a是它的原型对象const abab = Object.create(a,{height:{writable:true,configurable:true,value:180}})//看看创建的这个对象console.log(abab)abab.sayhi()
</script>

更正:下图原型对象a的原型对象应该是Object.prototype,写错了
在这里插入图片描述

2.二者区别

①代码看下

//2.细说区别//2.1用字面量创建对象:原型对象是Objectconst b = {name:'lk',sayhi:function(){console.log('hi')}}console.log(b)//2.2用Object.create创建对象,给定一个原型对象为nullvar baby = Object.create(null,{height:{value:18}})console.log(baby)

通过上面原型与原型链的学习,我们可以猜到baby这个对象的原型对象是空。
在这里插入图片描述

通过上面原型与原型链的学习,我们可以猜到baby这个对象的原型对象是空。 我们也可以推测这几个对象(还有1里面的abab对象):
1.abab对象的原型对象是a,a的原型对象是Object.prototype。abab对象可以使用Object.prototype里的属性与方法。在原型链上。
2.用字面量创建的b对象当然也可以使用Object.prototype里的属性与方法。
3.baby对象的原型对象是null,没有什么方法。

试试:

//2.3看看对象abab、b、baby的原型链上的方法toStringconsole.log(abab.toString());console.log(b.toString());console.log(baby.toString());//报错

在这里插入图片描述
当然,我们如果指定原型对象为Object.prototype,和用字面量/new创建的对象就是一模一样的了。

//3.指定原型对象为Object.prototypevar cdcd =Object.create(Object.prototype);console.log(cdcd);console.log(cdcd.toString())

在这里插入图片描述
②总结一下
其实他俩的区别大家已经心知肚明了:
Object.create可以指定任意的原型对象,常用于创建一个以空对象为原型对象的实例。


http://www.ppmy.cn/news/484816.html

相关文章

最详尽的 JS 原型、js原型链终极详解(第二篇)

四. proto JS 在创建对象&#xff08;不论是普通对象还是函数对象&#xff09;的时候&#xff0c;都有一个叫做__proto__ 的内置属性&#xff0c;用于指向创建它的构造函数的原型对象。 对象 person1 有一个 __proto__属性&#xff0c;创建它的构造函数是 Person&#xff0c;构…

原型及原型链详解

&#xff08;首先先大致的介绍一下什么是原型与原型链及相关术语&#xff0c;以便初学者有个大概的了解&#xff09; 原型&#xff1a;被用于复制现有实例来生成新实例的函数 &#xff08;这里补充一个设计模式为原型模式&#xff0c;即用原型实例指定创建对象的种类&#xff…

产品思维的核心要素

产品思维的关键词 如果说用几个关键词来总结 “产品思维” &#xff0c;我会用以下几个关键词来概括它&#xff0c;分别是&#xff1a;"4高"、"1深"、"3广" &#xff0c;具体怎么理解&#xff0c;我们接下来一个一个的说。 4高 先来看一看 4高…

elasticsearch 创建索引模版template

添加索引代码如下&#xff1a; PUT _template/redsmg-chandemo {"order" : 2,"index_patterns" : ["redsmg-chandemo_*"],"mappings" : {"doc" : {"dynamic_templates" : [{"string_as_num" : {"…

献给蓝初小白系列(二)——Liunx应急响应

1、Linux被入侵的症状​​ ​​https://blog.csdn.net/weixin_52351575/article/details/131221720​​ 2、Linux应急措施 顺序是&#xff1a;隔离主机--->阻断通信--->清除病毒--->可疑用户--->启动项和服务--->文件与后门--->杀毒、重装系统、恢复数据 …

高效项目评审的6大注意事项

评审活动是软件项目降低风险的重要手段&#xff0c;但在实际评审活动中往往因主题不明确、现场争执不停&#xff0c;主持人无法有效控制会议流程等问题&#xff0c;最终导致项目评审活动效果大打折扣。 那么在项目评审过程中有什么注意事项&#xff0c;有助于完成高效的评审会议…

Linux【系统学习】(命令及虚拟机篇-无shell)

目录 第 1 章 Linux 入门 1.1 概述 1.2 Linux 和 Windows 区别 ​编辑 1.3 CentOS 下载地址 第 2 章 VM 与 Linux 的安装 2.1 VMWare 安装 CentOS 安装 第 3 章 Linux 文件与目录结构 3.1 Linux 文件 3.2 Linux 目录结构 第 4 章 VI/VIM 编辑器&#xff08;重要&…

IBM启用水冷却技术为IDC服务器降温

数据中心的很多用户因为有更多的互联网业务需求&#xff0c;而增添了服务器&#xff0c;恰逢眼下能源紧张&#xff0c;电费上涨&#xff0c;用户拿到手的电费单也变得让人难以接受。如何切实降低idc的电能损耗&#xff0c;不仅是用户要关注的事情&#xff0c;各个服务器设备制造…