JS三座大山再学习(一、原型和原型链)
前言
西瓜君之前学习了JS的基础知识与三座大山,但之后工作中没怎么用,印象不太深刻,这次打算再重学一下,打牢基础。冲鸭~~
原型模式
JS实现继承的方式是通过原型和原型链实现的,JS中没有类(此处指ES5,ES6中加上了class语法糖)
每个函数都有prototype(原型)属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含特定类型的所有实例共享的属性和方法,即这个原型对象是用来给实例共享属性和方法的。
而每个实例内部都有一个指向原型对象的指针(proto)。
5个原型规则
- 所有引用类型(数组、对象、函数),都具有对象特性,及可自由扩展属性
举个栗子
var obj = {
name:'波妞'
}
console.log(obj) // { name: '波妞' }
obj.like = '宗介'
console.log(obj) // { name: '波妞', like: '宗介' }
- 所有的引用类型都有一个__proto__属性,属性值是一个普通对象
- 所有的函数都有一个prototype属性,属性值是一个普通对象
- 所有的引用类型的__proto__指向它构造函数的prototype属性值
- 当试图获取一个对象的某个属性时,如果这个对象本身没有这个属性,那么他会去它的__proto__(即它构造函数的prototype)去找
原型链
理解:每一个引用类型都有__proto__,每一个函数都有prototype,引用类型的__proto__与它构造函数的prototype指向同一个对象;调用引用类型时,如果其本身并没有调用的方法或属性,就会去__proto__(也就是它构造函数的prototype)去找,没有的话会继续找prototype的__proto__,到顶级Object的原型指向null为止
function Foo (name, age) {
this.name = name
}
Foo.prototype.print = function () {
console.log(this.name)
}
var f = new Foo('波妞')
f.print() // 波妞
原型链继承的小栗子
function Elem(id) {
this.elem = document.getElementById(id)
}
Elem.prototype.html = function (val) {
var elem = this.elem
if (val) {
elem.innerHTML = val
return this // 链式编程
}else{
return elem.innerHTML
}
}
Elem.prototype.on = function (type, fn) {
var elem = this.elem
elem.addEventListener(type, fn)
}
var div1 = new Elem('div1')
console.log(div1. html())
如有错误,请斧正
以上
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义