聊一聊JS中的prototype


Posted in Javascript onSeptember 29, 2016

什么是prototype:

function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别。在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constructor对象,而这个constructor对象恰恰就是这个function函数本身。

//判断是否是数组
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
};
//判断是否是function
function isFunc(obj) {
return Object.prototype.toString.call(obj) === '[object Function]';
}
// 是否是json对象
function isJson(obj) {
return typeof (obj) == "object" && (isArray(obj) || Object.prototype.toString.call(obj).toLowerCase() == "[object object]");
}

对于这个属性我的理解就是继承原型对象的方法和属性。属性和方法是什么?可能一些新人不是很了解,打个比方,自行车的属性有:外表红色,可变速,可照明等,属性就是对象是什么?方法有骑自行车去上学等,方法就是对象能干什么?

那么下面我就从含义到应用说说对她的理解吧,不足之处还请大牛指点。

prototype是什么含义呢?

javascript中prototype属性:返回对象类型原型的引用。

举个例子,

A.prototype = new B()

A的prototype是B的一个实例,也就是说A讲B中的方法和属性都克隆来了一遍。注意这里是克隆而不是继承,至于克隆和继承的区别,感兴趣的同学可以自己去问下度娘。

下面上个我做的简单实例:

html部分:

<body>
<a class="btn btn1">按钮1</a>
<a class="btn btn2">按钮2</a>
<a class="btn btn3">按钮3</a>
</body>

js部分:

(function(){
var btn1 = $(".btn1");
var btn2 = $(".btn2");
var btn3 = $(".btn3");
function baseClass(){
this.showMsg = function(){
alert('11111');
}
}
function extendClass(){
this.showMsg = function(){
alert('2222');
}
}
//prototype属性可以返回对象类型的原型的引用
//如果构造函数与原型函数有同名方法,那么优先搜索构造函数的方法,不会再次克隆原型函数的同名函数
extendClass.prototype = new baseClass();
var initance = new extendClass();
btn1.click(function(){
initance.showMsg();
});
var baseinitance = new baseClass();
btn2.click(function(){
baseinitance.showMsg.call(initance);
})
})();

 理解以上实例,基本你可以初步对js中的prototype属性有个大致的认识。

以上所述是小编给大家介绍的JS中的prototype,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 #Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 #Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 #Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 #Javascript
JSON 对象未定义错误的解决方法
Sep 29 #Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 #Javascript
json定义及jquery操作json的方法
Sep 29 #Javascript
You might like
浅析51个PHP处理字符串的函数
2013/08/02 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
javascript引用对象的方法
2007/01/11 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
python django 访问静态文件出现404或500错误
2017/01/20 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python 获取url中的参数列表实例
2018/12/18 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python mock测试的示例
2020/10/19 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
销售自我评价
2013/10/22 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
北京天坛导游词
2015/02/12 职场文书
2015年服务员工作总结
2015/04/08 职场文书
市级三好生竞选稿
2015/11/21 职场文书