聊一聊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 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 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
Jquery 学习笔记(一)
2009/10/13 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
Javascript面向对象编程
2012/03/18 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
JavaScript订单操作小程序完整版
2017/06/23 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
为python设置socket代理的方法
2015/01/14 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python的slice notation的特殊用法详解
2019/12/27 Python
django rest framework 自定义返回方式
2020/07/12 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
测试驱动开发的主要步骤是什么
2014/12/10 面试题
担保书范本
2015/01/20 职场文书
留学推荐信英文范文
2015/03/26 职场文书