聊一聊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的flv视频播放器插件使用方法
Jun 23 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
vuex入门最详细整理
Mar 04 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP入门
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
珊瑚虫IP库浅析
2007/02/15 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
php接口隔离原则实例分析
2019/11/11 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
详解appium+python 启动一个app步骤
2017/12/20 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
后勤副校长自我鉴定
2013/10/13 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
产品质量保证书范本
2015/02/27 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书