聊一聊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 相关文章推荐
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
python psutil监控进程实例
2019/12/17 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
见习期自我鉴定
2014/01/31 职场文书
社区食品安全实施方案
2014/03/28 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript