聊一聊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 相关文章推荐
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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
php二维数组排序详解
2013/11/06 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
JS模拟多线程
2007/02/07 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python numpy格式化打印的实例
2018/05/14 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python多线程同步之文件读写控制
2021/02/25 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Python接收手机短信的代码整理
2020/08/02 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
技校生自我鉴定
2013/12/08 职场文书
授权委托书
2014/07/31 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫