js prototype

最新推荐文章于 2025-08-08 17:07:36 发布
最新推荐文章于 2025-08-08 17:07:36 发布
阅读量143 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： js prototype javascript 对象 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/blackproof/article/details/88301895
本文详细解析了JavaScript中的原型函数及其工作原理，包括构造函数、原型函数之间的关系，以及如何通过原型函数为构造函数添加属性和方法。同时，文章还展示了JavaScript面向对象特征的实现方式，如公有属性、公有方法、私有属性等，并通过多个实例代码进行详细解释。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转两篇讲javascript prototype的文章

（http://firefly-zp.iteye.com/blog/1249816）

Javascript 中的原型函数（prototype）的工作原理，在 javascript 中每次声明新函数的过程中，就会为其创建一个 prototype 的属性。在未加其他附带条件情况下，所有的 prototype 属性都会自动获取 constractor 属性，constructor 内包含一个指向 prototype 属性所属函数的指针（就是说 constructor 回指构造函数本身）。 

举个例子来说，Fruit.prototype.constructor 指向 Fruit。并且可以通过这个构造函数，为其添加更多的属性和方法。 

当调用构造函数创建一个新实例后，该实例内部包含一个指针指向构造函数的原型函数。此时我们不用去关心内部的这个指针到底是什么（这个指针还的确有个名字：__proto__ 估计是为了对应 prototype 而起的名字吧 ~\(≧▽≦)/~ ），只需记住它的指向即可（指向构造函数的原型函数）。需要注意的是，这个 __proto__ 只存在于函数实例与构造函数的原型函数之间，而非实例与构造函数之间。 

下面画个图，来精心诠释一下。 



如上图所示，Fruit_1, Fruit_2 与构造函数没有直接的联系，只是这两个实例的 __proto__ 属性指向了 Fruit.prototype。虽然这两个实例都不包含属性和方法，但却可以通过 fruit_1.showPrice() 来调用。其理论依据是通过查找对象属性的过程来实现的。 

举个例子来说： 

Javascript代码   收藏代码
  1. function Fruit(){  
  2. }  
  3.   
  4. Fruit.prototype.category = "apple";  
  5. Fruit.prototype.price = 19.9;  
  6. Fruit.prototype.showPrice = function(){  
  7.     alert(this.price);   
  8. }  
  9.   
  10. var fruit_1 = new Fruit();  
  11. var fruit_2 = new Fruit();  
  12. alert(fruit_1.constructor == fruit_2.constructor);  // 输出 true  
  13. fruit_1.showPrice(); // 19.9  


此时，Fruit（）构造函数变成了一个空函数，但却可以通过调用 prototype 往构造函数内直接增加属性和方法。并且在此时，仍然可以调用构造函数来 new 新对象，并且新对象具有通过原型函数向构造函数直接增加的属性和方法（有点拗口啊，就是说，通过原型函数直接向构造函数增加属性和方法，增加的这些属性和方法，在通过构造函数 new 出来新实例中也具有）。 

并且通过上面的例子可以看出，通过构造函数 new 出来的不同对象，具有与构造函数相同的属性和方法。并且这些都是共有的。 

这一切的一切表明，在构造函数外部可以通过原型函数为其增加属性和方法，并且与在构造函数内部声明具有相同的效果。 

 

第二篇（）

-----------------------------------------------------------------

function User(name){
   this.name=name;
}
User.prototype.display = function(){
   alert("User's name is:"+this.name);
}
var me = new User("test");
me.display();

JavaScript能够实现的面向对象的特征有： 
·公有属性(public field) 
·公有方法(public Method) 
·私有属性(private field) 
·私有方法(private field) 
·方法重载(method overload) 
·构造函数(constructor) 
·事件(event) 
·单一继承(single inherit) 
·子类重写父类的属性或方法(override) 
·静态属性或方法(static member)


例子一(JavaScript中允许添加行为的类型)： 可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。 JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String

Js代码
  1. <script type= "text/javascript" >   
  2. Object.prototype.Property = 1;   
  3. Object.prototype.Method =  function  ()   
  4. {   
  5.     alert(1);   
  6. }   
  7.     
  8. var  obj =  new  Object();   
  9. alert(obj.Property);   
  10. obj.Method();   
  11. </script>   
  12.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. Object.prototype.Property = 1;  
  3. Object.prototype.Method = function ()  
  4. {  
  5.     alert(1);  
  6. }  
  7.    
  8. var obj = new Object();  
  9. alert(obj.Property);  
  10. obj.Method();  
  11. </script></span>  

  例子二(prototype使用的限制)： 在实例上不能使用prototype，否则发生编译错误

Js代码
  1. <script type= "text/javascript" >   
  2. var  obj =  new  Object();   
  3. obj.prototype.Property = 1;  //Error   
  4. //Error   
  5. obj.prototype.Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. </script>   
  10.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. var obj = new Object();  
  3. obj.prototype.Property = 1; //Error  
  4. //Error  
  5. obj.prototype.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. </script></span>  

  例子三(如何定义类型上的静态成员)： 可以为类型定义“静态”的属性和方法，直接在类型上调用即可

Js代码
  1. <script type= "text/javascript" >   
  2. Object.Property = 1;   
  3. Object.Method =  function ()   
  4. {   
  5.     alert(1);   
  6. }   
  7.     
  8. alert(Object.Property);   
  9. Object.Method();   
  10. </script>   
  11.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. Object.Property = 1;  
  3. Object.Method = function()  
  4. {  
  5.     alert(1);  
  6. }  
  7.    
  8. alert(Object.Property);  
  9. Object.Method();  
  10. </script></span>  

  例子五()： 这个例子演示了通常的在JavaScript中定义一个类型的方法

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. alert(obj.Property);   
  12. obj.Method();   
  13. </script>  
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function Aclass()  
  3. {  
  4. this.Property = 1;  
  5. this.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. }  
  10. var obj = new Aclass();  
  11. alert(obj.Property);  
  12. obj.Method();  
  13. </script></span>  

  例子六(JavaScript中允许添加行为的类型)： 可以在外部使用prototype为自定义的类型添加属性和方法。

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. Aclass.prototype.Property2 = 2;   
  11. Aclass.prototype.Method2 =  function   
  12. {   
  13.     alert(2);   
  14. }   
  15. var  obj =  new  Aclass();   
  16. alert(obj.Property2);   
  17. obj.Method2();   
  18. </script>   
  19.       
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function Aclass()  
  3. {  
  4. this.Property = 1;  
  5. this.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. }  
  10. Aclass.prototype.Property2 = 2;  
  11. Aclass.prototype.Method2 = function  
  12. {  
  13.     alert(2);  
  14. }  
  15. var obj = new Aclass();  
  16. alert(obj.Property2);  
  17. obj.Method2();  
  18. </script></span>  

  例子八()： 可以在对象上改变属性。（这个是肯定的）也可以在对象上改变方法。（和普遍的面向对象的概念不同）

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. obj.Property = 2;   
  12. obj.Method =  function ()   
  13. {   
  14.     alert(2);   
  15. }   
  16. alert(obj.Property);   
  17. obj.Method();   
  18. </script>  
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function Aclass()  
  3. {  
  4. this.Property = 1;  
  5. this.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. }  
  10. var obj = new Aclass();  
  11. obj.Property = 2;  
  12. obj.Method = function()  
  13. {  
  14.     alert(2);  
  15. }  
  16. alert(obj.Property);  
  17. obj.Method();  
  18. </script></span>  

  例子九()： 可以在对象上增加属性或方法

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. obj.Property = 2;   
  12. obj.Method =  function ()   
  13. {   
  14.     alert(2);   
  15. }   
  16. alert(obj.Property);   
  17. obj.Method();   
  18. </script>   
  19.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function Aclass()  
  3. {  
  4. this.Property = 1;  
  5. this.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. }  
  10. var obj = new Aclass();  
  11. obj.Property = 2;  
  12. obj.Method = function()  
  13. {  
  14.     alert(2);  
  15. }  
  16. alert(obj.Property);  
  17. obj.Method();  
  18. </script></span>  

  例子十(如何让一个类型继承于另一个类型)： 这个例子说明了一个类型如何从另一个类型继承。

Js代码
  1. <script type= "text/javascript" >   
  2. function  AClass()   
  3. {   
  4.         this .Property = 1;   
  5.         this .Method =  function ()   
  6.        {   
  7.               alert(1);   
  8.        }   
  9. }   
  10.     
  11. function  AClass2()   
  12. {   
  13.         this .Property2 = 2;   
  14.         this .Method2 =  function ()   
  15.        {   
  16.               alert(2);   
  17.        }   
  18. }   
  19. AClass2.prototype =  new  AClass();   
  20.     
  21. var  obj =  new  AClass2();   
  22. alert(obj.Property);   
  23. obj.Method();   
  24. alert(obj.Property2);   
  25. obj.Method2();   
  26. </script>   
  27.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function AClass()  
  3. {  
  4.        this.Property = 1;  
  5.        this.Method = function()  
  6.        {  
  7.               alert(1);  
  8.        }  
  9. }  
  10.    
  11. function AClass2()  
  12. {  
  13.        this.Property2 = 2;  
  14.        this.Method2 = function()  
  15.        {  
  16.               alert(2);  
  17.        }  
  18. }  
  19. AClass2.prototype = new AClass();  
  20.    
  21. var obj = new AClass2();  
  22. alert(obj.Property);  
  23. obj.Method();  
  24. alert(obj.Property2);  
  25. obj.Method2();  
  26. </script></span>  

  例子十一(如何在子类中重新定义父类的成员)： 这个例子说明了子类如何重写父类的属性或方法。

Js代码
  1. <script type= "text/javascript" >   
  2. function  AClass()   
  3. {   
  4.         this .Property = 1;   
  5.         this .Method =  function ()   
  6.        {   
  7.               alert(1);   
  8.        }   
  9. }   
  10.     
  11. function  AClass2()   
  12. {   
  13.         this .Property2 = 2;   
  14.         this .Method2 =  function ()   
  15.        {   
  16.               alert(2);   
  17.        }   
  18. }   
  19. AClass2.prototype =  new  AClass();   
  20. AClass2.prototype.Property = 3;   
  21. AClass2.prototype.Method =  function ()   
  22. {   
  23.        alert(4);   
  24. }   
  25. var  obj =  new  AClass2();   
  26. alert(obj.Property);   
  27. obj.Method();   
  28. </script>
blackproof
关注
JavaScript Prototype
csbysj2020的博客
06-13 531
在 JavaScript 中，每个函数都有一个特殊的属性叫做prototype，这个属性是一个对象，它包含了可以被特定函数的所有实例继承的属性和方法。当创建一个函数时，JavaScript 会自动为这个函数分配一个prototype对象。// 输出: Hello, my name is Alice在上面的例子中，Person函数有一个prototype对象，我们在其中定义了一个greet方法。当我们创建一个Person的新实例alice时，alice能够访问greet方法，即使这个方法是在。
JavaScript prototype详解
2401_87288816的博客
09-22 997
实际上当代码读取某个对象的某个属性的时候，都会执行一遍搜索，目标是具有给定名字的属性，搜索首先从对象实例开始，如果在实例中找到该属性则返回，如果没有则查找prototype，如果还是没有找到则继续递归prototype的prototype对象，直到找到为止，如果递归到object仍然没有则返回错误。当定义一个函数后通过 “.”为其添加的属性和函数，通过对象本身仍然可以访问得到，但是其实例却访问不到，这样的变量和函数分别被称为静态变量和静态函数，用过Java、C#的同学很好理解静态的含义。
一文搞清楚 JavaScript prototype 原型链
03-27 1023
每个 JavaScript函数（构造函数）都有一个prototype属性，它是一个对象。所有由该函数创建的实例对象都会继承这个原型对象的属性和方法。// 方法添加到原型，所有实例共享${this} // 方法添加到原型，所有实例共享 Person . prototype . sayHello = function() {
JavaScript Prototype(原型)
油墨香^-^的博客
05-19 2274
引言：如果不处理对象，您就无法在 JavaScript 方面取得很大进展。它们几乎是 JavaScript 编程语言的所有方面的基础。在这篇文章中，您将了解用于实例化新对象的各种模式，在此过程中，您将逐步深入了解 JavaScript 的原型。 基础入门 如果不处理对象，您就无法在 JavaScript 方面取得很大进展。它们几乎是 JavaScript 编程语言的所有方面的基础。事实上，学习如何创建对象可能是你刚开始学习的第一件事。话虽如此，为了最有效地学习 JavaScript 中的原型，我们将从基
JavaScript prototype(原型)
xiaohua616的博客
09-12 353
下面来说下prototype
JavaScript原型Prototype详情
菜鸟教程
04-25 2867
文章来源： 学习通http://www.bdgxy.com/ 目录1、概述1.1原型是什么1.2获取原型2、原型属性2.1利用原型添加属性与方法。2.2访问原型属性原型方法3、自有属性与原型属性3.1检测自有属性或者原型属性4、isPrototypeOf()方法5、扩展内置对象6、结语1、概述 1.1原型是什么 在JavaScript中，函数是一个包含属性和方法的Function类型的对象。而原型（Prototype ）就是Function类型对象的一个属性。 在函数定义是包含了prototype属
javascript Prototype属性说明
菜鸡的博客
04-27 706
javascript中的每个对象都有prototype属性，Javascript中对象的prototype每一个构造函数都有一个属性叫做原型。你不需要显式地声明一个prototype属性，因为在每一个构造函数中都有它的存在。
JavaScript prototype（原型对象）
笔记
02-16 2119
JavaScript 的原型（prototype）是 JavaScript 中的一个重要概念。它是一种特殊类型的对象，每个 JavaScript 对象都有一个原型对象。原型对象在 JavaScript 中起着非常重要的作用。本文将详细介绍 JavaScript 原型对象的作用和在实际工作中的用途。
javascript prototype原型修改
aflwi06660的专栏
03-24 202
javascript prototype原型修改 View Code 1 funciton Person(){ 2 3 } 4 5 var person = new Person(); 6 7 Person.prototype...
JavaScript 原型（Prototype）详解
记录来时的路
06-12 616
摘要：JavaScript原型机制是实现继承的核心，通过prototype属性共享方法和属性。每个构造函数都有prototype对象，实例通过__proto__访问构造函数的原型。原型链实现继承：当访问对象属性时，若自身没有则沿原型链查找。关键方法包括Object.create()、getPrototypeOf()和instanceof操作符。原型特性包括方法共享、动态更新和多态支持。ES6类语法是原型继承的语法糖。掌握原型机制对理解JavaScript面向对象编程至关重要。（149字）
js prototype截取字符串函数
12-11
prototype它是用Javascript写好的一些API，包括对Javascript中的类如String，Array等进行的扩充，把JS文件嵌入后直接用就行了. 代码如下:String.prototype.strLen = function() { var len = 0; for (var i = 0; i ...
javascript prototype原型详解(比较基础)
10-20
JavaScript中的`prototype`原型是理解面向对象编程的关键概念之一，尤其在JavaScript中，它是一种实现对象继承的方式。本文将深入探讨`prototype`的基本概念、作用以及通过代码实例来阐述其工作原理。 首先，每个...
JavaScript prototype属性详解
11-30
JavaScript中的`prototype`属性是面向对象编程的关键特性之一，它关联了函数（特别是构造函数）与实例之间的继承关系。每个函数都有一个`prototype`属性，这个属性是一个对象，包含了所有实例共享的方法和属性。当...
JavaScript Prototype对象
10-30
JavaScript Prototype对象是JavaScript语言中的一个核心特性，它在JavaScript 1.1版本中就已经引入，主要目的是为了实现面向对象编程的继承机制。Prototype对象允许开发者为已存在的对象类型添加新的属性和方法，...
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
lf_1234的博客
08-06 897
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
使用萤石云播放视频及主题模版配置
多看书少吃饭的博客
08-07 518
本文介绍了如何在H5页面中集成萤石云视频播放功能。首先需要安装ezuikit-js依赖，然后通过EZUIKitPlayer组件传入accessToken和视频URL即可实现基础播放功能。文章详细说明了两种版本（UIKIT和UIKITPRO）的区别，并提供了完整的代码示例，包括视频容器设置、自动播放配置和样式调整。此外，还介绍了如何通过template字段自定义视频主题模板，包括官方模板和自定义模板两种方式。最后提及了WEB端和H5端均可进行模板配置，为开发者提供了完整的萤石云视频接入解决方案。
【JS】扁平树数据转为树结构
此人太懒，没有任何简介
08-07 273
摘要：本文展示了如何将扁平数据结构转换为树形结构的JavaScript实现。通过buildTree函数，可以根据指定的ID和父ID字段将扁平数据转换为嵌套的树形结构，并可选地删除空子节点。示例代码演示了如何将包含公司部门信息的扁平数据转换为层级分明的树状结构，结果输出为JSON格式的树形数据。该工具函数适用于处理组织机构、菜单等需要层级展示的数据场景。
Vite 深度解析：现代前端开发引擎
最新发布
weixin_43822134的博客
08-08 783
Vite 代表了前端工具链从"打包时代"向"原生ESM时代"的演进，其核心价值在于将开发者从构建等待中解放出来。虽然Webpack在复杂场景下仍有优势，但Vite已成为现代前端开发的默认选择。
Vue3 学习教程，从入门到精通， Vue 3 实例选项语法详解与案例代码(29）
qq_45746668的博客
08-07 1168
本文详细介绍了Vue 3的实例选项语法，包括数据选项、DOM选项、生命周期钩子等核心概念。通过一个完整的待办事项应用示例，展示了各选项的实际应用场景，如data定义响应式数据、methods编写组件方法、computed计算属性、watch监听数据变化等。示例代码包含详细注释，涵盖组件注册、指令定义、事件处理等常见功能，并演示了从父组件到子组件的数据传递和通信方式。文章适合Vue 3初学者全面了解组件选项的用法和组合方式。
深入理解JavaScript prototype属性
"JavaScript prototype对象的属性说明" 在JavaScript中，prototype是实现面向对象编程的关键机制。它是一个对象的属性，用于定义对象类型的原型，即一个类的成员集合。每个函数对象都有一个prototype子对象，而类是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值