JavaScript原型和原型链——构造函数
一、instanceof:判断引用类型(数组、对象、函数)的变量是由哪一个 构造函数 派生出来的。(o instanceof Object)
二、原型规则和示例
1、所有的引用类型(数组、对象、函数),都具有对象特性,可以自由扩展属性(除了 "null“ 以外)。
2、所有的引用类型(数组、对象、函数),都具有__proto__属性(隐式原型),且__proto__属性的值是一个普通的对象。
3、所有的 函数 ,都有一个 prototype 属性(显式原型),且 prototype 属性的值也是一个普通的对象。
4、所有的引用类型(数组、对象、函数),__proto__属性值指向其构造函数的 prototype 属性值。
5、当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的 prototype)中寻找。
三、描述 new 一个对象的过程
1、创建一个新对象(空对象)
2、将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象)
3、执行构造函数中的代码(为这个新对象添加属性,即对 this 赋值)
4、返回新对象(返回 this)
代码示例:
1 2 3 4 5 6 7 | function File(name,type){ this .name = name; this .type = type; this .state = 1; return this ; } var js = new File( "构造函数" , "JavaScript" ); |
四、写一个原型链继承的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <! DOCTYPE html> < html > < head > < meta charset="utf-8"> < title >原型链继承--封装DOM查询的例子</ title > < style type="text/css" media="all"> body{ width: 500px; margin: 100px auto; } div{ background: #ddd; } </ style > </ head > < body > < div id="div1">DIV1</ div > < div id ="div2">DIV2</ div > < script type="text/javascript" charset="utf-8"> //通过DOM节点的Id名返回DOM对象,类似jquery的 $("#Id") function Elem(id){ this.elem = document.getElementById(id); } //获取或修改DOM节点的内容,类似jquery的 $("#Id").html() Elem.prototype.html = function(val){ var e = this.elem; if(val){ e.innerHTML = val; return this; }else{ return e.innerHTML; } } //为DOM节点绑定事件,类似jquery的 $("#Id").on("click",function(...)) Elem.prototype.on = function(type,fn){ var e = this.elem; e.addEventListener(type,fn); return this; } //点击div1,修改div2内容 var div1 = new Elem("div1"); var div2 = new Elem("div2"); div1.on("click",function(){ div2.html("Hello world"); }) </ script > </ body > </ html > |
标签:
JavaScript
【推荐】国内首个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 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?