javascript prototype原型详解(比较基础)


Posted in Javascript onDecember 26, 2016

javascript的prototype原型简单介绍:
prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可能的实现的事情,并且此概念稍有难度,可能对于初次接触的朋友来说有点困难,下面就通过代码实例简单介绍一下prototype原型的用法。

一.基本概念:

每一个函数都具有一个prototype属性。
此属性是一个指针,能够指向一个对象,而此对象将会被由构造函数创建的对象实例所共享,也就是会继承此对象。
总结:prototype所指向的对象是被构造函数所创建的对象实例所共同共享的。
创建的对象实例有一个内部属性[[Prototype]],它是一个指针,指向构造函数原型(prototype)指向的对象。
先看一段代码:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
antzone.prototype.getName=function(){
 return this.webname;
}
var oantzone=new antzone("三水点靠木",10);
console.log(oantzone.getName());
</script>

效果图:

javascript prototype原型详解(比较基础)

图示如下:

javascript prototype原型详解(比较基础)

上面图片基本说明了prototype的作用。
二.代码实例:
实例一:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
var oantzone=new antzone("三水点靠木",10);
antzone.prototype=obj;
console.log(oantzone.address);

看以上代码,很多朋友可能以为输出值是"江苏省徐州",但是实际输出内容是undefined,这是因为在使用构造函数创建对象oantzone的时候,oantzone对象内部属性[[Prototype]]将会指向antzone()构造函数的原型prototype所指向的对象,而后来antzone.prototype=obj是重置构造函数的原型,而oantzone的内置属性[[Prototype]]指向依然是原来的对象,自然oantzone.address是undefined。
实例二:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype=obj;
var oantzone=new antzone("三水点靠木",10);
console.log(oantzone.webname+oantzone.address);
</script>

此代码和上一段代码的唯一不同,就是第八行和第九行进行了一下交换,这样就可以输出"江苏省徐州",这个就不难理解了,因为对象实例是在重置原型以后创建的。
实例三:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype.add=obj;
var oantzone=new antzone("三水点靠木",10);
console.log(oantzone.add.address);

以上代码只是修改对象原型,而不是重置对象原型。

Javascript 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
jquery图片切换实例分析
Apr 15 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
javascript实现标签切换代码示例
May 22 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
如何提高数据访问速度
Dec 26 #Javascript
Angular的模块化(代码分享)
Dec 26 #Javascript
详解Angular的数据显示优化处理
Dec 26 #Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 #Javascript
手动初始化Angular的模块与控制器
Dec 26 #Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 #Javascript
Angular的事件和表单详解
Dec 26 #Javascript
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP单例模式详细介绍
2015/07/01 PHP
功能强大的php分页函数
2016/07/20 PHP
纯文字版返回顶端的js代码
2013/08/01 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
租房协议书怎么写
2014/04/10 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
教师工作表现自我评价
2015/03/05 职场文书
CAD实训总结范文
2015/08/03 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server