聊一聊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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
Vue全家桶实践项目总结(推荐)
Nov 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
MVC模式的PHP实现
2006/10/09 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
jQuery回调方法使用示例
2017/06/26 jQuery
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
Vue调用后端java接口的实例代码
2019/10/28 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python pygame实现球球大作战
2019/11/25 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
协议书格式
2014/04/23 职场文书
通信工程专业求职信
2014/06/04 职场文书
庆七一活动总结
2014/08/27 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
Python借助with语句实现代码段只执行有限次
2022/03/23 Python