网站首页 > 技术文章 正文
在构造函数中,当有大千个相同属性时,繁琐而又复杂的一遍又一遍Ctrl C和V太过劳累?直接调用构造函数的制造对象的公共祖先——原型,哦,那就倍爽儿!
这里插入一下上次讲解的构造函数:
构造函数 (Constructor) : 构造函数是用来创建对象的函数。当使用 new 关键字来调用一个函数时,它会创建一个新的对象,并且这个新对象的原型会指向构造函数的 prototype 属性所指向的对象。
// Person.prototype 函数的原型 {} 祖先
Person.prototype.say = function() {
console.log('hello');
}
function Person() {
this.name = 'Tom'
}
let p1 = new Person()
p1.say()
在对象中没有的属性中访问出没有的代码say,结果应该是Undefined,看看打印的效果:
最后还是打印出了hello,这就是原型带来的效果,在p1中隐式具有say,为啥是隐式?这里你确实存在,但是在代码中你并没有看到。
原型的作用
Car.prototype.name = 'su7'
Car.prototype.lang = 5000
Car.prototype.height = 1400
function Car(color,owner) {
this.color = color
this.owner = owner
}
let tian = new Car('black','tiantian')
let xuan = new Car('red','xuanxuan')
console.log(tian.name);
这里还是会打印出原本name的属性:su7,所以将定死的属性可以通过原型直接访问,提高了代码的执行效率。
PS D:\zcl_fullstuck_ai-master\zcl_fullstuck_ai-master\zcl_fullstuck_ai-master\JS\原型> node 2.js
su7
原型功能:
- 实例对象可以修改显示继承到的属性,但是无法修改隐式继承到的属性(原型上的)
- 实例对象无法给原型新增属性
- 实例对象无法删除原型上的属性
Car.prototype.product = 'xiaomi'
function Car() {
this.name = 'su7'
}
let car = new Car()
car.name = '保时捷'
car.product = 'huawei'
console.log(car);
这里打印出huawei,在原型product上,它并不是修改xiaomi 这个属性,而是增加了huawei,即 实例对象可以修改显示继承到的属性,但是无法修改隐式继承到的属性(原型上的)。
Car.prototype.nickname = 'xiaohong'
delete Car.prototype.product
通过这两行来进行删除和新增。所以实例对象无法给原型新增属性,实例对象无法删除原型上的属性。
原型对象
对象的隐式原型 === 创建它的构造函数的显示原型。所以js引擎在查找属性时,会先查找对象显示具有的属性,找不到,在查找对象的隐式原型( proto)
<script>
Person.prototype.say = function() {
console.log('hello');
}
function Person() {
}
let p = new Person
console.log(p.say());
</script>
现在对象中知道隐式原型,若是找不到,就在构造函数中找出显示原型,两者是相等的。
function Person() {
}
let p = new Person()
console.log(Person.prototype);
// p._proto_ === Person.prototype
// Person.prototype === Object.prototype
// Object.prototype ===
这里再来理解一下隐式原型和显示原型的关系,知道Object的显示原型封顶。
原型链
js引擎在查找属性时,会顺着对象的隐式原型向上查找,找不到,则查找隐式原型的隐式原型, 一直向上,直到找到null位置,这种查找关系,称之为原型链
所有的对象都有原型?
不 Object.create(null) 没有原型
let a = {
name: 'Tom'
}
let obj = Object.create(null)
console.log(obj);
这里直接创建一个对象,让新对象隐式继承 a 对象的属性。
插入new的执行过程
function Foo() {
// var this = {
// a: 1
// }
// this._proto_ === Foo.prototype
this.a = 1
// return this
}
let f = new Foo()
- new 会在构造函数中创建一个 this 对象
- 执行函数中的逻辑代码 (相当于往this对象上添加属性)
- 让this的隐式原型等于Foo的显示原型
- return this 对象
猜你喜欢
- 2024-10-04 Vue选项:computed计算属性(vue3.0 计算属性)
- 2024-10-04 Vue 中的计算属性(vue中的计算属性)
- 2024-10-04 Js基础7:表单元素属性(js中表单)
- 2024-10-04 Jquery属性——学习笔记(一)(如何使用jquery设置一个属性值)
- 2024-10-04 前端入门——在网页中使用JavaScript
- 2024-10-04 前端-JavaScript中的class(javascript class)
- 2024-10-04 如何获取JavaScript中某个函数可接受的参数数量
- 2024-10-04 关于js设置对象attr属性的问题(js对象属性值)
- 2024-10-04 react三大核心属性(react的核心)
- 2024-10-04 JS 对象基本用法(js对象的操作方法)
- 10-02基于深度学习的铸件缺陷检测_如何控制和检测铸件缺陷?有缺陷铸件如何处置?
- 10-02Linux Mint 22.1 Cinnamon Edition 搭建深度学习环境
- 10-02AWD-LSTM语言模型是如何实现的_lstm语言模型
- 10-02NVIDIA Jetson Nano 2GB 系列文章(53):TAO模型训练工具简介
- 10-02使用ONNX和Torchscript加快推理速度的测试
- 10-02tensorflow GPU环境安装踩坑日记_tensorflow配置gpu环境
- 10-02Keye-VL-1.5-8B 快手 Keye-VL— 腾讯云两卡 32GB GPU保姆级部署指南
- 10-02Gateway_gateways
- 最近发表
-
- 基于深度学习的铸件缺陷检测_如何控制和检测铸件缺陷?有缺陷铸件如何处置?
- Linux Mint 22.1 Cinnamon Edition 搭建深度学习环境
- AWD-LSTM语言模型是如何实现的_lstm语言模型
- NVIDIA Jetson Nano 2GB 系列文章(53):TAO模型训练工具简介
- 使用ONNX和Torchscript加快推理速度的测试
- tensorflow GPU环境安装踩坑日记_tensorflow配置gpu环境
- Keye-VL-1.5-8B 快手 Keye-VL— 腾讯云两卡 32GB GPU保姆级部署指南
- Gateway_gateways
- Coze开源本地部署教程_开源canopen
- 扣子开源本地部署教程 丨Coze智能体小白喂饭级指南
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (87)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)