聊一聊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 无符号右移赋值操作
Apr 17 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
js new Date()实例测试
Oct 31 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python如何重载模块实例解析
2018/01/25 Python
python3.6的venv模块使用详解
2018/08/01 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
法律进机关实施方案
2014/03/12 职场文书
Python实现byte转integer
2021/06/03 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs