聊一聊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 保存文件到本地实现方法
Nov 29 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
Node.js安装配置图文教程
May 10 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
vue接口请求加密实例
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
php切割页面div内容的实现代码分享
2012/07/31 PHP
php随机抽奖实例分析
2015/03/04 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
linux面试题参考答案(11)
2016/11/26 面试题
简历中自我评价分享
2013/10/09 职场文书
会计专业导师推荐信
2014/03/08 职场文书
大学军训感言1500字
2014/03/09 职场文书
贷款委托书怎么写
2014/08/02 职场文书
法人授权委托书
2014/09/16 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
担保书范本
2015/01/20 职场文书
社区植树节活动总结
2015/02/06 职场文书
鉴史问廉观后感
2015/06/10 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js