JavaScript中关于原型(prototype)的理解

本篇文章是个人通过查询资料和看视频教程后总结的有关原型的理解。希望可以帮助那些对原型还不太理解的朋友们。由于本人也是个新手,所以可能里面会有一些问题,希望大家可以指正出来,共同进步,感激不尽。

到底什么是原型?这个问题暂且不谈,个人感觉晦涩拗口的概念不利于深入学习,当我们真正了解了原型的作用,自然而然就有了自己对原型的定义,我们首先通过一个实例,来了解一下原型的作用,只有了解了原型是做什么,才能更深入的理解到底什么是原型。

实例如下:
求数组中元素的和(不使用原型版)

//首先我们创建一个数组对象
var arr1 = new Array(1,2,3,4,5);
//为数组对象添加求和方法
arr1.sum = function (){
	var result = 0;
	for(var i=0;i<this.length;i++){
		result+=this[i];
	}
	return result;
}
//alert一下num方法。
alert(arr1.num());//结果为:15

//接下来我们再创建第二数组对象arr2
var arr2 = new Array(1,2,3);
//同样调用num方法
alert(arr2.num());//报错,arr2上面不存在num方法

求数组中元素的和(使用原型版)

//首先我们创建一个数组对象
var arr1 = new Array(1,2,3,4,5);
//通过原型为数组对象添加求和方法
Array.prototype.sum = function (){
	var result = 0;
	for(var i=0;i<this.length;i++){
		result+=this[i];
	}
	return result;
}
//alert一下num方法。
alert(arr1.num());//结果为:15

//接下来再创建第二个数组对象arr2
var arr2 = new Array(1,2,3);
//alert一下num方法
alert(arr2.num());//结果为:6

通过上面两个版本的代码,我们可以发现:
当不使用原型的时候,直接添加方法,只会为当前对象本身添加,而再次创建的对象无法用有该方法。
当使用原型的时候,通过原型添加方法以后,任何新创建的对象都会拥有这个方法。

其实我们可以类比一下CSS中的通过class属性添加样式和添加行间样式。
先稍微解释一下class属性和行间样式的区别:
class属性可以用来给一组HTML标签添加样式(标签中的class属性名相同),例如:

<!--简化版HTML,通过class添加样式,会使下面这一组div都变为长100px,宽为100px的蓝色方块
通过添加行间样式,只有第一div变为了红色。-->
<head>
	<style>
		.div1 {
			width:100px;
			height:100px;
			background-color:blue;
		}
	</style>
<head>
<body>
	<div class='div1' style = 'background-color:red'></div>
	<div class='div1'></div>
	<div class='div1'></div>
	<div class='div1'></div>
	<div class='div1'></div>
</body>

通过上面的实例我们可以得到:
在CSS中
class————为一组元素添加样式
行间样式—— 为一个元素添加样式

言归正传
使用原型——和class类似,为一组对象添加方法———往类上添加方法
不适用原型——和行间样式类似,只为当前对象添加方法————往对象上添加方法

以上便是我对原型的理解,希望对看到的朋友有所帮助!!!上面这些有什么不正确的地方,希望大家提出来,不胜感激!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值