聊一聊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实现漂亮的动态信息提示效果
Aug 02 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jquery图片切换插件
Mar 16 Javascript
DOM 高级编程
May 06 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
easyui validatebox验证
Apr 29 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 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
一个捕获函数输出的函数
2007/02/14 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
nodeJS微信分享
2017/12/20 NodeJs
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
js验证账户名是否重复
2020/05/26 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python实现在pickling的时候压缩的方法
2014/09/25 Python
python中反射用法实例
2015/03/27 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
基于python实现把图片转换成素描
2019/11/13 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
HTML5标签小集
2011/08/02 HTML / CSS
什么是数据抽象
2016/11/26 面试题
应届生人事助理求职信
2013/11/09 职场文书
中年人生感言
2014/02/04 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
为自己工作观后感
2015/06/11 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL