JS中原型和原型链的详细讲解（附代码示例）以及 new关键字具体做了什么的详细讲解

这次我们结合实际的案例，来详细的讲解原型和原型链

原型的作用其实一句话概括就是扩展对象

下面我用实际的代码来给大家讲解，详细的注解都在代码里面了


<script>// 所有的函数都有prototype属性（原型）function Cat(name,age) {this.name = namethis.age = age}let cat2 = new Cat('喵喵',2)// Cat构造函数上面并没有eat函数，但是我们可以通过prototype给他挂载一个函数在上面// 从而使我们接收了实例化的对象的cat2可以调用这个方法Cat.prototype.eat = function() {console.log('eat fish');}cat2.eat()// 通过prototype直接格式化时间let date = new Date()Date.prototype.formate = function() {let year = this.getFullYear()let mouth  = this.getMonth() + 1let day = this.getDate()return `${year}年${mouth}月${day}日`}// 通过一个date.formate直接给你输出这个格式化之后的结果console.log(date.formate());//这就是原型扩展对象所有的对象都有__proto__属性（原型）// 假如现在有一个对象叫cat，里面有一个属性是name为喵喵// 现在我们想从喵喵这里面读取一个函数，叫做eat// 我们可以在cat对象内直接加一个函数eat：fn// 当然，也可以通过__proto__在他的原型上去挂载let cat = {name: '喵喵'}cat.__proto__.eat = function (){console.log('喵喵吃鱼');}cat.eat()</script>

new关键字的作用

function Cat(name,age) {this.name = namethis.age = age
}
let cat2 = new Cat('喵喵',2)

我们用前面这个例子来进行说明

1.创建一个空对象
//这里的空对象就是new Cat 我们用cat2来接收这个空对象2.修改this指向，把this指向创建出来的空对象。
//这个时候这个空对象的this就指向cat2，相当于就是 new Cat3.将空对象的__proto__指向构造函数的prototype
//这里就相当于说现在的cat2可以通过prototype获取原型链上的挂载了的数据或者函数4.对构造函数又返回值得做处理判断，加入返回基本类型，则忽略，引用数据类型，则返回该类型
//返回内容

JS中原型和原型链的详细讲解（附代码示例）以及 new关键字具体做了什么的详细讲解相关推荐

《js中原型和原型链的深入理解》的笔记
前言:在微信公众号前端大全上看过<js中原型和原型链的深入理解>,个人认为这是我看过的js原型链的文章中,在思维结构上理解最清楚的一个文章了,本着温故而知新,有害怕找不到这个文章,我就把文 ...
前端开发：JS中原型和原型链的介绍
前言在前端开发过程中,涉及到JS原理相关的内容也就是常用的几大模块,不仅常用而且很重要,但是涉及到原理的话会有点难懂,尤其是对JS接触不太久的开发者来讲.本篇博文就来分享一下关于JS的原型和原型链相 ...
JS 中原型和原型链深入理解
作者: erdu segmentfault.com/a/1190000014717972 首先要搞明白几个概念: 函数(function) 函数对象(function object) 本地对象(nat ...
JS题目总结:原型链/new/json/MVC/Promise
JS题目总结:原型链/new/json/MVC/Promise 1原型链相关解读: 上图中,Object,Function,Array,Boolean都是构造函数第一个框: object是实例对象 ...
[js] js怎样避免原型链上的对象共享？
[js] js怎样避免原型链上的对象共享? 组合继承优势公有的写在原型私有的卸载构造函数可以向父类传递参数劣势需要手动绑定constructor 封装性一般重复调用父类性能损耗
【JS继承】JS继承之原型链继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
【OS系列-2】- 进程详细讲解（代码示例）
进程进程详细讲解(代码示例) 进程示例代码创建进程的具体过程? 执行 fork()的时候系统做了什么? 进程间通信管道消息队列共享内存信号量套接字进程间同步信号量文件锁无锁 C ...
Java对象，Map，List，Set数组等相互转换大全（详细讲解,附代码，讲解案例）
Java对象,Map,List,Set数组等相互转换大全(详细讲解,附代码,讲解案例) Java对象转 JSON字符串 JAVA对象转MAP Map转java对象 List转map List和Map ...
uniapp获取手机号（详细教程附代码）
uniapp获取手机号(详细教程附代码) 一.获取code 二.通过code获取获取openId 和 session_key 三.让用户授权(同意后需要对数据解密) 个人小程序不能使用这个功能,必须是 ...
php 运营商授权,PHP判断手机号运营商（详细介绍附代码）
道理很简单,知道手机号规则进行正则判断就可以移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.15 ...

JS中原型和原型链的详细讲解（附代码示例）以及 new关键字具体做了什么的详细讲解

这次我们结合实际的案例，来详细的讲解原型和原型链

原型的作用其实一句话概括就是扩展对象

new关键字的作用

JS中原型和原型链的详细讲解（附代码示例）以及 new关键字具体做了什么的详细讲解相关推荐

最新文章

热门文章