JS原型及原型链

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

目录

一、创建对象的方式

1、Java语法中，创建对象的方式

①通过构造函数

2、JS语法中，创建对象的方式

①通过普通方式（直接new Object）

②通过字面量{ }

③通过自定义构造函数（即：Java中的构造器/构造函数）

二、原型（prototype）

1、原型的概念

举例：

 在控制台查看原型：

 2、原型的简写

3、案例：给String类添加一个原型方法（静态方法）

三、继承的概念

1、Java语法中的继承

2、JS语法中的继承

举例：

四、原型与原型链

1、结论一：任何函数都有一个属性为原型（prototype）对象，并且里面的constructor属性指向函数本身。

举例：

2、结论二：对象中，也有原型对象，只不过不是叫prototype，而是叫_ _proto_ _，这两个对象本质上是一个。即：对象和构造它的构造函数，拥有同一个原型对象，只是名称不一致，一个叫prototype，一个叫_ _proto_ _。

举例：

类比：就好比java中，一个类的静态变量/静态方法，在该类的对象实例中也会存在这个静态变量/静态方法，只不过我们平时不建议通过对象实例来调用，因为通过类直接就可以调用。

3、原型对象是由Object函数构造的。因此原型对象也会有一个原型对象，和Object函数中的原型对象是同一个对象。（这就叫原型链）

举例：

示意图：

注意：由于Object是顶级父类，因此Object()构造函数中的原型对象就不再往上指了，因此为null。

4、思考1：对象为什么有toString方法？

原型链：下图中，红色的箭头，就是原型链。

5、结论4

①函数也是对象（因为万物皆对象），因此函数也会有__proto__，指向的是Function的原型对象（二者本质是一个）

②原型对象prototype也是对象，因此也会有__proto__，最终都是指向顶级父类Object的原型对象。

示意图：

6、思考2：为什么所有函数都会有call方法？

五、综合应用1：Vue框架中，vue实例对象（vm）与组件对象（vc）的原型链分析

结语

一、创建对象的方式

1、Java语法中，创建对象的方式

①通过构造函数

运行结果：

2、JS语法中，创建对象的方式

①通过普通方式（直接new Object）

//通过new Object，创建一个对象
let student1 = new Object();
student1.id='001'
student1.name='jack'
student1.sayHi = function(){console.log("我叫"+this.name+",id是"+this.id)
}//访问该对象的属性和方法
console.log(student1.name)
student1.sayHi()

运行结果：

②通过字面量{ }

//通过字面量，声明对象
let student1 = {id:'001',name:'Jack',sayHi:function(){console.log("我叫"+this.name+",id是"+this.id)}
}//访问该对象的属性和方法
console.log(student1.name)
student1.sayHi()

运行结果：

 

③通过自定义构造函数（即：Java中的构造器/构造函数）

//自定义构造函数
function Student(id,name){this.id = id;this.name = name;this.sayHi = function(){console.log("我叫"+this.name + ',id是'+this.id)}
}//通过自定义构造函数，创建对象
let student1 = new Student('001', 'tom');
let student2 = new Student('002', 'lucy');//访问对象的属性和方法
console.log(student1.name)
student1.sayHi()
console.log(student2.name)
student2.sayHi()

运行结果：

二、原型（prototype）

1、原型的概念

原型就类似于Java中的静态（static）这个含义。

说白了，原型是用来定义某个类的类变量/类方法的。

原型也是一个对象，里面的属性和方法都是类的静态属性和静态方法。

举例：

//自定义构造函数
function Student(id, name) {this.id = id;this.name = name;this.sayHi = function () {console.log("我叫" + this.name + ',id是' + this.id)}
}
//定义Student类的原型
Student.prototype.count = 100  //原型（静态）属性
Student.prototype.study = function(){  //原型（静态）方法console.log('共享学习空间')
}//通过自定义构造函数，创建对象
let student1 = new Student('001', 'tom');
let student2 = new Student('002', 'lucy');//访问对象的原型属性和方法
console.log(student1.count)
console.log(student2.count)
console.log(student1.count === student2.count)
console.log(student1.study)
console.log(student2.study)
console.log(student1.study === student2.study)

运行结果：

 在控制台查看原型：

 2、原型的简写

3、案例：给String类添加一个原型方法（静态方法）

let str = new String("helloworld")
//给String类添加一个原型方法（静态方法）
String.prototype.myJoin = function(){console.log("我是String类新增的原型方法")
}//查看str对象的内容
console.log(str)//调用str对象的myJoin方法
str.myJoin()

运行结果：

三、继承的概念

1、Java语法中的继承

2、JS语法中的继承

首先声明，在JS中，没有继承这个功能。因此我们只能借助原型，来实现继承这个功能。

举例：

//自定义Person构造函数
function Person(id, name){this.id = idthis.name = namethis.eat = function(){console.log('人吃饭')}
}//自定义Teacher构造函数
function Teacher(edu){this.edu = eduthis.teach = function(){console.log('教师教书')}
}//利用原型来让Teacher继承Person，说白了此时这个Person对象是Teacher类的静态。
Teacher.prototype = new Person(1,'王强')//创建Teacher类的对象实例teacher
let teacher = new Teacher('博士')
teacher.teach()
teacher.eat()
console.log(teacher.id, teacher.name, teacher.edu)

运行效果：

四、原型与原型链

1、结论一：任何函数都有一个属性为原型（prototype）对象，并且里面的constructor属性指向函数本身。

举例：

//自定义构造函数，有属性为prototype原型对象，且其中的constructor属性也指向String()函数本身
function Person(id, name){this.id = idthis.name = name
}console.log(Person.prototype.constructor === Person)//官方自带的String()函数，也有属性为prototype原型对象，且其中的constructor属性也指向String()函数本身
console.log(String.prototype.constructor === String)

运行结果：

2、结论二：对象中，也有原型对象，只不过不是叫prototype，而是叫_ _proto_ _，这两个对象本质上是一个。即：对象和构造它的构造函数，拥有同一个原型对象，只是名称不一致，一个叫prototype，一个叫_ _proto_ _。

举例：

//自定义构造函数
function Person(id, name){this.id = idthis.name = namethis.eat = function(){console.log('人吃饭')}
}//利用自定义构造函数，创建一个对象p1
let p1 = new Person('001','张三')//查看对象p1的__proto和构造函数Person的prototype是否是同一个对象
console.log(Person.prototype === p1.__proto__)//true

运行结果：

类比：就好比java中，一个类的静态变量/静态方法，在该类的对象实例中也会存在这个静态变量/静态方法，只不过我们平时不建议通过对象实例来调用，因为通过类直接就可以调用。

3、原型对象是由Object函数构造的。因此原型对象也会有一个原型对象，和Object函数中的原型对象是同一个对象。（这就叫原型链）

举例：

//自定义构造函数
function Person(id, name){this.id = idthis.name = namethis.eat = function(){console.log('人吃饭')}
}//Person构造函数，有一个原型对象(Person.prototype)。
//且该原型对象中，还有一个原型对象(Person.prototype.__proto__)（因为是对象，就会有一个属性为原型对象），指向构造函数Object的原型对象（Object.prototype）。
console.log(Person.prototype.__proto__ === Object.prototype)//true

运行结果：

示意图：

注意：由于Object是顶级父类，因此Object()构造函数中的原型对象就不再往上指了，因此为null。

4、思考1：对象为什么有toString方法？

因为顶级父类Object中，有toString()方法，因此通过原型链（类似于继承），所有对象都能获取到这个toString()方法。

原型链：下图中，红色的箭头，就是原型链。

5、结论4

①函数也是对象（因为万物皆对象），因此函数也会有__proto__，指向的是Function的原型对象（二者本质是一个）

②原型对象prototype也是对象，因此也会有__proto__，最终都是指向顶级父类Object的原型对象。

示意图：

6、思考2：为什么所有函数都会有call方法？

因为通过原型链，继承到了Function原型对象中的call方法。

五、综合应用1：Vue框架中，vue实例对象（vm）与组件对象（vc）的原型链分析

结语

以上就是JS的原型、原型链的全部内容。其中这个知识点应用到了Vue中的vm和vc关系，因此我们必须了解这些知识。

想了解更多的JS知识，请关注本博主~~

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

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

相关文章

List【Redis对象篇】

List【Redis对象篇】

🏆 作者简介：席万里 ⚡ 个人网站： 文章目录 LIst1.简介2.使用场景3.常用操作1.写操作2.读操作 4.底层实现5.压缩列表的优化1.ZIPLIST结构2.ziplist更新数据3.LISTPACK优化 6.总结（重点） LIst 1.简介 Redis List是一组…
阅读更多...
PHP8 动态属性被弃用兼容方案

PHP8 动态属性被弃用兼容方案

PHP 类中可以动态设置和获取没有声明过的类属性。这些属性不遵循具体的规则，并且需要使用 __get() 和 __set() 魔术方法对动态属性如何读写进行有效控制。 class User {private int $uid; }$user new User(); $user->name Foo; 上述代码中，User 类…
阅读更多...
专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程，真题，大纲，参考书。

专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程，真题，大纲，参考书。

考研成功上岸，苦尽甘来，专业818信号系统与数字电路125，总分400，被南理工录取，从最早信心满满，到中期犹豫不决，到后期破釜沉舟，一路颠颠簸簸，总算坚持过来了，群…
阅读更多...
测试脚本并发多进程：pytest-xdist用法

测试脚本并发多进程：pytest-xdist用法

参考：https://www.cnblogs.com/poloyy/p/12694861.html pytest-xdist详解： https://www.cnblogs.com/poloyy/p/14708825.html 总 https://www.cnblogs.com/poloyy/category/1690628.html
阅读更多...
ruoyi Cannot find module ‘@/views/system/user/index‘

ruoyi Cannot find module ‘@/views/system/user/index‘

Cannot find module /views/system/user/index 删除node_module 后打包成功
阅读更多...
mall-admin-web开源项目搭建教程（图文）

mall-admin-web开源项目搭建教程（图文）

本章教程，介绍如何在本地部署运行mall-admin-web这个开源项目。 开源地址：https://gitee.com/macrozheng/mall-admin-web mall-admin-web是一个电商后台管理系统的前端项目，基于Vue+Element实现。主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计…
阅读更多...
Dockerfile制作相关命令

Dockerfile制作相关命令

一、常用命令 1. FROM 指令指定基础镜像 FROM <image>:<tag> 如 FROM ubuntu:20.04image: 基础镜像名称。 tag: 可选&#xff0c;镜像标签&#xff0c;默认为 latest。 如 2. RUN 用于在构建镜像时执行命令。可以用于安装软件包或配置文件等。 RUN <command&g…
阅读更多...
【计算机视觉】边缘检测

【计算机视觉】边缘检测

图像的边缘简单来说就是图像中灰度不连续的地方。 1.图像梯度 图像梯度是指图像像素灰度值在某个方向上的变化&#xff1b;图像梯度是图像的一阶导数&#xff0c;实际计算时可以使用差分来近似。 1.1 什么是图像梯度&#xff1f; 图像梯度是一种数学工具&#xff0c;用于描…
阅读更多...
@JsonNaming实现入参接口参数下划线驼峰自动转换

@JsonNaming实现入参接口参数下划线驼峰自动转换

JsonNaming(PropertyNamingStrategy.SnakeCaseStrategy.class) 是用于 Jackson 库中的一个注解&#xff0c;作用是改变 Java 对象的字段命名策略&#xff0c;特别是在序列化和反序列化时。这可以帮助 Java 对象中的字段名从驼峰命名法&#xff08;CamelCase&#xff09;转换为蛇…
阅读更多...
Microsemi Libero SoC免费许可证申请指南（Microchip官网2024最新方法）

Microsemi Libero SoC免费许可证申请指南（Microchip官网2024最新方法）

点击如下链接&#xff1a; https://www.microchip.com/en-us/products/fpgas-and-plds/fpga-and-soc-design-tools/fpga/licensing 点击右侧&#xff0c;请求免费的License 如果提示登录&#xff0c;请先登录Microchip账号。 点击Request Free License。 选项一年免费的Li…
阅读更多...
docker容器内部启动jupyter notebook但是宿主机无法访问的解决方法

docker容器内部启动jupyter notebook但是宿主机无法访问的解决方法

目录 1.问题2.解决方法 1.问题 在docker容器内启动了jupyter notebook&#xff0c;在宿主机内用如下的url无法访问 http://localhost:8888 http://127.0.0.1:8888 启动方法&#xff1a; jupyter notebook 2.解决方法 启动方法加上选项[ --ip‘*’]或者[–ip‘0.0.0.0’] 即启…
阅读更多...
[C++]类的继承

[C++]类的继承

一、什么是继承 1.定义&#xff1a; 在 C 中&#xff0c;继承是一种机制&#xff0c;允许一个类&#xff08;派生类&#xff09;继承另一个类&#xff08;基类&#xff09;的成员&#xff08;数据和函数&#xff09;。继承使得派生类能够直接访问基类的公有和保护成员&#xf…
阅读更多...
vue前端获取电脑本机的mac和ip地址

vue前端获取电脑本机的mac和ip地址

vue 前端 使用 node 里的 os 模块,来获取主机mac和IP地址 需要注意的是这篇教程只能获取本地的&#xff0c;打包到服务器上也是服务器的。需要获取不同使用者的客户端mac&#xff0c;看我这篇。获取客户端不同的mac地址 一、根目录创建 getNetworkInfo.js 脚本文件 const os …
阅读更多...
harbor镜像仓库搭建

harbor镜像仓库搭建

Harbor简介 Harbor的发展背景和现状 Harbor项目起始于2014年左右，当时正值容器技术和微服务架构迅速崛起的时期。随着越来越多的企业开始采用容器化部署应用，对于私有镜像管理的需求也日益增长。传统的解决方案要么缺乏必要的企业级特性（如访问控制、安全性和可扩展性），…
阅读更多...
01-51单片机硬件基础

01-51单片机硬件基础

开发板介绍 学校授课用的是普中科技的EM3.V2.2开发板&#xff0c;没什么好说的&#xff0c;记着去淘宝上找原理图&#xff0c;别迷信课本。 网上有卖51最小系统板的&#xff0c;比开发板便宜&#xff0c;也有下载模块&#xff0c;可以自己搭建外围电路。 还可以自己在protue…
阅读更多...
方法引用和lambda表达式的奥妙

方法引用和lambda表达式的奥妙

方法引用替代Lambda表达式 什么情况可以使用方法引用替代lambda表达式&#xff1f; 下面代码中两处使用了lambda表达式&#xff0c;一个是filter内&#xff0c;一个是forEach内。其中&#xff0c;forEach内的lambda表达式可以被方法引用替代&#xff0c;但是filter内的lambda…
阅读更多...
Android通过okhttp下载文件(本文案例 下载mp4到本地，并更新到相册)

Android通过okhttp下载文件(本文案例 下载mp4到本地，并更新到相册)

使用步骤分为两步 第一步导入 okhttp3 依赖 第二步调用本文提供的 utils 第一步这里不做说明了&#xff0c;直接提供第二步复制即用 DownloadUtil 中 download 为下载文件 参数说明 这里主要看你把 destFileName 下载文件名称定义为什么后缀&#xff0c;比如我定义为 .mp4 下…
阅读更多...
What is load balancing? 什么是负载均衡？

What is load balancing? 什么是负载均衡？

原文链接 What Is Load Balancing? | IBM 什么是负载均衡&#xff1f; 在多台服务器之间高效的分配网络流量的过程&#xff0c;以优化应用程序的可用性&#xff0c;同时确保积极的用户体验。 电商网站依赖负载均衡&#xff08;load balancing&#xff09;来确保web应用能够无…
阅读更多...
dex2oat 提升启动速度

dex2oat 提升启动速度

用途 build阶段可以将apk中dex生成oat文件&#xff08;odex&#xff09;&#xff0c;dex2oat 源码目录/system/bin/dex2oat 4种编译模式&#xff1a; verify&#xff1a;只运行 DEX 代码验证quicken&#xff1a;运行 DEX 代码验证&#xff0c;并优化一些 DEX 指令&#xff0c…
阅读更多...
JavaScript 原型对象与原型链的魔法与艺术

JavaScript 原型对象与原型链的魔法与艺术

在JavaScript的世界里&#xff0c;原型对象和原型链是两个非常重要的概念。它们不仅帮助我们理解对象的创建过程&#xff0c;还为我们提供了一种高效的方式来管理共享的属性和方法。本文将深入探讨JavaScript中的原型对象和原型链&#xff0c;包括它们的定义、工作原理以及在实…
阅读更多...
最新文章

Copyright @ 2022~2023