小何谈原型(下篇)

简介: 小何谈原型(下篇)

1. 认识函数 + 原型定义



(1)函数也是一个对象,当真正开始执行函数,执行环境【开发时为浏览器或控制台】会为函数分配一个函数对象变量空间和函数对象空间,函数对象变量用函数名表示,存在栈空间中, 函数对象空间是在堆中开辟的一个内存空间,这个空间中有一个默认的 prototype 属性,这个 prototype 属性就是一个原型对象属性【也叫对象变量】

constructor: 对象空间地址

__proto__: 上一级原型对象空间首地址


(2) 函数和构造函数的区别

当通过 new 函数()时,此刻这个函数就是构造函数【 日后会演变成TS 类的构造器】


(3)定义:原型【 prototype ] 是定义函数由 JS 自动分配给函数的一个可以被所有构造函数实例对象变量共享的对象变量【也叫对象属性】


2. 如何访问原型对象空间上的属性和方法



(1)构造函数所有实例对象都可以访问型对象空间上的属性和方法 【每一个实例都有默认的 __proto__ 属性,这个 __proto__ 属性指向原型对象空间】


(2)关于__proto__:new 在创建新对象的时候,会赋予新对象一个属性指向构造函数的 prototype 对象空间,这个属性就是 proto

__proto__指向原型对象空间


(3) 可以直接通过构造函数.prototype 对象属性来访问原型对象空间上的属性和方法


3. 构造函数实例【也叫对象】如何访问原型对象空间上的属性和方法



(1)构造函数实例访问一个属性和方法,首先从实例空间中查找【当执行环境执行 new 构造函数()时,构造函数中通过 this 定义的属性和方法会分配在这个空间中】,如果找到该属性和方法,就停止查找,表示找到了;如果没有找到,就继续在该实例的原型对象空间中去查找该属性和方法 【实例中默认的 proto 对象 属性指向原型对象空间】


/**
* 定义老师的信息
* @param _name    姓名
* @param _type    类型
* @param _age   年龄
*/
function teacher(_name, _type, _age) {
    this.name = _name
    this.type = _type
    this.age  = _age
}
teacher.prototype.students = ['小何', '小罗', '小陈']
teacher.prototype.show = function () {
    console.log(`老师:${ this.name }, 是:${ this.type }, 年龄:${ this.age }`)
    console.log(`共同的学生有:${ this.students }`)
}
const ll = new teacher("老六", '英语老师', 28);
ll.show()
/* *
 * 老师:老六, 是:英语老师, 年龄:28
 * 共同的学生有:小何,小罗,小陈
 * */
// 可如果在原型上修改了其中的一个变量
teacher.prototype.type = "abc";
const xh = new teacher("小何", ‘编程老师’, 18);
console.log(xh);
/**
* 这里的type还是先会去实例空间中寻找,如果找不到,才会去原型上进行寻找
* 所以,这里打印的还是
* {
*  name: "小何"
*  type: "编程老师"
*  age: 18
* }
*/
// 可是当type这个属性不存在的时候,就会去原型上寻找
function teacher(_name, _type, _age) {
    this.name = _name
    // this.type = _type
    this.age  = _age
}
// 可如果在原型上修改了其中的一个变量
teacher.prototype.type = "abc";
const ww = new teacher("wangwu", '体育老师', 45)
console.log(ww.type)   // 'abc'
复制代码


(2)实例正是借助自身的 __proto__ 对象属性 来查找原型对象空间中的属性和方法,有点像儿子去和爸爸要他没有的东西一样。】


4. 增加或修改原型对象的属性或方法后, 所有的实例或叫对象立即可以访问的到 【但创建实例后再覆盖原型除外】



function teacher(_name, _type, _age) {
    this.name = _name
    this.type = _type
    this.age  = _age
}
teacher.prototype.students = ['小何', '小罗', '小陈']
const zs = new teacher("张三", "语文老师", 18);
teacher.prototype.students.push("小谢");
console.log(zs.students);
// ['小何', '小罗', '小陈', '小谢']
// -->但创建实例后再覆盖原型除外
复制代码



5. 高频面试题:创建实例后再覆盖原型,实例对象无法访问到,为什么?



let obj = { a: 1, b: 2 }
obj.a = 'list'
obj.c = 123
let obj2 = obj
obj = { addr: '深圳' }
console.log("obj:", obj)    // {addr: "深圳"}  指向变了
console.log("obj2:", obj2)  // { a: 'list', b: 2, c: 123 }
复制代码


6. 当obj2指向的空间里的值修改了,对应指向的obj也会一并修改吗?



let obj = { a: 1, b: 2 } 
let obj2 = obj
obj.a = 3
console.log('obj:', obj)    // { a: 3, b: 2 }
console.log('obj2:', obj2)  // { a: 3, b: 2 } 
复制代码


因为这两个变量指向的都是同一个内存空间

相关文章
|
4月前
|
人工智能 边缘计算 API
AI协作的四大支柱:协议详解与应用场景全解析​
本文深入解析Agentic AI协议的四大核心协议——MCP、A2A、ACP与ANP,涵盖技术特性、应用场景及选型指南,助你掌握多代理协作系统构建要点。
468 6
错误代码502,网页无法打开?教你如何解决!
错误代码502,网页无法打开?教你如何解决!
|
6月前
|
人工智能 API 定位技术
MCP全方位扫盲
MCP(Model Context Protocol)是由Anthropic提出的协议,旨在标准化大模型与外部数据源和工具的通信方式。其核心架构包括MCP Client(客户端)和MCP Server(服务端),通过标准化接口实现解耦,支持不同LLM无缝调用工具。相比传统方法,MCP简化了Prompt工程,减少定制代码,提升复用性。实际场景中,如天气查询或支付处理,MCP可智能调用对应工具,优化用户体验。MCP的核心价值在于标准化通信、统一工具描述及动态兼容性,成为大模型与外部服务的智能桥梁。
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
前端开发 Java
layui结合ajax实现下拉菜单联动效果
layui结合ajax实现下拉菜单联动效果
天气预报15日-墨迹天气-IP查询版免费API接口教程
该接口提供基于指定IP地址的15日天气预报,支持POST和GET请求方式。请求需包含用户ID、KEY,可选填IP地址,默认查询访问者IP所在地天气,查询失败时默认返回北京天气。返回值包括状态码、地点及15天天气详情,如星期、日历、天气状况、温度范围及天气图标等。示例请求和响应详见文档。
966 48
|
SQL 监控 大数据
"解锁实时大数据处理新境界:Google Dataflow——构建高效、可扩展的实时数据管道实践"
【8月更文挑战第10天】随着大数据时代的发展,企业急需高效处理数据以实现即时响应。Google Dataflow作为Google Cloud Platform的强大服务,提供了一个完全托管的流处理与批处理方案。它采用Apache Beam编程模型,支持自动扩展、高可用性,并能与GCP服务无缝集成。例如,电商平台可通过Dataflow实时分析用户行为日志:首先利用Pub/Sub收集数据;接着构建管道处理并分析这些日志;最后将结果输出至BigQuery。Dataflow因此成为构建实时数据处理系统的理想选择,助力企业快速响应业务需求。
672 6
|
缓存 JSON 安全
HTTP请求发送方法
HTTP请求发送方法【10月更文挑战第22天】
211 2