js进阶笔记之原型,原型链

目录

1、原型对象

constructor 属性

对象原型

 2、原型链

3、instanceof 

4、原型继承


1、原型对象

面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。

面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。

面向过程开发(关注具体实现步骤)   

 面向对象开发(分析涉及的对象,指挥对象完成)----- 封装、继承、多态

  原型为了共享公共的成员     prototype 
 原型:JS为每个构造函数提供一个属性prototype(原型),它的值是一个对象,prototype也叫原型对象
 

构造函数通过原型分配的函数是所有对象所 共享的。

  • JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象

  • 这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存

  • 我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。

  • 构造函数和原型对象中的this 都指向 实例化的对象

    <script>// 面向过程开发(关注具体实现步骤)// 面向对象开发(分析涉及的对象,指挥对象完成任务) - 封装、继承、多态function Cat(name, age) {this.name = namethis.age = age//  给实例添加eat方法,将来每一个对象都有这个eat方法,造成空间浪费// this.eat = function () {//   console.log('猫吃老鼠')// }}// 给Cat原型添加公共的属性或方法,这样所有new出来的实例都可以访问Cat.prototype.eat = function () {console.log('猫吃老鼠')}Cat.prototype.nation = 'china'const cat1 = new Cat('加菲猫', 3) // {name:  '',age: ,eat}const cat2 = new Cat('银渐层', 4) // {name: '',age: ,eat() {}}console.log(cat1.age)console.log(cat1.nation)cat1.eat()cat2.eat()console.log(cat1.eat === cat2.eat) // true// 原型为了共享公共的成员  prototype// 原型: JS为每个构造函数提供一个属性prototype(原型),它的值是一个对象,prototype也叫原型对象console.log(Cat.prototype)console.log(Cat.prototype.constructor === Cat) // true// function f() {}// console.log(f.prototype)</script>

constructor 属性

constructor  属性,原型对象的属性---->原型对象的构造函数
 

 <script>// constructor属性,原型对象的默认属性->原型对象的构造函数//  Array.prototype.constructor === Arrayconsole.log(Array.prototype.constructor === Array) //  trueconst arr = [] //  new  Object()console.log(arr.constructor === Array) // trueconsole.log(arr.constructor === Array.prototype.constructor) // trueconsole.log(arr.constructor) // 访问arr数组对象的constructor,会到原型去访问console.log(Object.prototype.constructor) // Object ;const obj = {}console.log(obj.constructor) // Objectconst obj2 = { a: 1 }console.log(obj.constructor === obj2.constructor) // true</script>

访问成员的查找原则

 访问对象成员的原则:先查找自己身上有没有,有的话就使用,没有去原型查找

  <script>function Cat(name, age) {// this.name = namethis.age = age}Cat.prototype.eat = function () {console.log('猫抓老鼠')}Cat.prototype.name = '亚洲猫王'const cat = new Cat('小花', 3) // {name: '小花', age: 3}// 访问对象成员的原则: 先查找自己身上有没有,有的话就使用,没有去原型查找console.log(cat.name)</script>

对象原型

对象都会有一个属性__proto__ 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype  

__proto__ 对象原型里面也有一个 constructor属性,指向创建该实例对象的构造函数

 三者关系

构造函数   原型    原型对象

每个对象都有一个_proto_属性(非标准属性->ES6标准属性),指向原型对象,它与[[Prototype]]等价

 2、原型链


    对象访问成员的机制


    1、首先查找自身有没有,有就就近原则使用
    2、自身没有该成员,通过_proto_找到原型对象,看原型对象上有没有,有就执行
    3、假如原型对象上也没有,再找原型对象的_proto__,一直找到0bject.prototype
    4、一直找到Object. prototype,找不到就undefined

3、instanceof 

typeof  检测数据类型   不能精准的检测引用类型
 instanceof 实例对象 instanceof  构造函数
  判断构造函数的原型对象是不是在实例对象的原型链上

<script>//  // typeof 检测数据类型// string number booleanconsole.log(typeof []) //'object'console.log(typeof {}) // 'object'console.log(Array.prototype) // 数组原型也提供toString(),自己原型的方法是拼接字符串// console.log([1, 2, 3].toString()) // [object Array]console.log({}.toString()) // [object Object]console.log(Object.prototype.toString.call([])) // call调用函数// instanceof 实例对象 instanceof  构造函数// 判断构造函数的原型对象是不是在实例对象的原型链上console.log([] instanceof Array) // trueconsole.log([] instanceof Object) // trueconsole.log({} instanceof Array) // false</script>


4、原型继承

继承方式:构造函数继承、原型继承、组合继承、。。。。

    原型继承-----> 儿子的原型指向父实例对象,这样父实例对象的成员就可以实现继承
    
    缺点:继承的引用类型属性就一份

    <script>// 继承const person = {ears: 2,eat: function () {console.log('eating')},hobby: ['reading', 'running'],}function Student(name, age) {this.name = namethis.age = age}// 让Student的原型指向personStudent.prototype = personStudent.prototype.constructor = StudentStudent.prototype.study = function () {console.log('study hard!!!')} /*{ears, eat,  hobby,constructor, study}*/const s1 = new Student('zs', 16)const s2 = new Student('zw', 24)console.log(s1.ears)s1.study()s1.eat()s2.hobby.push('coding')console.log(s2.hobby)console.log(s1.hobby)console.log(person)</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/206580.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云轻量数据库开箱测评,1核1G轻量数据库测试

腾讯云轻量数据库1核1G开箱测评&#xff0c;轻量数据库服务采用腾讯云自研的新一代云原生数据库TDSQL-C&#xff0c;轻量数据库兼100%兼容MySQL数据库&#xff0c;实现超百万级 QPS 的高吞吐&#xff0c;128TB海量分布式智能存储&#xff0c;虽然轻量数据库为单节点架构&#x…

[点云分割] 基于颜色的区域增长分割

效果&#xff1a; 代码&#xff1a; #include <iostream> #include <thread> #include <vector>#include <pcl/point_types.h> #include <pcl/io/pcd_io.h> #include <pcl/search/search.h> #include <pcl/search/kdtree.h> #inclu…

【鸿蒙生态千帆起】HarmonyOS 系统级地图与位置服务,赋能广大开发者

在"与 HarmonyOS 同行&#xff0c;开放生态&#xff0c;共赢未来"为主题的 HUAWEI Developer Day&#xff08;简称 HDD&#xff09;沙龙中&#xff0c;Petal Maps 为开发者们带来了在 HarmonyOS 下地图领域的最新技术探索与实践成果。 得益于 HarmonyOS 一次开发多端…

nginx-编译安装-基础指令-信号

nginx 的编译与安装 nginx目录介绍 如果我们需要整合第三方模块&#xff0c;需要自己编译然此模块编译到nginx里面。apt和yum的安装只具有常用的基础功能。 下载nginx wget http://nginx.org/download/nginx-1.14.0.tar.gz/auto 目录 Changes 描述了一每个版本提供了那些特…

AI虚拟主播系统+智能交互+AI词库+虚拟形象 附带完整的搭建教程

近几年电商直播带货热潮持高不跌&#xff0c;很多商家企业都会选择线上直播卖产品&#xff0c;与此同时&#xff0c;虚拟主播开始盛行&#xff0c;与真人主播相比&#xff0c;品牌虚拟主播无档期风险、离职风险、人设稳定更可控。 AI虚拟主播的不是为了取代真人主播而开发&…

一键去水印免费网站快速无痕处理图片、视频水印

水印问题往往是一个大麻烦。即使我们只想将这些照片保留在我们的个人相册中以供怀旧&#xff0c;水印也可能像顽固的符号一样刺激我们的眼睛。为了解决这个问题&#xff0c;我们需要不断探索创新的解决方案&#xff0c;让我们深入研究一款强大的一键去水印免费网站“水印云”。…

什么是开关电源测试系统?如何用它进行测试?

开关电源测试系统是针对开关电源测试而开发的一种智能自动化测试系统&#xff0c;打破传统测试程序与缺陷&#xff0c;满足客户新的测试需求&#xff0c;助力客户解决测试难点&#xff0c;顺利完成开关电源测试&#xff0c;提高测试效能。那么开关电源自动化测试方案的流程是什…

行情分析——加密货币市场大盘走势(11.22)

大饼昨日晚上打了止损&#xff0c;笔者入场了空单&#xff0c;目前来看上涨乏力&#xff0c;下跌是必然的&#xff0c;昨日的下跌跌破了蓝色上涨趋势线&#xff0c;而今日白天开始反弹&#xff0c;别着急抄底&#xff0c;下跌还没有结束。 空单策略&#xff1a;入场36500 止盈…

IBM ELM—系统工程全生命周期管理平台

产品概述 Engineering Lifecycle Management是IBM提供的工程全生命周期管理组合工具&#xff0c;帮助企业降低开发成本&#xff0c;应对开发挑战并更快地发展其流程和实践。 随着产品变得更加复杂且数字化&#xff0c;传统的工程开发不再能及时且有效地满足系统工程的复杂度&a…

麒麟v10系统,在虚拟机上直接连公司同一个局域网,设置静态ip

1.更改配置信息 cd /etc/sysconfig/network-scripts vi ifcfg-ens33 TYPEEthernet PROXY_METHODnone BROWSER_ONLYno BOOTPROTOstatic DEFROUTEyes IPV4_FAILURE_FATALno IPV6INITyes IPV6_AUTOCONFyes IPV6_DEFROUTEyes IPV6_FAILURE_FATALno IPV6_ADDR_GEN_MODEstable-pri…

【Java】基于SaaS模式的Java基层医院卫生健康云HIS系统源码

一、模板管理 模板分为两种&#xff1a;病历模板和报表模板。模板管理是运营管理的核心组成部分&#xff0c;是基层卫生健康云中各医疗机构定制电子病历和报表的地方&#xff0c;各医疗机构可根据自身特点特色定制电子病历和报表&#xff0c;制作的电子病历及报表可直接在业务…